セマンティック XHTML タグの紹介

まず最初に指摘しておきたいのは、人間は視覚的な区分を通じてコンテンツの意味を判断できるが、検索エンジンはコードしか見ないということです。検索エンジンはタグを通じてのみコンテンツの意味を判断できます。以前は検索エンジンにあまり注意を払っていませんでしたが、今では気にし始めています。ページトラフィックの大部分が検索エンジンから来ているからです。ページをできるだけ検索エンジンフレンドリーにするには、タグをできるだけセマンティックにする必要があります。

以前は、Web 開発について表面的な理解しかなく、標準に準拠した優れたページを作成するには、構造とプレゼンテーションを分離し、テーブルやフォントなどのタグを使用しないだけでよいと考えていました。ページ全体で div を使用することについては、CSS が非常に強力なので、問題はないと考えていました。ただし、すべてのタグには独自のセマンティクスがあります。一部のタグのセマンティクスを以下に示します。

div セマンティクス: 除算 (分離)

span セマンティクス: スパン (範囲)

ol セマンティクス: 順序付きリスト

ul セマンティクス: 順序なしリスト (順序なしリスト)

li セマンティクス: リスト項目

…………

タグのセマンティクスとデフォルトのスタイルを無視し、すべてのタグに div を使用すると、CSS を柔軟に使用する限り、実際に視覚効果の高いページを作成できます。しかし、その場合、視覚的な要件は満たされているものの、ページ全体にはまったく意味がなく、検索エンジンはそれを理解できません。覚えておいてください:

構造 (html) がキーであり、スタイル (css) は構造を変更するために使用されます。したがって、まず HTML を決定し、タグを決定してから、適切な CSS を選択する必要があります。

一般的に、すべてのタグにはデフォルトのスタイルがあるため、Web ページタグのセマンティクスが適切かどうかを判断する簡単な方法は、スタイルを削除して、Web ページの構造が適切に整理され、整然としていて、読みやすいかどうかを確認することです。

さらに、h タグについても触れておく価値があります。h タグのセマンティクスはタイトルであり、検索エンジンはこのタグ、特に h1 と h2 に対してより敏感です。意味的に正しいページを作成するには、h タグが完全で、整然としていて、隙間がないようにする必要があります。つまり、h1、h3、h4 を押し下げて h2 を省略するのではなく、h1、h2、h3、h4 をこのように押し下げる必要があります。適切に構造化された Web ページの場合、h タグを使用して Web ページのアウトラインを整理できます。

<<: MySQL InnoDB ReplicaSet の簡単な紹介

>>: Reactのコンポーネント作成方法のまとめ