HTMLセマンティクスは決まり文句のようです。 Googleにはセマンティクスに関する多くの記事があります。なぜセマンティクスタグ?これは私が思うことだと思います。HTMLの各タグには特定の意味があり、セマンティクスは、適切なタグを適切な場所で使用して、人やマシンをより良くすることができます(マシンは検索エンジンとしてブラウザを理解できると理解できます)。私の説明が十分に明確でない場合は、Googleにしてください。
適切な場所で適切なラベルを使用する方法は?これは単純な理解ロジックです。たとえば、H1〜H6タグはタイトルクラスに使用されます。 ULは、順序付けられていないリストに使用されます。 OLは、記入リストに使用されます。 DLはリストの定義に使用されます。 EM、強力なタグは強調するために使用されます...それを率直に言うために、HTMLタグの各英語の定義がそのセマンティクスを決定します(この記事の後半では、参照のために一般的に使用されるHTMLタグの英語の定義の比較表を掲載します)。
人や機械が一目で見ることができることは何ですか?HTMLページがセマンティックであるかどうかを確認する最良の方法は、ページのCSSリンクを削除して、Webページ構造が整然としているかどうか、ページがまだ読み取られているかどうかを確認することです。なぜ私はそれを言うことができるのですか?ブラウザにはデフォルトのスタイルがあることを誰もが知っています(ChromeプラグインまたはFirefox Web開発者プラグインにChrome Web開発者ツールを使用することをお勧めします)。たとえば、H1〜H6には、デフォルトスタイルの太字/フォントサイズの削減と上限と下のマージンがあります。 UL、OL、およびDLにはすべてデフォルトの弾丸があり、Strongにはデフォルトで大胆なスタイルがあります...したがって、同じページでは、ページCSSが削除されたときに、よくセマンチックなHTMLがうまく機能することがあります。
もう1つのポイントは、優れたセマンティックエンコーディングが検索エンジンよりも優れていることです。検索スパイダーはCSSを認識しませんが、HTMLタグを認識できます。
簡単な例を次に示します。コードをコピーします