HTML5ページ構造の基本

HTML5セマンティック要素の詳細な説明とビルディングページ構造のガイド

コアポイント

• HTML5は、ヘッダー、セクション、記事、NAV、脇、フッター要素などのドキュメント構造の意味を強化するための新しいセマンティック要素を導入します。これらの要素を使用して、ページを分割し、コンテンツの目的を明確にすることができます。
• ヘッダー要素は、ページタイトルに使用されるだけでなく、コンテンツのすべての部分を紹介します。セクション要素は、通常はタイトルを持つコンテンツのサブジェクトグループを表します。記事要素は、ドキュメント内の完全で独立したコンポーネントを表し、独立して存在する可能性があります。
• nav要素は一連のナビゲーションリンクを表し、プライマリナビゲーションのために予約する必要があります。 Adast Elementは、周囲のコンテンツに間接的に関連するページの一部を表し、コンテンツとは別に考えることができます。
• フッター要素は、最新の祖先コンテンツセクションのフッターを表します。通常、著作権情報、関連するリンクリスト、著者情報、およびコンテンツブロックの最後にあると通常考えている同様の情報が含まれています。

（以下は、Alexis Goldstein、Louis Lazaris、Estelle Weylが共著した本「HTML5＆CSS3、第2版」から抜粋しています。この本は世界中の店舗で入手できます。ここでは、電子書籍バージョンを購入できます テンプレートの基本を分解した後、ページにコンテンツを追加して構造を構築しましょう。

この本の後、CSS3機能とその他のHTML5要素の追加を具体的に紹介します。このセクションおよび次の章では、セマンティクスを広範囲に説明します。 「セマンティック」という用語を使用する場合、特定のHTML要素がそのコンテンツの意味を説明する方法を参照します。

HTML5ヘラルドのスクリーンショット（またはオンラインでWebサイトを表示）を振り返ると、次のセクションに分かれていることがわかります。

ロゴとタイトルを備えたヘッダーセクション

ナビゲーションバー

メインコンテンツは3つの列
• に分かれています
列
• の記事と広告ブロック いくつかの著者と著作権情報を含むフッター
ページのこれらのさまざまな部分に適した要素を決定する前に、いくつかのオプションを考えてみましょう。まず、ページを分割し、ドキュメント構造にさらに意味を追加するために使用できる新しいHTML5セマンティック要素をいくつか紹介します。
• ヘッダー要素

当然、最初にヘッダー要素に焦点を当てます。仕様は、「入門援助またはナビゲーションエイズのセット」と簡潔に説明しています。

通常と想定するものに反して、コンテンツの各部分を導入するために新しいヘッダー要素を含めることができます。ページヘッダーに限定されません（通常、タグを付けて<div>を使用できます）。ここで「セクション」という言葉を使用する場合、次のセクションで説明する実際のセクション要素に限定されません。これは、ページにそのようなブロックが複数あることを意味する場合でも、自分のヘッダーを必要とする可能性のあるコンテンツブロックを意味します。ヘッダー要素を使用して、ページの任意の部分に固有の導入コンテンツまたはナビゲーションエイドを含めるか、ページ全体またはその両方に適用することができます。 <p>ヘッダー要素は通常、ページまたはセクションの上部に配置されますが、その定義はその位置とは関係ありません。ウェブサイトのレイアウトでは、記事またはブログ投稿のタイトルが左、右、あるいはどちらの場合も、このコンテンツを説明することができます。 </p> <p><strong>セクション要素</strong></p> <p>次の要素は、HTML5のセクション要素です。仕様は次のようにセクションを定義します：</p> <blockquote> <p>セクション要素は、ドキュメントまたはアプリケーションの共通部分を表します。これに関連して、セクションはコンテンツのトピックグループであり、通常はタイトルがあります。 </p> </blockquote> さらに、セクションは、スタイルまたはスクリプトの目的でのみ汎用コンテナとして使用すべきではないことを説明しています。セクションを汎用コンテナとして使用できない場合（たとえば、必要なCSSレイアウトを実装するため）、何を使用する必要がありますか？私たちの旧友のdiv要素、それは意味的に何も意味しません。 <p> </p>仕様の定義に戻り、セクション要素のコンテンツは「テーマ」である必要があるため、無関係な部分をラップするために一般的な方法で使用することは間違っています。 <p> </p>セクション要素の許容可能な用途の例は次のとおりです。 <p> タブ付きインターフェイスのセクション</p> <ul> <li>たとえば、「About」ページのセクション。 長いサービスページのさまざまなセクション</li> <li>たとえば、オンラインニュースWebサイトの各セクション。 </li> <li>注：セクションを正しく使用します<li> </ul>新しいセマンティックマーカーがWebデザイナーに提供されるたびに、これらの要素の正しい使用、標準の意図などについて説明します。 HTML仕様におけるDL要素の適切な使用に関する以前の議論を覚えているかもしれません。予想どおり、HTML5は、特にセクション要素の観点から、この現象の免疫はありません。非常に尊敬されているHTML5の権威であるブルース・ローソンでさえ、過去にセクションを誤って使用することを認めています。より明確な理解のために、彼の間違いを説明するブルースの記事を読む価値があります。 <p> 要するに<strong>：</strong></p> <ul> <li>セクションは<em> generic</em>です。したがって、より具体的なセマンティック要素が適用される場合（記事、脇、またはnavなど）、代わりにその要素を使用します。 </li> <li>セクション<em>には意味のある意味があります。セクションに入れようとしているすべてを簡潔に説明するためにほんの数つの単語を使用できない場合は、意味的に中立的な容器、つまり目立たないdivが必要になる場合があります。 </em> </li> </ul>それは、セマンティクスのように、場合によっては解釈することができます。別の要素の代わりに指定された要素を使用している理由を説明できると感じたら、先に進んでください。誰かがこれについて本当にあなたを批判している場合、結果として得られる議論はすべての参加者にとって興味深く、有益であり、より広いコミュニティが標準を理解するのを助けるかもしれません。 <p> また、必要に応じて、既存のセクション要素にセクション要素をネストできることを忘れないでください。たとえば、オンラインニュースサイトの場合、世界のニュースセクションは、各主要なグローバル地域のセクションにさらに細分化できます。 </p> <p></p>記事要素<p><strong> </strong>記事要素はセクション要素に似ていますが、いくつかの大きな違いがあります。以下は、仕様の定義です：</p> <p> </p>記事要素は、ドキュメント、ページ、アプリケーション、またはサイトの完全または独立したコンポーネントを表し、原則として、たとえば共同リリースで独立して分散または再利用できます。 <blockquote> <p> この定義のキーワードは、</p>独立したコンポーネント</blockquote>および<p>独立して分布している<em>です。セクションにはトピックごとにグループ化できるものは何でも含めることができますが、記事は独立して存在できる単一のコンテンツでなければなりません。この違いを理解するのは難しい場合があるため、質問がある場合は、共同公開テストを試してみてください。コンテンツを変更せずに別のWebサイトで再投稿できる場合、またはTwitterやFacebookのプッシュなどのソーシャルメディアサイトを介して作成できる場合更新、その後、記事の特性があります。 </em> <em>最終的に、記事を構成するものを決定するのはあなた次第ですが、ここに仕様に準拠するいくつかの提案があります：</em> </p> <p>フォーラムの投稿</p> <ul>雑誌または新聞記事<li> </li>ブログ投稿<li> </li>ユーザーが提出したブログの投稿や記事へのコメント<li> </li> <li>最後に、セクション要素と同様に、記事要素は他の記事要素にネストできます。記事にセクションをネストしたり、その逆も同様です。それはすべてあなたがマークしたいものに依存します。 </li> </ul> <p>nav要素</p> <p> <strong>確かに、NAV要素はほぼすべてのプロジェクトに表示されます。その意味としてのNAVは、ナビゲーションリンクのセットを意味します。 NAVの最も一般的な使用は、ラッピングリンクの順序付けられていないリストですが、他にもオプションがあります。たとえば、ページまたはページセクションのメインナビゲーションリンクを含むテキスト段落にNAV要素を巻くことができます。 </strong> </p>どちらの場合でも、NAV要素は最も重要なナビゲーションのために予約する必要があります。したがって、たとえば、フッターで短いリンクリストにNAVを使用しないようにすることをお勧めします。 <p> </p> <p>注：ナビゲーションリンクをスキップ</p> <p></p> <p>多くのWebサイトで実装されているデザインパターンの1つは、「Skip Navigation」リンクです。目的は、スクリーンリーダーのユーザーが聞いたことがある場合は、Webサイトのメインナビゲーションをすばやくスキップできるようにすることです。結局のところ、新しいページをクリックするたびに大きなWebサイトのナビゲーションメニュー全体を聞く必要はありません。 NAV要素には、このニーズを排除する可能性があります。仕様には次のように述べています。「最初のレンダリングでナビゲーション情報を省略することで利益を得る可能性のあるユーザーのユーザーエージェント、またはスクリーンリーダーなどのナビゲーション情報をすぐに提供することで利益を得ることができます。ページ（またはその両方） すべての補助デバイスがNAVを認識しているわけではありませんが、標準を構築することにより、画面リーダーが改善するにつれてページが時間の経過とともにアクセスしやすくなるようになりました。 </p> <p></p>注：ユーザーエージェント<p> <strong> </strong>仕様を閲覧するときに「ユーザーエージェント」という用語に遭遇することがよくあります。実際、これはブラウザの派手な用語であり、ページのコンテンツにアクセスするためにユーザーが使用するソフトウェア「エージェント」です。仕様が「ブラウザ」と言っているだけではない理由は、ユーザーエージェントにスクリーンリーダーまたはその他の技術的なWebページを読む手段を含めることができるためです。 </p> <p>指定されたページで複数回NAVを使用できます。ウェブサイトのメインナビゲーションバーがある場合は、NAV要素が必要です。さらに、現在のページのさまざまな部分への補助リンクのセットがある場合（ページのアンカーまたは「ローカル」リンクを使用）、これをNAV要素にラップすることもできます。 </p> <p>セクションと同様に、NAVの許容可能な使用を構成するものと、場合によっては推奨されない理由（フッターなど）について議論があります。一部の開発者は、この要素がページングやパンムのリンク、またはWebサイトのメインナビゲーションを構成する検索フォームに適していると考えています（Googleの場合のように）。 </p> <p>この決定は、最終的に開発者であるあなたに依存します。 WhatWGのHTML5仕様のメインエディターであるIan Hicksonは、「class = navを使用した場合はいつでも使用」という質問に直接答えました。 </p> [7] <p> 要素</p> <p> <strong>この要素は、「間接的にADAST要素の周りのコンテンツに関連付けられており、コンテンツとは別のコンテンツと見なすことができる」ページの一部を表しています。 </strong> </p>脇の要素は、間接的に関連するコンテンツパーツをラップするために使用できます。 <p> </p>特定の独立したコンテンツ（記事やセクションなど）。 <p> </p>ページまたはドキュメント全体。これは通常、ページまたはWebサイトにサイドバーを追加するときに行われます。 <ul> <li> </li>脇には、メインコンテンツがあるページパーツをラップするために使用されることはありません。コンテンツは別に独立して存在する可能性がありますが、それはまだより大きな全体の一部であるべきです。 <li> <p>のいくつかの可能な用途には、サイドバー、補助リンクリスト、または広告ブロックが含まれます。また、adase element（ヘッダーのような）は、ページ上のその位置によって定義されていないことにも注意する必要があります。それは横または他の場所にあるかもしれません。コンテンツ自体と他の要素との関係を定義します。 </p> <p><strong>フッターエレメント</strong></p> この章で説明する最後の要素は、フッター要素です。ヘッダーと同様に、単一のページに複数のフッター要素を持つことができ、<p>のような一般的なものではなくフッターを使用する必要があります。仕様とは、フッター要素は、最新の祖先コンテンツセクションのフッターを表します。コンテンツの部分は、ドキュメント全体にすることも、セクション、記事、または脇の要素でもあります。 <code><div> フッターには、通常、関連するリンクリスト、著者情報、およびコンテンツブロックの最後にあると思われる同様の情報が含まれています。ページ、セクションの最後やページの下部に表示する必要はありません。そうなる可能性がありますが、必要ではありません。たとえば、ブログ投稿の著者に関する情報は、以下ではなく記事の上に表示される場合があり、まだフッター情報と見なされます。 <p> </p> <p>注：どうやってこの点に到達したのですか？ <strong></strong> </p> HTML5へのパスと私たちが終わらせるタグについていくつか質問がある場合は、Luke Stevensの本「The Truth on HTML5」をチェックしてください。ルークの本は現在第2版で掲載されており、コンテンツはやや議論の余地があります。ビデオやキャンバスなどの多くのHTML5テクノロジーをカバーすることに加えて、彼はHTML5の歴史を掘り下げ、新しい要素に固有のセマンティクスとアクセシビリティの問題を説明し、それらに対処する方法についていくつかの提案を提供します。 <p> </p> <hr> <p>[7]<sup></sup>https://www.php.cn/link/729db3e07a09db3a41dc1734e04ce44e <a href="https://www.php.cn/link/729db3e07a09db3a41dc1734e04ce44e">を参照してください。 </a> </p> <p>html5ページ構造FAQ（FAQ）<strong></strong> </p> HTML5のステートメントの意味は何ですか？ <h3> </h3>宣言は、HTML5ドキュメントの最初の行です。これは、ページが使用するHTMLのバージョンに関する指示ではありません。 HTML5では、宣言は<p>に簡素化されます。これにより、最新のHTML仕様をサポートするブラウザが標準モードでページをレンダリングすることを保証するのに役立ちます。 <code>

HTML5ドキュメントで要素はどのように機能しますか？

要素は、タグとタグの間にあるメタデータ（データに関するデータ）の容器です。メタデータはページに表示されませんが、マシンで解析できます。通常、ドキュメントタイトル、文字セット、スタイル、スクリプト、およびその他のメタ情報を定義します。 要素の内容には、、<title></title>、<meta>、<link>、<style></style>などの要素を含めることができます。 <base>html5の

要素の機能は何ですか？

要素には、HTMLドキュメントのメインコンテンツまたはWebページに直接表示されるHTMLドキュメントの部分が含まれています。これには、テキスト、画像、テーブル、リンク、フォーム、その他の種類のデータが含まれます。 タグの後にはタグが続きます。

要素はHTML5構造をどのように強化しますか？

html5の

要素は、導入コンテンツまたはナビゲーションリンクのセットを含むために使用されます。いくつかのタイトル要素を含めることができます。また、ロゴ、パーツのラッピング用タイトル、検索フォームなどの他の要素も含めることができます。 <header></header>要素には、通常、1つ以上のタイトルタグ（H1 - H6）、ロゴまたはアイコン、および著者情報が含まれています。 <header></header>

HTML5の

要素の目的は何ですか？ <footer></footer>

HTML5の要素は、ドキュメントまたはパーツのフッターを定義するために使用されます。通常、このセクションの著者に関する情報、著作権情報、関連ドキュメントへのリンクなどが含まれています。 1つのドキュメントに複数の要素を含めることができます。

<footer></footer><footer></footer>要素はどのようにしてHTML5ページ構造を改善しますか？

html5の<nav></nav>要素は、ナビゲーションリンクのセットを定義するために使用されます。ページ上のすべてのリンクグループは、メインナビゲーションリンクブロックにのみ使用される

要素である必要があるわけではありません。ブラウザ（無効なユーザーのスクリーンリーダーなど）は、この要素を使用して、このコンテンツの最初のレンダリングを省略するかどうかを判断できます。

html5の<nav></nav>要素の機能は何ですか？ <nav></nav>

HTML5の

要素は、ドキュメント、ページ、アプリケーション、またはサイトの完全または独立したコンポーネントを表します。これは、フォーラムの投稿、雑誌または新聞記事、ブログ投稿、ユーザーがサビされたコメント、インタラクティブウィジェットまたはウィジェット、またはその他のスタンドアロンコンテンツアイテムです。 <article></article>

要素はどのようにHTML5構造を促進しますか？

HTML5の<article></article>要素は、HTMLドキュメントに含まれる個別の機能部分を表します。これは、通常、

や

などのより具体的なセマンティック要素ではなくタイトルを備えています。これは、通常はタイトルを備えたコンテンツのトピックグループであり、ドキュメント構造を理解しやすくします。

html5の

要素の機能は何ですか？ <section></section> <article></article>html5の<aside></aside>要素は、コンテンツがドキュメントの主要なコンテンツに間接的にのみ関連しているドキュメントの一部を表すために使用されます。脇は通常、サイドバーまたはラベルボックスとして表示されます。

<aside></aside>要素はHTML5構造をどのように強化しますか？

HTML5の<aside></aside>要素は、ドキュメントの主なコンテンツを表します

。メインコンテンツ領域は、ドキュメントの中心的なトピックに直接関連する、または中心的なトピックを拡張するアプリケーションのコンテンツまたは中央関数で構成されています。ドキュメント固有である必要があり、一連のドキュメント（サイトナビゲーションリンク、ヘッダー、フッター情報など）に重複したコンテンツを含める必要はありません。