５章.Semantic HTMLを実装する

この記事ではSemantic HTMLについて説明していきます。

Semantic HTMLとは？

ちゃんと実装するソースコードに意味を持たせてコーディングするという思想に基づいた実装の考え方になります。

こちらの考えに基づいて実装することにより、HTMLの解析がしやすくなり、SEOの向上や、視覚にハンディキャップを持った人が利用する読み上げ機能が使いやすくなります。

今までdivタグのid属性など設定していたheaderや、footerなどの要素を<header>タグや<footer>タグなど標準で用意されているタグに書き換えます。

標準で用意されたタグを全て理解することは非常に大変なので、今回はよく使うものをピックアップしてご紹介していきます。

ビデオや、画像、gifなどのメディアを実装します。

<!--Video-->
<video src="video.mp4">ビデオ</video>
 
<!--Audio-->
<audio src="audio.mp3">音声</audio>
 
<!--Embed-->
<embed src="gifimage.gif"/>

本文の内容に基づく図や表の画像を表示したい場合は、<figure>タグと<figcaption>タグを利用して実装します。

<figure>
 <img src="figure.jpg">
 <figcaption>ここには図や表の題名をかく</figcaption>
</figure>

記事と、その記事のコンテンツを<sectionタグと<article>タグを使用して実装します。

<section>
  <h2>見出し見出し見出し</h2>
  <article>
    <p>本文本文本文本文本文本文本文</p>
  </article>
</section>

メインコンテンツには至らないようなサイドコンテンツのものには<aside> タグを設定して実装します。

例えば広告のエリアなどに適応します。

<article>
  <p>メインコンテンツ</p>
</article>
<aside>
<section>
  <p>メインコンテンツの補足</p>
</section>
</aside>