div タグではなく HTML5 セマンティック タグを選択する理由は何ですか?

Question

headers、section、nav、article などの HTML5 セマンティック タグを使用する理由; 単に div を使用して、それを優先される css に設定するのではなく?

ページを作成してこれらのタグを使用しましたが、div と何ら変わりません。彼らの主な目的は何ですか?

使用時に適切なラベル名を提供するだけですか、それとも何か他のことをしますか?

説明してください。多くのウェブサイトをチェックしましたが、これらの基本的なものが見つかりませんでした。

Answer 1

HTML5 セマンティクスに関する優れた記事が HTML5Doctor にあります。

セマンティクスは常に HTML の一部であり、何らかの形式で存在します。ページ上で何が起こっているかを理解するのに役立ちます。

昔は、ほとんどすべてが <div> を使用していましたが、それでも「セマンティックな」クラス名または ID 名を与えることでセマンティクスを実現していました。

これらのタグは、レイアウトを正しく構造化し、理解するのに役立ちます。

これを行う場合:

リーリー ＃＃＃そして＃＃＃ リーリー ＃＃＃＃＃＃または＃＃＃＃＃＃ リーリー ＃＃＃そして＃＃＃ リーリー

に問題はありませんが、後者の方が、クローラー、リーダーなどにとって読みやすくなります。

Answer 2

オックスフォード辞書には次のように記載されています:

その名前が示すように、これらのタグは Web ページの意味を強化するように設計されています。適切なセマンティクスは、ドキュメントの自動処理において重要な役割を果たします。この自動処理は、思っている以上に頻繁に発生します。検索エンジンによってランク付けされたすべての Web サイトは、すべての Web サイトの自動処理から得られます。

(適切にデザインされた) Web ページにアクセスすると、人間の読者として、ページのすべての要素をすぐに (視覚的に) 区別することができ、さらに重要なことにはコンテンツを理解することができます。左上には会社のロゴが表示され、サイトナビゲーションの隣には検索バーと会社に関するテキスト、購入できる製品へのリンク、下部に法的免責事項が表示されます。

ただし、このマシンは愚かなので、次のようなことはできません。 あなたと同じページを見ると、Web クローラーは画像、一連のアンカー タグ、テキスト ノード、入力フィールド、およびリンクのある画像のみを認識します。下部に別のテキスト ノードがあります。 さて、ドキュメントのどの部分がナビゲーション、主要記事、またはそれほど重要ではない脚注になる予定であるかを、ユーザーはどのようにして知ることができるのでしょうか?いくつかの一般的な基準を使用して文書構造を分析することで、特定の要素のヒントを推測できます。 たとえば、内部リンクの

リストは、ある種のページ ナビゲーションである可能性が高く、文書の末尾のテキストは必要なものですが、日常的に閲覧する人にとってはそれほど重要な内容ではありません (法的免責事項)。

ここで、

要素の代わりに通常の

が使用された場合を想像してください。マシンは、この要素の目的をすぐに認識します。 リーリー さて、

タグ内のテキストです。これは明らかにページ上で最も重要な情報です。左側では、テキスト ノード、画像、アンカー ノードはすべて

タグでグループ化されているため、すべて同じグループに属していますが、下部には

要素内にテキストがいくつかあります (これらはまだそのテキストが何を意味するのかはわかりませんが、今ならそれが何らかの細かい文字であると推測できます。）

＃＃＃＃＃＃例＃＃＃：＃＃＃ ユーザー (実際のマークアップを見ずにページを読む人) としては、要素が

タグと

タグのどちらに含まれているかは気にしません。ほとんどのブラウザでは、両方のタブが斜体のテキストとして同じように表示され、周囲のテキストの間で強調表示されている限り、その目的を果たします。 ただし、意味論的な観点から見ると大きな違いがあります:
はイタリック体を意味します。これは、ブラウザーが (イタリック体で) レンダリングするための単なるヒントであり、必ずしもより深い意味情報が含まれているわけではありません。

は強調を意味し、重要な情報を示します。現在、ブラウザは斜体の指示に限定されず、斜体、太字、下線、または異なる色で指示を表示できます。視覚障害のある人のために、スクリーン リーダーは、特定の状況で最適と思われる方法で音声を増幅できます。この重要なメッセージを強調してください。

＃＃＃＃＃＃最終的な考え：＃＃＃＃＃＃ セマンティックタグ付けは終わりではありません。メタデータ、オントロジー、リソース記述言語などもあり、これらは異なる Web ページ間でデータを接続するのにさらに役立ち、新しい知識の作成にも役立ちます。
たとえば、Wikipedia はデータを意味論的に表現するという点でひどい仕事をしています。


https://en.wikipedia.org/wiki/Barack_Obama

https://en.wikipedia.org/wiki/ドナルド_トランプ


https://en.wikipedia.org/wiki/Joe_Biden

これらの 3 人はすべて、ある時点で アメリカ合衆国
の 大統領を務めた
登場人物です。

3 つの記事にはすべて、この情報を表示するサイドバーが含まれており、比較することができます (両方のページを開いて前後に切り替える) が、意味的には説明されていません。 代わりに、Wikipedia がオントロジーを使用して人物を記述する場合: http://dbpedia.org/ontology/person

リーリー

これで、あなた (およびマシン) は、これら 3 つを (動的に生成されたページ上で) 直接比較できるようになり、すべての米国大統領のリストを表示するなど、新しい知識を生み出すこともできます。これは、現在の大統領のように、かなり退屈ですがクールでもあります。世界の指導者は何人いますか、世界の女性指導者は何人いますか、最年少の指導者は誰ですか、指導者のタイプは何種類いますか（大統領/皇帝/女王/独裁者）、最も長く務めているのは誰ですか、何人いますか175cmで茶色い目など。

つまり、優れたセマンティクスは非常に優れています (ただし、実装と維持が技術的に困難です)。