モダンなHTMLの書き方 〜Semantic が止まらない〜

こんにちわ。さいとう（黒）です。最近猫を飼いはじめて日々癒やされています。猫は黒ではありません。

今日は「セマンティック・ウェブ」と「HTMLのセマンティックな書き方」について話をしたいと思います。

セマンティック・ウェブとは？

セマンティック・ウェブ（英: semantic web）は W3C のティム・バーナーズ＝リーによって提唱された、ウェブページの意味を扱うことを可能とする標準やツール群の開発によってワールド・ワイド・ウェブの利便性を向上させるプロジェクト。セマンティック・ウェブの目的はウェブページの閲覧という行為に、データの交換の側面に加えて意味の疎通を付け加えることにある。 – 引用元：Wikipedia

以下補足すると、ウェブサイトはHTMLというマークアップ言語で記述されています。この内容は人間が読めば大概何を意味しているのかが分かるのですが、個々の単語や文章が何を意味しているのかの詳細を機械が自律的に理解するのは困難です。

そこで、ウェブサイトのコンテンツにデータに関する情報（メタデータ）を付与することで、機械がデータの意味を理解しやすいものにします。

これらに関する考え方や、技術やツール群を開発するプロジェクトをセマンティック・ウェブと呼んでいます。

セマンティック・ウェブの考えや技術を導入していくことで、Web上の情報を効率よく収集・分析できるようになり、データの有効活用が可能になります。

最近だと機械学習やAIなどが話題にあがることが多いですが、そういったもののデータとしてWeb上の情報を利用する場合に「セマンティック・ウェブ」の技術が重要になってきます。

セマンティックHTML

最近では「セマンティックHTML」とか「HTMLをセマンティクスにマークアップしよう」という言葉を見る機会が増えています。セマンティックHTMLはセマンティック・ウェブの考え方を基にしたものなのですが、要は「HTMLを”意味”にもとづいてマークアップしよう」という考え方です。

HTMLは

<div>
<h1>タイトルです</h1>
<p>内容です</p>
</div>

のようなタグと呼ばれる要素でマークアップされています。これらのタグはそれぞれ、「見出し」「段落」という情報（意味）を持っています。

記述するコンテンツの意味に合ったタグを使ってマークアップすることをセマンティックHTMLと呼びます。

なぜセマンティックHTMLなのか？

セマンティック・ウェブの説明で「機械が理解しやすいように」という話をしましたが、もう少しその点についてメリットをあげておきましょう。

検索エンジン最適化

Webにおいて、みなさんが特に気にするのは検索エンジン最適化（SEO）の部分かと思います。Googleで検索した際に上位に表示されてほしい、という話はよく聞きますが、そういった部分にセマンティックHTMLは関わってきます。

検索エンジンは「機械」です。HTMLコンテンツをスキャンする際に、検索エンジンが理解しやすいように作っておくことでSEOにおいて優位になります。GoogleもセマンティックHTMLを推奨しています。

アクセシビリティ

例えば、視覚障害を持ったユーザは、ウェブサイトの文章を読み上げるスクリーンリーダーなどのツールを使っています。その際に見出しや段落など適切にタグ付けすると、スクリーンリーダーが解析しやすくなり、より分かりやすい形態でコンテンツを提供できるようになります。

その他にも、きちんと構造化されたHTMLは機械だけでなく人間が読んでも分かりやすいのでメンテナンスしやすい…などなどメリットがあります。

これらの面からみても「HTMLをセマンティックに書く」ことの重要性が分かるかと思います。

セマンティックなHTMLの書き方

では実際にセマンティックなHTMLの書き方について見ていきましょう。

HTML5で追加された要素

HTMLについての詳細な説明はWikipediaに譲るとして、HTMLにはそれぞれバージョンが存在しています。
現在、一般的に使用されている（世のウェブサイトで利用されている）のはHTML4とHTML5です。

名称の通りHTML5が新しいバージョンのHTMLなのですが、このバージョンではHTML4で不足していたものや時代に合わせた要素など、様々な項目が強化・変更されています。HTML5ではHTMLをセマンティックに書くための要素（タグ）も追加されました。

HTML5の要素一覧はこちら： HTML5 の要素 – ウェブデベロッパーガイド – MDN

HTMLをセマンティックに書く場合、これらの要素をきちんと理解した上でどの要素が最適かを考えてマークアップしていく必要があります（わりと大変です……）。

追加された要素の中で特に利用頻度が高いものをいくつかピックアップすると、

• <section> ：見出しを伴う意味的なグループ化が可能な、文書の一般的なセクションを表す。
• <article> ：ドキュメント、ページ、アプリケーション、あるいはサイトの中で自己完結した構成物を表す。
• <nav>：主要なナビゲーション (他のページやページ内の他の部分へのリンク) である事を表す。
• <aside> ：メインコンテンツとの関連性が希薄で、メインコンテンツから切り離すことが可能なセクションを表す。
• <header>：イントロダクション、ナビゲーション等のグループを表す。
• <footer>：自身の祖先要素の内で直近のセクショニングコンテンツかセクショニングルート要素のフッターを表す。

などがあります。これらの要素を上手く使っていく必要があります。

具体的な書き方

論文公開ページを例としてみましょう。

簡単な解説

• 論文は自己完結したコンテンツとして成り立っているので、<article> タグを使用します。
• タイトル部分はコンテンツに対するヘッダー部分になるので、<header>タグを使用します。
• <h1>タグ, <h2>タグ, <h3>タグはタイトル、大見出し、中見出しのように順序だてて使います。MicrosoftWordやTeXで論文を書くときと同じです。
• 画像は明示的に画像と分かるように<figure>タグで囲います。
• PDFダウンロードボタンや、SNSの共有ボタン、Altmetricsの情報などは、本文とは直接関係のない補足情報になるので<aside>タグを使用します。

以上のように、HTMLをきちんと構造化して書くと、機械にも人間にも大変すっきりとした分かりやすいHTMLになります。

おわりに

HTML5が登場して以降、セマンティックHTMLについて言及されることが増え、HTMLの書き方も変わってきています。しかしHTML5が正式に勧告されたのが2014年と最近のため、多くのウェブサイトはまだまだ対応が十分とは言えません。

特に一世代前は「テーブルレイアウト」というレイアウト手法が取られることが多く、表ではないところで表を意味する<table>タグを使っていたこともあり、古いウェブサイトなどではセマンティックが考慮されていないケースが多く見られます。

また、ウェブサイトの見た目の美しさとHTML構造の美しさは別物で、HTMLの構造はユーザの目には見えにくいため、後回しにされがちです。

アトラスではこういった面もしっかりフォローできるよう、日々勉強や情報収集を続けてやり方をバージョンアップしていきたいと思います。