セマンティクス要素

最終更新日：2019年3月28日

このブログでは、読者であるハイパーテキストマークアップ言語（HTML）ページのセマンティクス要素の構成要素とタグを紹介します。 それらの定義、それらが何であるか、そしてそれらがWebページまたはHTMLドキュメントで使用されるべき理由を単純化しようと思います。 私たちは、セマンティック要素に関する主要な読者の質問に、美しくエキサイティングな世界に深く入り込むことなく答えることを目指しています。

セマンティックとは何ですか？

簡単に言うと、セマンティックとは、言語における単語やフレーズの意味の研究です。 コンピュータサイエンスでは、セマンティクスという用語は、その形式（構文）ではなく、言語構造の意味を指します。 Web開発とプログラミングの世界では、セマンティクスとはコードの意味を指します。たとえば、「そのHTML要素にはどのような目的または役割がありますか？」 HTMLドキュメントの構造は、表示スタイルに基づくのではなく、表示されるコンテンツを表すようにコーディングする必要があります。 プレゼンテーションとスタイリング（どのように見えるか）は、CSS（カスケードスタイルシート）の唯一の責任です。

セマンティック要素を使用して記述することの利点のいくつかは次のとおりです。

• 検索エンジンは、Webページのコンテンツを、ページの検索ランキングに影響を与える重要なキーワードと見なします。
• スクリーンリーダーは、視覚障害のあるユーザーがページをナビゲートするのに役立つ標識としてセマンティック要素を使用します。
• 意味のあるコードのブロックを見つけることは、セマンティッククラスまたは名前空間クラスの有無にかかわらず、無限の<div>タグを検索するよりもはるかに簡単です。
• 入力されるデータのタイプを開発者に提案します。
• セマンティックネーミングは、適切なカスタム要素/コンポーネントのネーミングを反映しています。

どの要素を使用するかを検討するときは、「入力するコンテンツを最もよく説明/表現している要素はどれですか？」と自問する必要があります。

セマンティクス要素とは何ですか？

HTML要素またはタグは通常、開始タグ<tagname>と終了タグ</ tagname>で構成され、その間にコンテンツが挿入されます。 これに基づいて、簡単な言葉で、意味要素は意味を持つ要素、またはタグ名に等しい。 セマンティック要素またはタグは、ブラウザと開発者の両方にその目的を明確に説明します。

•非セマンティック要素：<div>、<span> –その内容については何も伝えません。

•セマンティクス要素：<p>、<form>、<img>、<table>、<header>、<footer> –その内容を明確に定義します。

HTMLには、およそ100を超えるセマンティック/構造要素があります。 私たちの意見では、最も重要なものはHTML5で導入されました。 これらのセマンティクス要素は、Chrome、Microsoft Edge、Firefox、Safari、Opera、Braveなどの最新のすべてのブラウザーでサポートされています。

HTML5が提供する最も重要なセマンティクス要素またはタグと見なされるものは次のとおりです。

<header> </ header> –この要素は、ドキュメントまたはセクションのヘッダーを指定します。 これは、通常、入門またはナビゲーション支援をグループ化するコンテンツを表します。 <header>タグには、いくつかの見出し要素だけでなく、ロゴ、検索フォーム、作成者名、およびドキュメントコンテンツに関連するその他の要素が含まれる場合があります。 <header>タグは、最初のコンテンツのフォーマットとして使用する必要があり、1つのドキュメントにこの要素のいくつかの追加タイプを含めることができます。

<nav> </ nav> –この要素は一連のナビゲーションリンクを定義します。 これは、現在のドキュメント内または他のドキュメントへのナビゲーションリンクを提供することを目的としたページのセクションを表します。 <nav>は、ナビゲーションリンクの主要なブロックであるメインドキュメントのナビゲーションリンクのみを対象としています。 障害のあるユーザーを対象とするスクリーンリーダーは、<nav>要素を使用して、ナビゲーションのみのコンテンツの初期レンダリングを省略するかどうかを決定できます。

<main> </ main> –この要素は、ドキュメントのメインコンテンツを指定します。 これは、HTMLドキュメントの主要なコンテンツを表します。 主要なコンテンツは、ドキュメントの中心的なトピック、またはアプリケーションの中心的な機能に直接関連するコンテンツで構成されます。 <main>タグ内のコンテンツは、ドキュメントに固有であり、ドキュメント内で唯一のものである必要があります。 <main>要素は、支援技術によって使用され、ドキュメントの主要なコンテンツをすばやく識別してナビゲートできます。

<h1</h1>から<h6></h6> –見出しタグは、6つのレベルのセクション見出しを表します。 はい、<section>または<article>タグにネストできます。 <h1>は最高のセクションレベルで、<h6>は最低のセクションレベルです。 見出し情報は、ユーザーエージェントがドキュメントの目次を自動的に作成するために使用できます。 見出しレベルのスキップを回避するために必要な見出しの適切な使用法は次のとおりです。常に<h1>から開始し、次に<h2>を使用するなどです。 SEOの目的で、1ページに<h1>を複数回使用することは避けてください。

<section> </ section> –この要素は、ドキュメント内のセクションを定義します。 これは、HTMLドキュメント内に含まれていることを表すためのより具体的なセマンティック要素を持たないスタンドアロンセクションを表します。 <section>タグは、コンテンツのテーマ別グループであり、通常、子として<h1>から<h6>の見出し要素があります。 これは、HTMLセクション要素がドキュメントの構造を定義するためです。アウトラインも有用であるために見出しが必要です。 Webページは通常、紹介、コンテンツ、連絡先情報のセクションに分割できます。 <section>要素を汎用コンテナとして使用しないことが重要です。 これは、特にスタイリングのみを目的とする場合の<div>要素の目的です。

<article> </ article> –この要素は、独立した自己完結型のコンテンツを指定します。 これは、HTMLドキュメント内の自己完結型の構成を表します。 独立して配布または再利用できるようにすることを目的としています。たとえば、フォーラムの投稿、雑誌や新聞の記事、ブログのエントリなどです。 <section>タグと同様に、<article>タグは、子要素として見出し（<h1>-<h6>要素）を含めることで識別される必要があります。 <article>要素には、子要素として<header>タグを含めることができ、子要素として<section>タグを含めることもできます。 <article>要素を含む<section>要素と<section>要素を含む<article>要素を含むHTMLページが見つかります。

<aside> </ aside> –この要素は、配置されるコンテンツ以外のコンテンツ（サイドバーなど）を定義します。 これは、コンテンツがドキュメントのメインコンテンツに間接的にのみ関連しているドキュメントの一部を表します。 傍白は、サイドバーまたはコールアウトボックスとして表示されることがよくあります。

<footer> </ footer> –この要素は、HTMLドキュメント全体またはドキュメント内のセクションのフッターを指定します。 フッターには通常、連絡先情報、ソーシャルメディアのリンク、著作権情報、ドキュメントの作成者、利用規約へのリンク、プライバシーポリシーなどが含まれます。

なぜセマンティクス要素なのか？

HTML5以前は、開発者はID /クラス属性名を使用してHTML要素のスタイルを設定していました。たとえば、ヘッダー、フッター、メニュー、ナビゲーション、メイン、コンテナー、コンテンツ、記事、サイドバー、トップナビゲーションなどです。これにより、検索エンジンでの識別が困難になりました。正しいWebページのコンテンツまたはHTMLのアウトライン。 2014年に新しいHTML5セマンティクス要素（<header> <footer> <nav>など）が導入されたことで、これはより簡単になり、より整理されました。

W3Cによると、セマンティックWebは、「アプリケーション、企業、およびコミュニティ間でデータを共有および再利用できるようにします。」

続きを読む

この投稿は、HTML構造と、HTMLドキュメントを制御するさまざまな要素について学習する上で表面をかじっただけです。 セマンティクス要素は、Webの非常に頑丈で重要な部分です。 あなたがそれについてより深く掘り下げることができるいくつかの主要なリソースはにあります

W3Cスクール

Moz：llaMDNWebドキュメント

Arturo Santiago、2019年2月28日