CSS の HTML タグのセマンティクスについての説明layout_html/css_WEB-ITnose

ここでは多くの初心者を含め、多くの人がフロントエンドの作業を行っています。おそらく、初心者の考えは、たとえそれが Web 標準であっても、レイアウトを作成するときにフォントタグなどを使用しないことです。今日インターネット上で「divs」「ソース ファイルを見てみると、div 以外のタグはありませんでした。

ここで、これは Web 標準とは呼ばれず、「div+css」と呼ばれるものであることを責任を持ってお伝えします。まさに「div+css」。
「div+css」で作ったページはデザイン図の意図を十分に表現しており、どのブラウザでも問題なく対応していると言う人もいるかもしれません。
確かに、作成したページには問題がないようです。ここでは「問題がないようです」と表示されています。これだけです。

人間は視覚的な部門を通じてコン​​テンツの意味を判断できますが、検索エンジンはコードしか認識しません。検索エンジンはタグを通じてのみコンテンツの意味を判断できます。

では、なぜセマンティクスに注意を払う必要があるのでしょうか? ページのトラフィックの大部分は検索エンジンからのものであるため、ページを可能な限り検索エンジンに適したものにするためには、タグを可能な限りセマンティクスにする必要があります。

div タグは、検索エンジン用にコンテンツを分割する役割のみを果たし、このタグ内のコンテンツが何に使用されるかをブラウザーに伝えるものではありません。したがって、ページ全体が div のみでレイアウトされている場合、このページは検索エンジンにとって文ほど重要ではありません。検索エンジンは、ページの焦点が何であるか、リストが何であるか、何が含まれているかを認識しないためです。内容は、などです。

すべてのタグにはセマンティクスがあります。いくつかのタグのセマンティクスを見てみましょう:

div セマンティクス: 分割 (分離)
span セマンティクス: スパン (範囲)
ol セマンティクス: 順序付きリスト (並べ替えられたリスト)
ul セマンティクス: 順序なしリスト (順序なしリスト)
li セマンティクス: リスト項目 (リスト項目)
p セマンティクス: 段落記号 (段落記号)
hx セマンティクス: 見出し語 (タイトル)
…………

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

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

一般的に言えば、すべてのタグにはデフォルトのスタイルがあるため、Web タグのセマンティクスが適切かどうかを判断する簡単な方法は、スタイルを削除して、Web ページの構造が適切に組織化され、秩序立っているかどうかを確認することです。まだ視認性は良好です。

さらに、h タグについて言及する価値があります。h タグの意味は、検索エンジン、特に h1 と h2 に対してより敏感です。適切なセマンティクスを持つページの場合、h タグは隙間なく完全かつ整然としている必要があります。つまり、h1、h3、h4、h2 を見逃すのではなく、このように h1、h2、h3、h4 をプッシュダウンする必要があります。適切に構造化された Web ページの場合、h タグで Web ページの概要を整理できます。 htmlについての理解を深めます。

HTML はとてもシンプルですが、使いこなすのは簡単ではありません。勉強すればするほど面白くなります。

この記事はZeroZからの転載です