目次
HTMLの基本構造
HTMLの基本構造はざっくり言うと<html>、<head>、<body>で構成されています。
<head> には、「メタデータコンテンツ」カテゴリー、<body>にはフローコンテンツカテゴリーの要素を記載します。
今回はとりあえず基本構造を見ていきます。
最低限求められるHTMLの基本構造
VScodeを使っている方はご存じかもしれませんが、「！」を入力してTabキーを押すと下の図と同じような基本構造が挿入されます。
<head>で囲まれているところがメタデータと呼ばれるものです。
上の図で表示されているものは上から順に、エンコードの種類、ビューポートの設定、タイトルです。
<body>の中にブラウザに表示するコンテンツを記述します。
ですので<head>内に記述したものはブラウザに表示されることはありません。
では<!DOCTYPE>から順に説明していきますね。
<!DOCTYPE html>
<!DOCTYPE html>はDOCTYPE宣言と呼ばれるHTMLの前書きです。
ブラウザを標準仕様（HTML Living Standard）に従って動作させますよと明示しています。これは1行目に必ず記述してください。これを省略すると標準と異なるレンダリングモードで動作しますので注意が必要です。
<html lang=”en”>
<html>はルート要素と呼ばれHTMLのルートを示します。
lang属性はコンテンツで使用される主要な言語の種類を示します。
上の図で”en”となっている場合は英語です。日本語は”ja”と記述します。
<head>
<head>はメタデータのコレクションを示します。
<meta charset=”UTF-8″>
charset属性はエンコードの種類を示します。
エンコードとは「データを一定の基準に基づいて符号化する事」を指します。
OSが文字を認識するために文字コードの明確化が不可欠なので、まずは文字をコードとして認識させないといけません。
そこで文字をコード化する作業が必要になるわけですが、この作業を「エンコーディング」といいます。
種類は色々あるのですが、HTML Living Standardでは唯一「UTF-8」のみが推奨されています。
ちなみにHTMLの最初の1024バイト内に記述する必要があるため<head>直下に記述しておきましょう。
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
これはビューポートの設定を示します。
簡単に言うと、モバイルデバイスでページが小さく表示されるのを防ぎます。
デバイスサイズに応じてレスポンシブを機能させるため、この記述は入れておくようにしましょう。
「width=device-width」は、ビューポートの幅をデバイスの幅に合わせます。
「initial-scale=1.0」で、ページが開かれたときの初期ズームレベルを等倍に指定します。
<title>
上の図を見て「おや？と思った人もいらっしゃるでしょうが<title>も<head>内に含まれています。
これは検索時のページのタイトル（タブやブックマーク含む）として表示されるものです。
他にも検索時に表示されるものがありますが、それらも<head>内に記述します。
※<title>でページのタイトルを適切に示すことはWCAG（Web Content Accessibility Guidelines）の達成基準を満たすことに繋がります。
<body>
<body>はWebコンテンツを示します。
基本、この中に書いたものがブラウザに表示されるという認識で問題ないです。
<body>要素はドキュメント中に一つだけ配置できます。
まとめ
今日はHTMLの基本構造について説明しました。
無意識下でも入力できるぐらい毎回見る記述ですので無理に覚えようとしなくても問題ないです。
ただ、「！」＋Tabで毎回入力していると綴りが覚えれないかもしれません。
なので個人的には、最初のうちは手入力をオススメしています。
メモパッドでも打てるようになって欲しいので。
次回はメタデータについて記事を書こうと思っています。
SEOにもかかわる部分なので気合いれて書いていきます。
（昔ほど重要でもなくなっていますが、悪足搔きとしては有効と思っているので）