なぜ、意味に基づくマークアップをする必要があるのか？

paper

Webページに深い意味情報を付加することがHTML5では求められています。

https://wayswebhack.com/html5-semantic-markup/

しかし、そもそもなぜ「意味情報の付加」が必要なのでしょうか？divばかり用いたマークアップでは、何が良くないのでしょうか？

今回は、意味情報を付加する「セマンティックなマークアップ」について考えてみようと思います。

セマンティックなマークアップをする意義

意味に基づくマークアップをする意義は大きく分けて２つあります。

1つ目の理由は、デファクトスタンダードに準拠したコードの記述ができるため、保守が容易というものです。

意味を表す要素を使えば、コードを引き継ぐ際に引き継がれた相手がコードの意図を容易に理解できます。

アバウトネスというのは、意味の質を測る指標です。対象物が「何について」示しているかを表します。

例えば、詩のように直接的な表現が含まれていなくても、意味が把握できる文章があります。

この場合、検索エンジンがその詩の正確な意味を把握できるでしょうか？恐らくできませんね。

ただ、検索エンジンは他のページからのリンクに使われている文字列に着目してどのようなページかを判断することができます。このとき、リンクの文字列が意味のないもであればコンテキストは与えられませんが、リンクがその詩を具体的に表す文章であれば、そこにアバウトネスが存在することになります。

セマンティックなマークアップによって、同じような効果が得られます。divのみのマークアップではコンテキストは与えられませんが、以下の場合どうでしょうか。

<h1>見出し</h1>
<p>これは文章です。</p>

この場合、どれが重要なコンテンツ化ひと目で分かります。この状態を、コンテンツがアバウトネスを持つと言います。

このように、セマンティックなマークアップはこれまでのマークアップでは得られなかったさまざまなメリットが存在します。

そして、これまで以上に意味のあるマークアップをすることによって、そういったマークアップをしているサイトを検索エンジンが優遇してくれるようになるでしょう。

深く構造化について考え、マークアップするのは大変な作業ではありますが、今後はそれに見合うリターンが得られると思います。

新規にサイトを作るときは、セマンティックなマークアップについて一度見直すべきかもしれませんね。

[amazonjs asin=”4873116929” locale=”JP” title=”モダンWeb ―新しいWebプラットフォームの基盤技術”]