（できるだけ）正しい HTML を書くために ～基礎編その 2 ～

この記事は「（できるだけ）正しい HTML を書くために ～基礎編その 1 ～」の続きです。
前の記事を読んでない方は先にそちらをお読みください。

要素の紹介

文書構造を正しくマークアップするためには、まず「どんな HTML 要素が存在するか」を知っていなければいけません。

存在する HTML 要素を知るには MDN というサイトの中にある HTML 要素リファレンスというページを一通り読むことをおすすめします。
（表の Description の列だけでなく、Element の列の中にあるリンクをクリックした先にある各要素の詳細な説明も見てくださいね）

ぶっちゃけ、この MDN のサイトに全て書いてあるので私から説明することはないのですが、こんなに大量の説明読むの疲れるし、説明が堅くて頭にすんなり入ってこないですよね。

というわけで、この記事では私の独断と偏見で選んだ利用頻度が高そうな HTML 要素だけ紹介していきます！
ここで紹介しないからと言って絶対に使わないということはないので、すごくやる気が満ち溢れたときにでも MDN の HTML 要素リファレンスに目を通してください。

メインルート

・html 要素
一番外側の要素として必ず必要な要素です。

仕様
・子要素として、head 要素とそれに続く body 要素が必要です。
・グローバル属性を指定することができます。
    → スクリーンリーダー向けに lang 属性を必ず指定するようにしましょう。

文書メタデータ

・head 要素
HTML 文書に関するメタデータの集まりを表す要素です。

仕様
・html 要素内の最初の要素として使用します。
・必ず title 要素を含めましょう。
・ meta 要素や link 要素、style 要素などもこの要素の中に記述します。

・title 要素
HTML 文書のタイトル、または名前を表す要素です。

仕様
・head 要素に必ず含める必要があります。
・HTML 文書中に 1 回のみ使用できます。
・タイトル要素の内容はタブに表示されたり、ブックマーク時のタイトル欄に反映されます。

・link 要素
HTML 文書と他のリソースをリンクさせるための要素です。

仕様
・href 属性にリンク先のリソース URI を記述します。
・rel 属性に記述元 HTML 文書とそのリソースの関係を記述します。
    （スタイルシートなら stylesheet、ファミコンなら favicon.ico ）

・meta 要素
title 要素や link 要素を用いて表現できない任意のメタデータを表す要素です。
name 属性でメタデータ名を指定し、content 属性で要素の値、charset 属性で文字コードを指定することができます。
文字化けを防ぐために必ず HTML 文書の冒頭に charset 属性を含んでいる meta 要素を記述しましょう。

仕様
・name 属性または charset 属性のいづれか 1 つを必ず指定する必要があります。
・name 属性を指定した場合は content 属性も指定する必要があります。

・style 要素
スタイル情報を記述するための要素です。
この要素内で直接 CSS を記述することができますが、HTML はあくまでも文書構造を表現するためのものです。
この要素を用いて HTML 文書内にスタイリングを記述することは、できる限り避けるようにしてください。

セクショニングルート

・body 要素
文書のコンテンツを表す要素です。

仕様
・HTML 文書内に必ず 1 つだけ出現する必要があります。
・head 要素の後に続くように記述する必要があります。

セクショニングコンテンツ

・article 要素
文書、ページ、アプリケーション、サイトの中で自己完結した（その部分だけ抜き取っても独立した文書として成り立つ）内容を表す要素です。
投稿や新聞記事、ブログのエントリ、それらに関する投稿コメントなどコンテンツにおける独立した項目をマークアップする際に使用します。

仕様
・article 要素の中にarticle 要素をネストした場合、内側の article 要素は外側の article 要素に関する内容を表します。（例: ブログ記事に関するコメント欄）
・main 要素を含むことはできません。
・子要素として見出しを含むべきです。

・section 要素
文書のセクション（章、節、項のような文書のまとまった範囲）を表す要素です。

仕様
・セクショニング（章、節、項を表す）ために使用します。
・子要素として見出しを含むべきです。
・main 要素を含むことはできません。
・スタイリング目的で使用しないでください。

・nav 要素
他のページやページ内の一部へリンクする、ページのセクションを表す要素です。

仕様
・グローバルナビゲーションで主に使用します。
・サービスの条件、ホームページ、著作権ページのような、サイトのさまざまなページへの簡潔なリンクのリストに対しては nav 要素よりも footer 要素の方が適切です。

・aside 要素
周囲のコンテンツと関連していて、なおかつそのコンテンツとは別のものと見なすことができるコンテンツで構成されるセクションを表す要素です。

仕様
・main 要素を含むことはできません。
・リード文や広告、サイドバーなど、そのページのメインコンテンツとは別に考えられる他のコンテンツに対しても使用することができます。

・h1、h2、h3、h4、h5、h6 要素
そのセクションの見出しを表す要素です。
これらをまとめてヘディング（heading）要素と呼んだりします。

仕様
・これらの要素は要素名の数字で与えられたランクを持ちます。h1 が最も高く h6 は最も低いランクです。
・同等以上のランクに属する後続の見出しは、新しい（暗黙の）セクションを開始し、低いランクの見出しは前のセクションの一部である暗黙のサブセクションを開始します。
・小見出し、字幕、代替タイトルやキャッチフレーズをマークアップするために使用してはいけません。

この仕様の 2 番目に書いた「同等以上のランク～」がめちゃくちゃ大切な仕様なのですが、ぶっちゃけ難し過ぎて何言っているか分からないですよね？
というわけで詳しく解説していきます。

前回の記事で説明したアウトラインの話覚えているでしょうか？
「アウトラインは h1 などの見出し要素などによって自動的に生成されます」と説明しました。

では、前回アウトラインの例としてだした

1. 概要
2. 国号
    2.1 日本語の表現
        2.1.1 発音
        2.1.2 別称
    2.2 その他の言語
    2.3 国号の由来
3. 歴史
    3.1 日本の黎明
    3.2 律令国家の成立と貴族政治の展開

をヘディング要素のみで書くとこうなります！

まずは仕様前半の「同等以上のランクに属する後続の見出しは、新しい（暗黙の）セクションを開始し」の部分に注目して見てみましょう。

赤枠で囲っている部分が「同等以上のランクに属している後続の見出し」に当てはまる要素です。
確かに同じランクのセクション、もしくは 1 つ手前より 1 つ上のランクのセクションが開始されてますね。

では「低いランクの見出しは前のセクションの一部である暗黙のサブセクションを開始します」の部分に注目して見てみましょう。

青枠で囲っている部分が「低いランク（に属している後続）の見出し」に当てはまる要素です。
前のセクションの一部であるサブシェクションを開始しているのが見て取れると思います。

ピンと来ない方は、h1 要素を 「章」、h2 要素を「節」、h3 要素を「項」に置き換えると分かるかもしれません。

第 1 章 「概要」
第 2 章 「国号」

と並んでいるとき、第 2 章で書かれている文章は、第 1 章の文章とは別の内容ですよね？
また、

第 2 章 3 節「国号の由来」
第 3 章「歴史」

と並んでいるとき第 3 章も、第 2 章 3 節で書かれている文章とは別の内容について書かれた文章です。
しかし、

第 2 章「国号」
第 2 章 1 節「日本語の表現」

と並んでいるとき第 2 章 1 節の文章は、第 2 章と関連のある内容です。

すなわち「新しいセクションを開始する」というのは「手前の文章とは違う話題の文章を開始する」という意味で、「セクションの一部である暗黙のサブセクションを開始する」というのは「手前の文章をより深く掘り下げた話題の文章を開始する」という意味です。

アウトラインはヘディング要素だけでなく、section 要素を併用して表すことができます。

もしくは、

のように記述できます。
（もちろん生成されるアウトラインはどちらでも同じです）

セクショニングコンテンツは記述された時点でサブセクションを作り出すという特徴があります。
そのためヘディング要素が全て同じランクでも、適切に section 要素で囲うことでアウトラインを表現することが可能です。

どの書き方が一番良いとかは無いので、自分が書きやすい書き方でアウトラインを適切に表現していきましょう！

・header 要素
直近のセクショニングコンテンツ、またはセクショニングルート要素に対するヘッダを表す要素です。

仕様
・前書きや目次などの見出し部分に使用します
・検索フォームやロゴを包むことも可能です。
・最も近い祖先セクショニングコンテンツ、またはセクショニングルート が body 要素である場合、ページ全体に適用されるヘッダーと扱われます。
・header 要素、footer 要素、main 要素をネストすることは出来ません。

・footer 要素
直近のセクショニングコンテンツ、またはセクショニングルートに対する直接的な情報を表す要素です。
例えば、誰が書いたか、関連文書へのリンク、著作権データなどを含みます。

仕様
・最も近い祖先セクショニングコンテンツ、またはセクショニングルートが body 要素である場合、ページ全体に適用されるフッターとして扱われます。
・基本的に文書の最後に出現する可能性が高いですが、必ず文書の最後でないといけないというわけではありません。

長くなってしまったので今回はここまで……。
たぶん、あと最低でも 2 記事分ぐらいは HTML 要素の紹介が続くと思います。

道のりはまだ長いですが次回もどうぞお付き合いください。