セマンティックHTMLを使う理由

今日の業界を担当するWeb Standardsの重要な原則は、HTML要素をデフォルトでブラウザに表示する方法ではなく、HTML要素を使用するという考えです。 これは、セマンティックHTMLを使用することとして知られています。

セマンティックHTMLとは

セマンティックHTMLまたはセマンティックマークアップは、単にプレゼンテーションではなくウェブページに意味を導入するHTMLです。 たとえば、

タグは、囲まれたテキストが段落であることを示します。

これは、セマンティックとプレゼンテーションの両方です。なぜなら、人々はパラグラフが何であるかを知っており、ブラウザーはそれらを表示する方法を知っているからです。

この式の裏側では、やのようなタグは、テキストの表示方法（太字または斜体）のみを定義し、マークアップには何の意味も持たないため、セマンティックではありません。

意味的HTMLタグの例には、ヘッダータグ

〜

、
、、およびがあります。 標準に準拠したWebサイトを構築する際に使用できる、より多くのセマンティックHTMLタグがあります。

セマンティクスについて気にするべき理由

意味論的HTMLを書くことの利点は、どのWebページの目標であるべきか、つまりコミュニケーションしたいという欲求から生まれます。 セマンティックタグをドキュメントに追加すると、そのドキュメントに関する追加情報が提供され、コミュニケーションに役立ちます。 具体的には、セマンティックタグは、ページとコンテンツの意味をブラウザに明確にします。

その明快さは検索エンジンともやりとりされ、適切なページが適切なクエリに配信されるようにします。

セマンティックHTMLタグは、ページ上の見た目を超えたタグの内容に関する情報を提供します。 タグで囲まれたテキストは、ブラウザによって、ある種のコーディング言語としてすぐに認識されます。

そのコードをレンダリングしようとするのではなく、ブラウザは、ある種の記事やオンラインチュートリアルの目的のために、そのテキストをコードの例として使用していることを理解しています。

セマンティックタグを使用すると、コンテンツのスタイルを設定するためのフックがさらに多くなります。 今日では、コードサンプルをデフォルトのブラウザスタイルで表示することをお勧めしますが、明日は灰色の背景色で呼び出すことにし、後で正確なモノスペースのフォントファミリまたはフォントスタックを定義する必要がありますあなたのサンプル。 セマンティックマークアップとスマートに適用されたCSSを使用することで、これらのすべてを簡単に行うことができます。

セマンティックタグを正しく使用する

セマンティックタグを使用してプレゼンテーションの目的ではなく意味を伝えたい場合は、一般的な表示プロパティで間違って使用しないように注意する必要があります。 最も一般的に誤用されるセマンティックタグには、次のものがあります。

  • blockquote - 引用符ではないテキストのインデントに
    タグを使用する人がいます。 これは、blockquotesがデフォルトで字下げされているためです。 単に字下げの恩恵を受けるには、テキストがブロッククォートではない場合は、代わりにCSSマージンを使用します。
  • p - 一部のWebエディタは、ページのテキストの実際の段落を定義するのではなく、ページ要素間に余分なスペースを追加するために

    ＆nbsp; （パラグラフに含まれる改行しないスペース）を使用します。 前述の字下げの例のように、余白またはパディングスタイルのプロパティを使用してスペースを追加する必要があります。