HTML スキル: コードを意味論化する _HTML/Xhtml_Web ページの制作

HTML のセマンティクスはよくある問題のようです。Google で検索すると、セマンティクスに関する記事がたくさんあります。なぜ私はこのように考えるのでしょうか。HTML の各タグには、それぞれ固有の意味があります。私たちは、人間と機械の両方をよりよく理解するために、適切な場所に適切なタグを使用しています (機械はブラウザとして理解でき、検索エンジンとしても理解できます)。私の説明が十分に明確でない場合は、Google で調べてください。

適切な場所で適切なタグを使用する方法は?

これは簡単な理解のロジックです。たとえば、h1 〜 h6 タグは順序なしリストです。塗りつぶされたリストに使用され、dl はリストの定義に使用され、em、強力なタグは強調に使用されます... 率直に言うと、HTML タグのそれぞれの英語の解釈によってそのセマンティクスが決まります (この記事の後半で比較表を載せます)
人間と機械の両方にとって明らかなのは、HTML ページがセマンティックであるかどうかを確認する最良の方法は、Css
リンクを使用して、Web ページの構造が適切であり、ページがまだ非常に読みやすいかどうかを確認してください。ブラウザにはデフォルトのスタイルがあることは誰もが知っています (Chrome を使用することをお勧めします)。 Web Developer Tools for Chrome
プラグイン、または Firefox の Web Developer プラグイン) (h1~h6 など) は太字になります。フォント サイズは順次減少し、上下のマージン、ul、ol、dl のデフォルト スタイルにはすべてデフォルトの箇条書きがあり、strong にはデフォルトで太字のスタイルが付いています。したがって、同じページ上で、適切なセマンティクスを持つ HTML を作成できます。 ページから削除されました。 もう 1 つのポイントは、優れたセマンティック コーディングは検索エンジンにとってよりフレンドリーです。ただし、 以下の Html タグは認識できます。は簡単な例です:




コードをコピーします

コードは次のとおりです。