headers、section、nav、article などの HTML5 セマンティック タグを使用する理由; 単に div を使用して、それを優先される css に設定するのではなく?
ページを作成してこれらのタグを使用しましたが、div と何ら変わりません。彼らの主な目的は何ですか?
使用時に適切なラベル名を提供するだけですか、それとも何か他のことをしますか?
説明してください。多くのウェブサイトをチェックしましたが、これらの基本的なものが見つかりませんでした。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
HTML5 セマンティクスに関する優れた記事がHTML5Doctorにあります。
セマンティクスは常に HTML の一部であり、何らかの形式で存在します。ページ上で何が起こっているかを理解するのに役立ちます。
昔は、ほとんどすべてがを使用していましたが、それでも「セマンティックな」クラス名または ID 名を与えることでセマンティクスを実現していました。
いいねを押す+0
返信を追加
P粉806834059
これらのタグは、レイアウトを正しく構造化し、理解するのに役立ちます。
これを行う場合:
リーリー ＃＃＃そして＃＃＃ リーリー ＃＃＃＃＃＃または＃＃＃＃＃＃ リーリー ＃＃＃そして＃＃＃ リーリーに問題はありませんが、後者の方が、クローラー、リーダーなどにとって読みやすくなります。
オックスフォード辞書には次のように記載されています:
その名前が示すように、これらのタグは Web ページの意味を強化するように設計されています。適切なセマンティクスは、ドキュメントの自動処理において重要な役割を果たします。この自動処理は、思っている以上に頻繁に発生します。検索エンジンによってランク付けされたすべての Web サイトは、すべての Web サイトの自動処理から得られます。
(適切にデザインされた) Web ページにアクセスすると、人間の読者として、ページのすべての要素をすぐに (視覚的に) 区別することができ、さらに重要なことにはコンテンツを理解することができます。左上には会社のロゴが表示され、サイトナビゲーションの隣には検索バーと会社に関するテキスト、購入できる製品へのリンク、下部に法的免責事項が表示されます。
ただし、このマシンは愚かなので、次のようなことはできません。 あなたと同じページを見ると、Web クローラーは画像、一連のアンカー タグ、テキスト ノード、入力フィールド、およびリンクのある画像のみを認識します。下部に別のテキスト ノードがあります。 さて、ドキュメントのどの部分がナビゲーション、主要記事、またはそれほど重要ではない脚注になる予定であるかを、ユーザーはどのようにして知ることができるのでしょうか?いくつかの一般的な基準を使用して文書構造を分析することで、特定の要素のヒントを推測できます。 たとえば、内部リンクの
リストは、ある種のページ ナビゲーションである可能性が高く、文書の末尾のテキストは必要なものですが、日常的に閲覧する人にとってはそれほど重要な内容ではありません (法的免責事項)。
要素の代わりに通常の
ここで、