原文: Basic HTML5 Template: Use This HTML Boilerplate as a Starter for Any Web Dev Project
新しくウェブサイトを開設する際、基礎が固まっていることは重要です。この記事では、HTML 5 ボイラープレートとは何か、そして基本のテンプレートをどのようにして作成するかについて解説します。
HTML 5 ボイラープレートとは？
ウィキペディアでは次のように定義されています。
ボイラープレートコード (英: boilerplate code、または単にボイラープレート) は、コンピュータプログラミングでは、殆ど、または全く変化することなく、複数の場所で繰り返される定型コードのセクションのこと。
HTML におけるボイラープレートとは、プロジェクト開始時に追加するテンプレートのことを指します。HTML ページの作成には必ずボイラープレートを使用するようにしましょう。
HTML 5 ボイラープレートの例
基本的な例がこちら。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML 5 Boilerplate</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script src="index.js"></script>
</body>
</html>HTML の文書型とは？
HTML コードの一番最初の行では、文書型宣言を行う必要があります。文書型宣言によって、ブラウザはウェブページがどのようなバージョンの HTML で書かれているか認識することができます。
<!DOCTYPE html>もし、この一番最初の行を忘れてしまうと、 <article> < footer > <header> などの HTML 5 タグがブラウザによって認識されない可能性があります。
HTML ルート要素とは？
<html> タグは HTML ファイルの最上位要素です。その中に、<head> と <body> をネストします。
<!DOCTYPE html>
<html lang="en">
<head></head>
<body></body>
</html>開始タグ <html> 内の lang 属性は、ページで使用する言語を設定します。スクリーンリーダーが文字を正しく発音できるようにする、といったアクセシビリティの観点からも言語の設定は大切です。
HTML のヘッダータグとは？
<head> タグには機械によって処理される情報を含めます。<head> タグの中には、機械に対して文書そのものの情報を提示する「メタデータ」をネストします。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML 5 Boilerplate</title>
<link rel="stylesheet" href="style.css">
</head>UTF-8 文字エンコーディングとは?
UTF-8 は、ウェブページで使用すべき標準的な文字エンコーディングです。これは <head> 要素の中の <meta> タグで最初に表示する必要があります。
<meta charset="UTF-8">World Wide Web Consortium によると、
A Unicode-based encoding such as UTF-8 can support many languages and can accommodate pages and forms in any mixture of those languages. Its use also eliminates the need for server-side logic to individually determine the character encoding for each page served or each incoming form submission.
UTF-8 などの Unicode ベースのエンコーディングは、多くの言語をサポートし、それらの言語が混在するページやフォームに対応できます。 また、これを使用すると、サーバー側のロジックにより、提供される各ページまたは受信フォーム送信ごとに文字エンコードを個別に決定する必要がなくなります。（英文を翻訳）
HTML のビューポートタグとは？
このタグはデバイスの画面サイズに対するページの幅を与えます。例えば、モバイル端末の幅が 600px の場合、ブラウザのウィンドウの幅も 600px になります。
initial-scale はズーム度合いをコントロールします。initial-scale の値が 1 の場合、ブラウザによるデフォルトのズームが防止されます。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
X-UA-Compatible とは？
この <meta> タグは、Internet Explorer の文書モードを指定します。 IE=edge は、サポートされている最高のモードです。
<meta http-equiv="X-UA-Compatible" content="ie=edge">
HTML タイトルタグとは？
<title> タグはウェブページのタイトルを指定します。このテキストは、ブラウザのタイトルバーに表示されます。
<title>HTML 5 Boilerplate</title>
CSS スタイルシート
このコードにより、カスタムの CSS を HTML ページにリンクすることができます。rel="stylesheet" によって、HTML ファイルと外部スタイルシートの関係性を定義します。
<link rel="stylesheet" href="style.css">
HTML のスクリプトタグ
外部スクリプトタグは body の終了タグの直前に配置されます。ここで外部の JavaScript コードをリンクすることができます。
<script src="index.js"></script>
結論
HTML 5 ボイラープレートを HTML ページに追加するようにしましょう。このスターターコードには文書型、メタデータ、外部スタイルシート、スクリプトタグ等の重要な情報が含まれています。