🌊

セマンティックタグの理解：アクセシビリティー、SEO最適化

2023/07/05に公開

HTML

はじめに

HTMLソースコードを見た時に該当する部分がどの部分を指してるか分かりにくかったことありますか？
例えば<div>でいっぱいのWEBページを考えてみましょう。このページは、視覚的には問題ないかもしれませんが、コンテンツの構造や意味に関する情報を提供しません。

<div id="header">...</div>
<div id="nav">...</div>
<div id="main">...</div>
<div id="footer">...</div>

多分、idでどの部分を説明するかを何となくわかるかもしれませんが、もうちょっと効率的な方法はないでしょうか？
このようなコードは開発者、検索エンジンやスクリーンリダーみたいな機械もコンテンツを理解しにくいです。

実はもっと効率的な方法があります。以下のコードを見てみましょう。

<header>...</header>
<nav>...</nav>
<main>...</main>
<footer>...</footer>

このような特定なタグを使用すると実際のコンテンツを見なくてもWEBページの構造を理解することができます。
ヘッダー、ナビゲーション、コンテンツのメイン、フッターがどこにあるか分かりやすいです。これらの作成方法がセマンティックタグHTMLだと言います。

セマンティックタグとは

Semanticsはコードコードの断片の意味です。これは、WEBブラウザ上の画面にどのように見せるかより、HTMLの要素が持ってる意味を表示します。HTML5の様々なタグ中で何個のタグはタグ自体が意味を持ってます。

セマンティックタグはタグの形だけではなくてタグ中にどのような情報を持ってるかを教えてくれます。
セマンティックタグの例としては<header>、<nav>、<footer>、<main>、<aside>、<section>、<article>などがあります。
このようなタグは含まれてるコンテンツの情報を提供してくれない<div>や<span>みたいな非セマンティックタグとは違います。セマンティックタグは開発者だけではなくブラウザ、検索エンジンなどコンテインつをより簡単に理解できようにします。

セマンティックタグのメリット

セマンティックタグを使用することで様々なメリットがあります。

WEBアクシビリティの向上

スクリーンリーダーや他の支援技術により、コンテンツをより効果的に解析して閲覧することができます。
スクリーンリーダーみたいな支援技術として障害がある方がデジタルコンテンツを解析して閲覧する時にやり取りするのに役にたつ支援技術です。ブラウザはDOMとCSSOMを構築してAccessibility treeということも構築します。このツリーをスクリーンリーダで使って分析して障害がある方にWEBページの内容を適切な方法で提供します。
セマンティックタグを利用して意味がある構造であれば、WEBサイトを分析する時により明確にできます。

SEO改善

SEOはSearch Engine Optimizationという検索エンジン最適化ことです。要はWEBの検索サイト（例：Google、Yahoo）で上位に表示されるようにすることです。
検索エンジンはボットを使用してWEBページのコンテンツのインデックスを生成します。これらのボットはページのHTMLソースコードを分析してコンテンツの構造を理解します。セマンティックタグはこれらのボットがページをより効果的に理解するのに役に立ちます。
難しい言語が多いですが、結論的には検索した際に上位に位置させて使用者の流入を上げることです。

保持性

セマンティックタグを使用すると、HTMLコードをより簡単に読んで理解することができます。セマンティックタグはタグは含まれるコンテンツのタイプと内容を明確に説明するため、開発者がHTMLの構造を分かりやすくなります。
HTMLだけ見てWEBページを見なくても内容をわかることができます。

セマンティックタグの種類

セマンティックタグの種類は<header>、<nav>、<footer>、<main>、<aside>、<section>、<article>があります。

<header>はページのタイトル役割をする要素をおきます。ロゴ、タイトル、検索フォーム、作成者などが含まれます。

nav

リンクを含むタグとして主にページのメニューやインデックスに使用されます。
ちなみに、HTML文書中の全てのリンクが<nav>に作られる必要ではありません。主に、探索するメニューなどのリンクのための要素です。

ページの一番下で見せる部分として使用されます。ページの作成者の連絡先(<address>)および制作権情報などが入ってます。

main

ページの重要な内容が入ってます。<body>の重要コンテンツを表示してサイドバー、探索リンク、制作権情報、検索フォームなど色んな文書に反復されるコンテンツは含まれてはいけません。
文書には hidden 属性が指定されていない<main>要素を2つ以上置くことはできません。

aside

サイドバーなどメインコンテンツと間接的に関連するコンテンツを含みます。主にサイドバーやコールアウトボックスで表現されます。

例えば、MDNのasideページでは下記みたいに区分してます。

section

ページのコンテンツを一定単位の分割するために使います。より小さい単位のコンテナは<div>を使います。

article

ページ内で再使用できる、またはページから独立した他のページでも使用できるコンテンツに使用されます。記事やブログやポストやコメントなどに使われます。

まとめ

HTMLの様々な要素に意味を付与するために、セマンティックタグをおすすめします。<header>、<nav>、<footer>、<main>、<aside>、<section>、<article>というタグは単純なタグではんく、作成コンテンツについても説明できるからです。
セマンティックタグはWEBアクセシビリティを向上向上させ、WEBサイトのSEOを強化し、裏で作業する開発者から、コンテンツを世界に表示するブラウザや検索エンジンまで、HTMLを読みやすくしてくれます。
セマンティックタグを使用することは一般的に推奨されてますが、正しい実装をための学習に時間がかかります。それとこのような要素を昔のブラウザは理解できないかもしれないので、互換性を考慮して作成しないといけないです。
但し、アクセシビリティと読みやすいということはこれらがもたらすメリットがあると思います。
今回の記事では具体的な説明は書いてなかったです。MDNみたいなメンテナンスされる公式文書を参考する方が良いとおもったからです。それとどのようなタグを使用すれば良いか迷う場合はMDNやW3Cみたいに信頼できるリソースを参考してください。
結論的には、よりアクセスしやすく、ユーザーエクスペリエンスを目指し続けていますが、セマンティックタグはこれらの目標を達成するための基本的なツールになると思います。
ちょっと大変かもしれませんが、セマンティックタグを使用しましょう。
今までの説明が皆さんにも分かりやすく説明できていればと嬉しいです。