HTMLの記述になぜ<h1>タグと<p>タグを使うのでしょうか。すべてを<div>タグと<span>タグで済ませてはどうでしょうか。そもそも特定のHTMLタグをなぜ使うのでしょうか。

その理由は、<p>タグや<h1>タグがコンテンツに関する追加的な情報を伝えるからです。これらのタグはそれぞれ、「これは段落」、「これは第1レベルの見出し」という情報を持っています。これがセマンティックHTML、つまり、作成者がたくさんの労力を払って、マークアップによってコンテンツの編成と構成を実現するHTMLのことです。Web開発者の誰もが、ある程度までは経験しているものです。この記事は、セマンティックHTMLについて解説し、セマンティックHTMLの理解をさらに深める必要性を説明します。

セマンティックHTMLとは

簡単に言えば、セマンティックHTMLとは、働きに合わせた正しい要素やタグを使用するHTMLのことです。例として、<h1>要素を取り上げます。この要素の目的は何でしょう。セマンティック的に答えれば、「ページの第1レベル見出し用」となります。テキストをただ大きく目立たせるために<h1>要素を使用するのは、非セマンティックHTMLの典型例です。見出しタグ(<h1><h6>)のほか、よく使用される<p>要素から、あまり目にすることのない<cite>要素や<dfn>要素まで、多くのHTML要素があります。それぞれの要素には特定の意味があり、CSSを使用してスタイル設定したり、JavaScriptを使用して操作したりするため、各要素を使用してHTML を適切に構成できます。

セマンティックHTMLは、表示の見栄えではなく、コンテンツの内容によってラベル付けすることでもあります。例えば、ユビキタスなブログのアーカイブパネルについて考えてみます。アーカイブパネルは、ブログ内にあるほかのページへのリンクリストで、よくページの右側に配置されています。アーカイブにIDまたはCSSのクラスを指定する場合は、アーカイブのページ上の位置を表す名前、例えばrightpanelを使用できます。そのほかにも、コンテンツ内の役割を示す名前、例えばsidebar、より具体的にarchiveのような名前を使用できます。

セマンティックHTMLは次のようなHTMLです。

  • テキストがそのコンテンツを表す要素で囲まれている。以下に例を示します。
    • 段落が<p>要素内に含まれている。
    • 連続するリストが<ol>要素内に含まれている。
    • 別のソースから引用される大きなテキストブロックが<blockquote>要素内に含まれている。
  • HTML要素がその本来の目的以外のために使用されていない。以下に例を示します。
    • <h1>は見出しを含む。テキストを大きく表示するための要素ではない。
    • <blockquote>は長い引用文を含む。テキストを字下げするための要素ではない。
    • 空白行を作るために空の段落要素(<p></p>)を使用しない。
  • テキストにはスタイル情報が直接的に含まれていない。以下に例を示します。
    • <font><center>などのフォーマットタグを使用しない。
    • クラスやIDで色や場所を参照しない。

上記のような目的は、コードを利用する人、ブラウザー、スクリーンリーダーがコンテンツを実行し、機械であれば客観的に、人であれば主観的にどちらでも簡単にコンテンツを解析できるようにすることです。

セマンティックHTMLに関心を寄せる理由

従来より、セマンティックHTMLの支持派の中では、主に5つの議論がなされています。

コードの軽量化

CSSでスタイル設定するセマンティックHTMLは、一般的に、テーブルでフォーマット設定するHTMLよりも、必要とするコードが少なくなります。ただし、テーブルを利用しない非セマンティックHTMLを記述できる点は注目に値します。これでもコードのサイズが小さくなる可能性はありますが、簡単に理解できるコードにはならないでしょう。

アクセシビリティ

アクセシビリティは、障害を持つユーザーがサイトを実行できるようにします。セマンティックなコードは、アクセシビリティがより上がる傾向があります。ページの部分を、タイトル、見出し、段落、およびリストとして適切にラベル付けすると、スクリーンリーダーなどの補助的なテクノロジーによって解析し、障害を持つユーザーが理解できる形態でコンテンツを表示することが簡単になります。ただし、傾向があるという表現を強調している点は覚えておいてください。セマンティックHTMLは、アクセシビリティのガイドラインに準拠したサイトを作り出す魔法のソリューションではありません。アクセシビリティ対応サイトの構築が少し簡単になる程度です。

検索エンジン最適化

アクセシビリティと同様に、セマンティックHTMLは、ソフトウェアによるサイトのコンテンツの解析を簡易化することによって、検索エンジン最適化(SEO)を向上させる傾向があります。検索エンジンは、HTMLファイルに含まれるHTMLテキストをスキャンします。CSSのレンダリングは行わず、JavaScriptも実行しません。HTMLに重要なコンテンツを含めない場合、検索エンジンがそのコンテンツに触れることはないため、ランキングされることはありません。また、ページからHTMLのゴミが取り除かれ、コンテンツを説明するマークアップのみが残ることで、検索エンジンがより簡単にサイトの本来の内容に近づけるようになります。このテクニックは「ホワイトハット」SEOとみなされます。これは十分に受け入れられるもので、作ったページがセマンティック的(意味的)に最適化されているため、検索エンジンはペナルティを与えません(対照的に、特定のトピックへの関連性を強めるために非表示のテキストを使用することは、「ブラックハット」SEOとみなされます)。

セマンティックHTMLがSEOに適しているという保証はないことに注意してください。Web開発者は、検索エンジンがセマンティックHTMLを支持すると考えています。Googleが進めるHTML5への投入量は、その考えを示唆しています。ただし、検索エンジンは、そのアルゴリズムを厳密に保護しているため、非セマンティックHTMLに関連性の高いコンテンツを持たせる可能性も残しておく必要があります。

再利用

セマンティックHTMLは、ニュースアイテムは常にニュースアイテムで、アーカイブは常にアーカイブであるということを利用します。それらがページ上のどこにあるかは関係ありません。ただし、rightbarが必ずしも右側にあるとは限りません。さらに、RSSフィードでコンテンツを同時配信していて、そのコンテンツにHTMLが含まれている場合は、マークアップが少ない方が適しています。ただし、ほとんどのサイトやブログでは、用意したHTMLから直接コンテンツを同時配信することはありません。通常は、配信するコンテンツが分けて構築され、ほかのユーザーがコンテンツを理解できるように同時配信の形式で扱われます。

開発者の理解力

ここまでに取り上げたセマンティックHTMLの議論のテーマに気付いている方もいるでしょう。ここまでは、セマンティックHTMLを使用する妥当な理由ばかりですが、個人的にはどれも現実的な結論に至っていません。おそらく、どれも正当な理由付けには十分だと思います。そうなれば、申し分ありません。しかし、最近はセマンティックHTMLを記述する本当に正当な理由があるのかを論争しています。コーディングは、コンピューター(簡単な部分)とほかの開発者の両方に対するコミュニケーションです。セマンティックHTMLを人が理解するのは、非セマンティックHTMLよりも簡単です。クラスがr1c4div要素は、pullquoteという名前の要素ほど簡単には分かりません。セマンティックHTMLを使用することで、ほかの開発者やHTML作成者にとっては、コードで実行される内容を理解しやすくなります。

重要なのは、ここでは主観性を重視する点です。Nicholas Gallagher氏の記事「About HTML semantics and front-end architecture」では、クラスやIDが意味を持たないことはありえないとしています。セマンティクスとは意味があることで、クラスやIDで付加されるものには意味があるからだということです。彼の理論に無理な点はありません。しかし、筆者の意見としては、これは最適な物の見方ではありません。

セマンティクスは二元性ではありません。誰もが完全にセマンティックにも、非セマンティックにもなりえません。セマンティックは連続体の本質です。Webコンテンツは、完全な非セマンティックと完全なセマンティックのどちらの極点にも触れることがないため、その中間の連続体として存在します。この点を頭に入れると、Webコンテンツのすべての部分が意味することを、Webコンテンツのユーザーが理解できるように容易さを高めた場合、そのコンテンツは連続体の中を非セマンティックからセマンティック方向に移動します。

セマンティックHTMLに利用できる新しい要素

HTMLセマンティックのさらに議論を呼ぶ部分のひとつに、IDとクラスの名前付けがあります。問題となっているのは、HTML仕様で定義される内容と、実際のページで表示する内容にギャップがあることです。例えば、サイトのナビゲーションについて考えます。1990年代中頃からナビゲーションメニューはかなりユビキタス化が進んできています。ただその長い年月の間に、ナビゲーションのマークアップ方法が1つに標準化されずにきています。同じことが、記事や投稿フォームのページヘッダー、フッター、およびコンテンツにも言えます。マークアップの標準的な方法が存在せず、実現する方法が数多くあるため、適切なマークアップ方法に対しては、相当な意見の相違があります。

このうちいくつかは、HTML5で軽減されています。大手Webコンテンツ会社は、HTML5仕様の開発中に、最も一般的に使用されるIDとクラスの名前に関する分析を共有し、この結果を利用して、新しいHTML5の作成における指針を作りました。これは、Webでよく使用されるコンテンツを大量にマークアップする際には役立つでしょう。この成果は、次のような新しい要素の一覧です。

  • <header>
  • <footer>
  • <nav>
  • <article>

さらに多くの要素がありますが、詳しくは、W3CのHTML4とHTML5の相違点の一覧を参照してください。

これらの要素の着目点は、コンテンツのマークアップのより標準的な方法を作成することです。マークアップの一貫性が上がれば、人にもデバイスにとっても、もっと利用しやすくなります。

セマンティクスはユーザーのためにある、その逆ではない

HTMLのセマンティクスの最大の問題として、セマンティックHTMLの特徴を、ガイドラインではなく、客観的なルールとして、人がとらえる傾向があることだと考えます。適切なセマンティクスを持たせるようにHTMLを記述すべきなのはそのとおりですが、必ずそうしなければならないわけではありません。セマンティックHTMLをこれから使用する場合、背後にある理論を理解せずに、ベストプラクティスに従って行うよりは、コンテンツを拡張して行う方がよい結果が得られます。

セマンティクスにより、HTMLが理解しやすくなります。これは、<h1>タグ、<h2>タグ、および<h3>タグが適切にネストされていることに注意する必要があるということです。つまり、あるコンテンツを囲むのに<section>が正しいタグであることを確認するなど、考える時間を割く必要があるということです。このことは、どのページの<div>newsbreakingのIDが必要かどうかを話し合う、1週間にわたる40通のメールスレッドに参加すべきという意味ではありません。1つ決めたら少し考え、それから実践に移していくことです。考えたことが、当初コンテンツに求めていた内容につながっていれば、それで十分なのです。別の開発者がやってきて、コンテンツを見て理解すれば、途中から参加可能です。newsを選んだとします。セマンティックな考えの開発者が、breakingの方が明らかに適切であるのに、なぜnewsの名前を付けたのか不思議に思う可能性があります。主観的な立場ではこのような質問をどうやっても免れることはありません。ただし、ヘッダー、フッター、またはナビゲーションバーと混同することはなく、大きな成果になります。

次のステップ

セマンティクスは、アクセシビリティ、SEO、再利用、開発者間のコミュニケーションに役立ち、それを支援します。セマンティクスは連続体に沿って存在し、目標はその連続体に沿ってコンテンツをセマンティック方向に動かすことです。ただし、完全なセマンティクスにするという不可能なゴールを目指すような無理はしないでください。

以下に、セマンティックHTMLの利用の促進に役立つリソースを示します。

一般的にセマンティクスについてさらに詳しく学ぶには:

W3C HTML5リファレンス

World Wide Web Consortium(W3C)はWebの標準化団体です。このように、すべての要素の定義を行っています。W3CはHTML要素の使用に関して確固たる考え(人によっては絶対的なもの)を持っています。HTMLの個々の要素は、要素のセマンティックな使用方法を含め、詳細なドキュメントにまとめられています。

whichElement.com

WhichElement.comは、筆者がコンテンツの本来のセマンティクスの議論を始めたサイトです。例えば、カレンダーをセマンティックにマークアップする方法を探しているとすれば、whichElement.comにその答えが見つかるはずです。

HTML5のセマンティクスについてさらに詳しく学ぶには:

HMTL5 Doctor

HTML5 Doctorは、これまでも、今でも、実際にHTML5を使用する開発者に役立つリソースです。サイトにはHTML5の要素のセマンティックな使用に関する有益な情報がたくさんあります。

Adobe Developer Connection

Stephanie (Sullivan) Rewisの素晴らしい記事シリーズ「HTML5セマンティクスの理解」は、新しいセマンティックHTMLの要素を使用してみようというときに役立ちます。