semantic

プログラミングを学ぶ過程で、意味コードが書かれた文章をよく見かけます.しかし「意味のコード」とはいったい何なのか.
意味の辞書の意味は「意味的、意味論的」である.プログラミングで使われる意味も辞書の意味と同じです.コードの破片という意味です.
すなわち,コンピュータがどのように理解するかについてのコードを記述する意味を与える.

semantic Web

    <p style="font-size: 32px; font-weight: 600;">HELLO</p>
    <h1>HELLO</h1>

上の2行のコードは画面にそっくりに見えます.次の画像は、画面に表示される画像をサンプルで作成したコードでキャプチャします.

1番目のHELLOはpラベルを使用した後にcssスタイルを加えてフォントの大きさと厚さを増加させ、2番目のHELLOはh 1ラベルを使用してスタイルを別途変更しなかった.
2つのコードは設計的には同じですが、意味的には非常に違います.
最初のHELLOは、段落を表すpタグを使用するため、検索エンジンはHELLOを通常の段落と見なします.これに対し、2番目のHELLOはタイトルを表すh 1ラベルを使用しているため、検索エンジンはタイトルがHELLOのページと認識する.
これらのプロセスにより、ブラウザ、検索エンジン、開発者は、Webページに含まれるコンテンツの意味を明確にすることができます.意味の明確なコードは、ラベルを盲目的に使用するページよりも、人やコンピュータに高い可読性を持っています.
MDN Semantics-意味表示を使用するメリット

検索エンジンは、ページ検索ランキングに影響を与える重要なキーワードとして意味ラベルを注視する.

視覚障害者ユーザは、スクリーンリーダー上でページを閲覧する際に、有意義な注釈をタグとして使用することができる.

意味のあるコードブロックを探すのは、意味のない、クラス名のある、または途切れないdivを参照するよりもずっと簡単です.

の開発者にラベルに埋め込まれたデータ型を推奨します.

の「命名」(Semantic Naming)には、対応するカスタム要素/コンポーネントの命名(Namimg)が反映されます.

semantic Tag

htmlのタグには,タグの名前だけで内部コンテンツの意味を伝える意味要素と非意味要素がある.
non-semantic
タグ自体に意味のないタグ、例えばdivやspan
semantic
タイトル、nav、aside、section、article、footer、main、グラフィック、および詳細など、ラベルの内容がどのような意味であるかを明確に説明するラベル.

文章を読む

Semantic code: What? Why? How?
コンピュータ要素と検索エンジン