原文: Basic HTML5 Template: Use This HTML Boilerplate as a Starter for Any Web Dev Project (Jessica Wilkins)

翻訳・翻案: Hitomi Kawahara

新しくウェブサイトを開設する際、基礎が固まっていることは重要です。この記事では、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>
Screen-Shot-2021-07-30-at-4.15.25-AM

CSS スタイルシート

このコードにより、カスタムの CSS を HTML ページにリンクすることができます。rel="stylesheet" によって、HTML ファイルと外部スタイルシートの関係性を定義します。

    <link rel="stylesheet" href="style.css">

HTML のスクリプトタグ

外部スクリプトタグは body の終了タグの直前に配置されます。ここで外部の JavaScript コードをリンクすることができます。

	<script src="index.js"></script>

結論

HTML 5 ボイラープレートを HTML ページに追加するようにしましょう。このスターターコードには文書型、メタデータ、外部スタイルシート、スクリプトタグ等の重要な情報が含まれています。