【SAKUSAKU -Web制作のTipsおつまみブログ-】セマンティックなマークアップとは

こんにちは。
普段WEBディレクター兼マークアップエンジニアをしている佐藤です。

当ブログでの連載をすることになりました。
私のプロフィールは以前にWANTEDLYに記載したのでそちらも併せてご覧ください。

■プロフィール
氏名：佐藤明義
年齢：27歳
経歴：
数学修士号取得後、2017年に新卒でSAKURUGにジョイン。
ジョイン後は、営業⇒社内SE⇒WEBディレクターと様々な範囲を担当させていただきまし た！
その他、新人研修、高校生向けインターンシップの企画運営、SDGs社内周知活動、社内ツール選定、人事評価制度設定など社会に少しでも貢献したいという思いから活動の幅を広げております

さて、本連載では技術についてお話ができればと思います。
しばらくはマークアップについて記述します。
まずは、普段私も意識しているHTMLのセマンティクスのについて記述していきます。

目次　（想定読了時間５分）

• セマンティックなマークアップ
• • 概念／利点／例
  • 参考文献

セマンティックなマークアップとは

概要

セマンティクス（semantics）とは「意味論」という意味です。
HTMLにはそれぞれ意味を持ったタグで構成されます。
それを正しく使いましょうといったのがセマンティックなHTMLであると私は解釈してます。

さて、ここで一つ疑問です。
「正しいマークアップ」の定義は何でしょうか。
それはWHATWGという組織が発行している「HTML Living Standard」にまとめられています。
他にW3Cという組織もあるのですが、少し前に両者のドキュメントの矛盾点などがあってどちらが優先されるべきか議論もありました。
現在のHTML5は上記の「HTML Living Standard」を優先することが合意されてます。

参考：https://www.w3.org/blog/news/archives/7753

divタグやspanタグを使ってスタイルをつけていくことで表示上で見出しのように見せることもできます。
しかし、HTMLは人間だけでなく機械も読んでもらうことを前提として記述されます。

利点

Mozilla社が提供するドキュメントにセマンティックなマークアップの利点として下記のようにまとめられています。

検索エンジンが内容を重要なキーワードとして理解し、ページの検索ランキングを上げる (SEO を参照)
読み上げソフトが、目の不自由なユーザーがページを操作するのを補助するための標識として利用することができる
意味のあるコードのブロックを見つけることは、セマンティックまたは名前空間のついたクラスがあるにしろないにしろ、延々と div の中を検索するより明らかに簡単である
開発者に目立たせるデータの種類を提案することができる
セマンティックな名前は、正しいカスタム要素やコンポーネントの名前を反映する

ランキング上位を狙う必要ないよという方も一定数はいるでしょう。
その場合でも、「WEBのアクセシビリティ」の観点からどんな方でも適切に情報が受け取れるように構築すべきです。

この「アクセシビリティ」は追求すればマークアップの難易度も上がってくるのでまた別の機会にお話することにします。

例

標準仕様では推奨されないマークアップなどの記述もあるのでHTMLを使用するものは目を通すべきでしょう。
セマンティックなマークアップをする上での注意点を示す具体例をいくつか紹介します。

section と h1~h6タグについて

sectionタグは一般に節、セクションと呼ばれる集まりを示すタグです。
一般的に見出しタグと共に記述されます。
divタグのようなコンテナ要素ではないので、単にスタイリングのために使うべきではありません。
ブログ記事のように、複数のセクションの集まりでコンテンツを表現するときにはarticleタグを使用します。
section, div, articleの使い分けが重要です。
この記事を例にすると下記のようになります。

<article>
  <h1>セマンティックなマークアップについて</h1>
  <p>.....</p>
  <section>
    <h2>概要</h2>
    <p>...</p>
  </section>
  <section>
    <h2>利点</h2>
    <p>...</p>
  </section>
  <section>
    <h2>例</h2>
    <p>...</p>
  </section>
</article>

参考：https://html.spec.whatwg.org/multipage/sections.html#the-section-element

dl/dt/dtタグについて

dlタグとは説明リストのことを指します。
例えば上記プロフィールが該当します。
項目と内容が一対一に対応してその項目に関する内容を説明しているという解釈です。

氏名：○○
年齢：○○
経歴：○○○○...

項目名にはdtタグを、内容にはddタグを使用します。
ほかの用途としてはQ&Aや会社概要などが挙げられます。
コードで見ていきます。

<h2>Profile</h2>
<dl>
  <dt>name</dt>
  <dd>sato</dd>
  <dt>age</dt>
  <dd>27</dd>
  <dt>career</dt>
  <dd>...</dd>
</dl>

mainタグ

mainタグはヘッダー、サイドバー、フッターなどの付随するコンテンツと明示的に区別するそのページの主コンテンツを表します。
主コンテンツなので、ページ内で複数のmainタグの使用はすべきではありません。
ただし、JavaScriptによる制御前提で組まれるSingle page Applicationなどのケースがあり、
HTML5.2現在では、hidden属性を伴えば複数のmainタグを置くことができるとしています。

<main>メインコンテンツです</main>  
<main hidden>ここは非表示１</main>  
<main hidden>ここは非表示２</main> 

参考文献

Semantics (セマンティクス)
https://developer.mozilla.org/ja/docs/Glossary/Semantics