HTML5 のセマンティック タグの概要

HTML5 標準では、ページにセマンティクスを追加するためにいくつかの新しいタグが追加されます。これらのタグには、article、section、nav、side などが含まれます。他のほとんどのタグとは異なり、ブラウザはこれらのタグを解釈およびレンダリングするときに、追加のプレゼンテーション ロジックを追加せずに、通常の p ブロック レベルの要素として扱うだけです。つまり、これらのタグはセマンティクスを追加するためにのみ使用されます。 Web 開発者にとって、これらのタグを使用する実際の意義は、主に検索エンジンの最適化とページの使いやすさ (アクセシビリティ) の向上の 2 点です。

要素の分類に関しては、article、section、nav、side は「セクション化コンテンツ」と呼ばれます

article

article 要素は、ページ上の独立したコンテンツの特定の部分を表すために使用できます。記事 記事、フォーラムへの投稿/コメント、ブログ、インタラクティブ コントロールなど。 Article タグはネストできます。その場合、子のarticle要素は親のarticle要素に論理的に関連付けられている必要があります。たとえば、Web 開発者は、ブログのテキストとコメントを親記事要素として使用し、各コメントを子記事要素として使用できます。

main 要素は、article 要素の中に含めることはできません。main 要素は、ページの主要なコンテンツを意味します。main 要素がある場合、article 要素は、main 要素の子要素として存在します。

section

セクション要素は、ページまたは Web アプリケーションの一部を指します。異なるセクションには、それぞれ異なる「テーマ」または「トーン」が必要です。通常、見出し要素はセクション要素 ( h1 ) の中に配置されます。 -h6) この「テーマ」/「トーン」を定義します。

セクションを p として使用するのは間違いです。ページに表示できるコンテンツを除き、セクションのサブ要素は他の役割 (スタイル、動作、補助タグなど) を引き受けるべきではありません。

nav

nav 要素は主にページ上のナビゲーション リンクを含めるために使用されるため、nav 要素に ul 要素または ol 要素を直接含めるのが非常に一般的です。ただし、nav には ul 要素や ol 要素を含める必要はありません。たとえば、nav 要素には記事の段落 (p タグ) を含めることができ、記事の段落にはいくつかのリンク (a タグ) を含めることができます。

article 要素と同様に、main 要素を nav 要素内に含めることはできません。

aside

aside 要素は通常、ページ上のサイドバーを表すために使用されますが、この要素は意味的に「サイドバー」を表すだけであり、ブラウザーは p ブロックを解析してレンダリングするときにそれを通常のタグとしてのみ扱います。処理する -level 要素。本当にサイドバー効果を実現したい場合、Web 開発者はそれを実現するための独自の CSS を作成する必要があります。

上記の HTML5 のセマンティック タグの紹介は、エディターによって共有されるすべてのコンテンツです。さらに関連するコンテンツについては、PHP 中国語 Web サイト (m.sbmmt.com) に注目してください。