ドキュメントの部分である身体部分には、訪問者が見ることができるコンテンツが含まれています。従来のHTMLドキュメントは通常、DIV要素を介してドキュメント構造を整理し、適切なスタイルテーブルと組み合わせています。ただし、Div要素の問題は、他のソースコードを表示する場合、どのような手段とページ全体を設定するかを理解する必要があります。特に、HTMLページの組織構造が良くない場合、混乱を引き起こします。この点で、DIV要素を置き換えて、セマンティクスとプレゼンテーションを個別に置き換えるために、多くのセマンティック要素がHTML5に追加されます。
すべてのセマンティック要素には重要な特徴があります。実際には何もしません。外観のコンテンツにほとんど影響を与えず、まったく効果がありません。セマンティック要素の存在にはいくつかの理由があります。
1）変更して保守しやすい。 HTML5のセマンティック要素を介して、追加の構造化された情報を伝えることができます。これにより、ドキュメントの全体的なレイアウトとさまざまなブロックの役割を簡単に理解できます。
2）非実現。最新のWebデザインの重要なテーマは、誰でも障害物なしでWebページにアクセスできるようにすることです。つまり、画面読者やその他の補助ツールを使用する人がページ上で自由にナビゲートできることです。
3）エンジンの最適化を検索します。 HTML5を使用すると、検索エンジンがウェブサイトをよりよく理解し、インデックスページでより多くの情報を収集できるようになります。
4）将来の機能。新しいブラウザとWeb編集ツールは、将来的には間違いなくセマンティック要素を使用します。たとえば、ドキュメントの主要部分が表示されます。
最も重要なことは、セマンティック要素を正しく使用する場合、より明確なページ構造を作成し、将来のブラウザやWebデザインツールの開発動向に適応できることです。以下は、まず組織のドキュメント構造のセマンティック要素を紹介します。例を使用して、HTML5の一般的なドキュメント構造を理解します。
HTML5ドキュメント構造古いHTMLページは、適切なスタイルテーブルと相まってDiv要素を使用しますが、Div要素の問題は、ページに関連する情報を反映していないことです。 HTML5ページは、これらのDIV要素を説明的なセマンティック要素に置き換えることです。次の例には、HTML5で使用される主要なセマンティック要素が含まれています。
<body> <header> <hgroup> <h1>私が好きなこと</h1> <h2> by Adam Freeman </h2> </hgroup> <destord>質問とコメント？ > </address> <vav> <h1> contents </h1> <li> <a href =＃fruitsilike>私は好きです</a> </li> <ul> <li>追加</a> </li> </ul> <li> <a href =＃アクティビティ</a> </li> <li> <li> <li> <li> <li> <li > <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> < li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <ul> <li> <li> <li> <ul > <li> <li> <li> <li> <a href =＃tritypes>トライアスロンの種類</a> </li> <li> <a href =＃mytri>トライアスロンの種類< /a> </li> </ul> </ul> </nav> </header> <メインルーム= main> <artadicle> <header> ...... </header> <assious> <h1 >なぜ健康なのか<li> w callies </li> </ol> << section> <p>私は泳ぎ、走るのが好きですが、それは大変な仕事です/p> <summary>トライアスロンの種類</summary>さまざまな種類のトライアスロン、リンピックなどがあります。 li> <li> 40kmサイクル</li> <li> 10km run </li> </ol> </detail> </section> </article> </main> <nav>詳細：<a href = http：// furt .org>フルーツの詳細</a> <a href = http://triathlon.org>トリスロンの詳細</a> </nav> <foloter id = mainfooter>©2011、Adam Freeman
上記のドキュメントには、プレゼンテーションのさまざまな要素を区別したい場合、この記事には協力する必要があります。
タイトルHTMLは、H1からH1までのタイトルの要素システムを定義し、H1は最高です。同じレベルのタイトルは、通常、コンテンツを1つのテーマの各部分に分割するために使用されます。すべてのレベルのタイトルは、通常、同じテーマのすべての側面を表すために使用されます。彼らは一緒にドキュメントの概要を構成するため、ユーザーはドキュメントのタイトルを閲覧する限り、最初に自分のケアと構造を理解することができ、ユーザーはタイトルシステムを介してコンテンツにすばやくナビゲートできます。
<body> <h1>フルーツ私は好きです</h1> ...... </body>字幕
HGroup要素は全体的な処理として使用できます（HGroup要素を使用しない場合、メインタイトルと字幕を2つのタイトルとして使用し、HGroupを使用した後、タイトルと字幕はタイトルとして扱われます）。 HTMLドキュメントの乱れ。
<body> <hgroup> <h1> fruits私は好きです</h1> <h2>柑橘類を愛することを学んだ</h2> </hgroup> ...... </body> </body> </body >
ここでは、私が柑橘類を愛することを学ぶ方法は、私が好きな果物のサブチットとして存在し、タイトルと字幕は通常スタイターです。
マークページのメインエリア通常、メインコンテンツを表すページの一部のみがメイン要素に配置できます。
<Body> ...... <メインロール= Main> <Artlicle> ...... </article> </main> ...... </body>
ロール=メインは、画面リーダーの位置決めページのメインエリアを支援できます。
記事を作成します記事要素は、HTML要素の独立したコンテンツを表します。記事は、内部の記事と外部の記事が全体的な関係に部分的に関連している限り、別の記事にネストできます。 1つのページには複数の記事要素があり、各記事を個別に形成でき、1つの記事に1つ以上のセクション要素を含めることができます（次のセクションを参照）。
<Body> ...... <メインロール= Main> <Artadicle> <Header> ...... </header> <asser> ... </ass> <ection> ... ... </section> </article> <arttern <Artader> ...... </header> <assed> ...... </ass> <section> .../section> </article>。 .. </main> ...... </body>セクション
セクション要素は、ドキュメント内のセクションを表すために新しく追加されたHTML5です。セクション要素を使用する明確な仕様はありませんが、通常、セクション要素を使用して、ドキュメントの概要またはディレクトリに含める必要があります。セクションは特定の記事に属し、記事には1つ以上のセクションを含めることができます。セクション要素には通常、1つ以上の段落と1つのタイトルが含まれていますが、タイトルは必要ありません。
<body> <hgroup> <h1> fruits </h1> <h2>柑橘類を愛することを学んだ</h2> </hgroup>私はリンゴやオレンジが好きです</h1> 、マンゴー、チェリー、プラム、桃、ブドウ
上記の3つのセクション、ネストされたレイヤー、各セクションのタイトルはH1です。ただし、さまざまなブラウザでは、セクションの階層構造のデフォルトの外観が異なり、この問題はカスタムスタイルを作成することで解決できます。セクションと記事の違いは、セクションがより組織化されており、本質的に構造的であり、独立した段落と見なすことができるのに対し、記事は含まれるコンテナを表すことです。
最初と尾ヘッダー要素は、ヘッダーとロゴを含めることができる最初のセクションを表します。ヘッダー要素には通常、タイトル要素またはhgroup要素が含まれており、このセクションのナビゲーション要素も含めることができます。ページには任意の数のヘッダー要素を含めることができ、その意味はその文脈によって異なる場合があります。
FOOS要素は、通常、セクションの要約情報を含むセクションの尾を表し、著者の紹介、著作権情報、関連コンテンツへのリンク、ロゴ、免除ステートメントを含めることもできます。
<body> <header> <hgroup> <h1>私が好きなこと</h1> <h2> by adam freeman </h2> </hgroup> </header> <seader> <hgroup> <h1> fruits私は< /h1> <h2>私が柑橘類を愛することを学んだ方法</h2> </hgroup> </header> ...... </section> <seader> <h1>私は好きです</h1> </header > ...... <section> <fooler id = mainfooter>©2011、adam freeman
この例は、3つのヘッダー要素を定義しています。ボディ要素のヘッダー要素は、ドキュメント全体の最初のものです。
注：フッター内のヘッダーや別のフッターでネストすることも、ヘッダーまたはアドレス要素にネストすることもできません。
ナビゲーションエリアNAV要素は、ドキュメント内のナビゲーション領域を表します。これには、同じページの他の部分または同じページの他の部分へのリンクが含まれています。すべてのリンクをNAV要素に配置する必要はありません。
<body> <header> <hgroup> <h1>私が好きなもの</h1> <h2> by Adam Freeman </h2> </hgroup> <vav> <h1> intents </h1> <ul> <li> <a href =＃fruitsilike>フルーツ私は好きです</a> </li> <ul> <li> <a href =＃morefruit>追加の果物</a> </li> </ul> <li> < href =＃acivitiesilike>アクティビティ私は好きです</a> </li> <li> <a href =＃tritypes>トライアスロンの種類</a> </li> <li> <a href =＃mytri>トライアスロン私は</a> </li> </ul> </ul> </nav> </header> <ection> ...... </section> <section> ..を目指しています。 。 > </nav> <フッターID = MainFooter> ...... </footer> </body>
ここでは、2つのNAV要素がこのドキュメントのナビゲーション方法を提供し、もう1つはドキュメントの最後に配置され、ユーザーに追加のリンクを提供します。
すべてのリンクをNAVブロックに配置しないように注意してください。通常、NAVはページ内の最大かつ最も重要なナビゲーションエリアでのみ使用する必要があります。たとえば、上記のドキュメントナビゲーションはNAVブロックに配置するために必要ですが、ライセンスと連絡先情報に関する情報のみである場合、NAVブロックに配置する必要はありません。
注釈バーADAST要素は、本または雑誌のサイドバーと同様に、周囲のコンテンツでわずかに染色されたコンテンツを示すために使用されます。メインコンテンツ、関連する記事へのリンクなど。
<body> <header> ...... </header> <artadicle> <header> ...... </header> <assed> <h1>なぜ果物が健康なのか</h1> <section> ar threee youseereone shuldはより多くの果物を食べます：<ol> <li>果物には多くのビタミンが含まれています</li> <li>果物は繊維の源です</li> <li>果物にはほとんどCa lories </li> </ ol> <section> </asside> ...... </article> <footer id = mainfooter> ...... </footer> </body>
印刷された問題でメモバーのような要素を脇に使用したり、それを通して別の関連するトピックを紹介したり、メインドキュメントで提案されている視点を説明したりできます。また、脇の要素を使用して、広告、関連するコンテンツリンクなどを保存することもできます。
連絡先アドレス要素は、ドキュメントまたは記事要素の連絡先情報を表すために使用されます。アドレス要素が記事要素のサブエレメントである場合、それが提供する連絡先情報は、アドレス要素がボディ要素であると見なされます。アドレス要素を使用して、ドキュメントや記事の連絡先情報を超えたアドレスを表すことはできません。など、次のようなものを使用することはできません。
<body> <header> ...... <住所>質問とコメント？</body>詳細エリア
詳細要素はドキュメント内の領域を生成し、ユーザーはテーマの詳細を理解するために開始できます。詳細要素には、通常、詳細領域の説明ラベルまたはタイトルを生成するための要約要素が含まれています。
<body> <header> ...... </header> <artcticle> <header> ...... </header> <ection> <p>私は泳いで走ります私の最初のトライアスロンのトレーニングですが、それは大変な作業です</p> <summary>トライアスロンの種類は、リンピックを目指しています。 ：<ol> <li> 1.5kmの水泳</li> <li> 40kmサイクル</li> <li> 10km run </li> </ol> </section> </</section> </article> </body>
詳細な要素は、クロムの効果が次のとおりです。
詳細な要素は、デフォルトで、その要素のコンテンツのみを見ることができます。
<詳細Open> <summary>トライアスロンの種類< /summary>さまざまな種類のトライアスロン - スプリント、オリンピックなどがあります。 /li> <li> 10km run </li> </ol> </defails>
効果は次のとおりです。
まとめHTML5のセマンティック要素は、既存のWebページの調査に関する発明者に基づいて定義されています。興味がある場合は、ここで表示できます（Googleのサイト、直接表示することはできません）。
現在、HTML5のセマンティック要素はすべての最新のブラウザーでサポートされていますが、一部の古いバージョンのブラウザ（主にIE9のインターネットエクスプローラー）には、いくつかの是正措置が必要です。セマンティック要素自体は何もしないため、ブラウザがそれらを通常のDIV要素として扱うことが許可されている限り、これらのWebページがすべてを追加することです問題があります。幸いなことに、これらの仕事はあなたがそれを達成するのに役立ちました。