ホームページ > 記事 > ウェブフロントエンド > HTML5 学習ノート簡潔版 (2): 新しい要素セクション、記事、余談
HTML5 学習ノート簡潔版 (2): 新しい要素セクション、記事、余談
- 黄舟オリジナル
- 2017-01-21 16:30:221867ブラウズ
section
セクション要素は、ドキュメントまたはプログラム内の共通のセクションを記述します。一般的に、セクションにはヘッドとコンテンツのコンテンツ ブロックが含まれます。セクションは、セクション、またはタブ ページのタブの下にあるボックス ブロックとして表すことができます。ページは、紹介、ニュース項目、連絡先情報をそれぞれ表す複数のセクションに分割できます。
要素の内容をまとめて表示して対応する意味を表現できる場合にはarticle要素として定義することができ、section要素を使用する必要はありません。
セクション要素は一般的なコンテナ要素ではないため、要素で対応するスタイルまたはスクリプトを定義する必要がある場合は、セクションを使用する条件として、この要素のコンテンツを確実に定義できるようにする必要があります。文書のアウトラインに明確に表示されます。
次のコード例は、Apple Web サイトのページの一部からのものです。コードには 2 つの短いセクションが含まれています:
<article>
<hgroup>
<h1>Apples</h1>
<h2>Tasty, delicious fruit!</h2>
</hgroup>
<p>The apple is the pomaceous fruit of the apple tree.</p>
<section>
<h1>Red Delicious</h1>
<p>These bright red apples are the most common found in many supermarkets.</p>
</section>
<section>
<h1>Granny Smith</h1>
<p>These juicy, green apples make a great filling for apple pies.</p>
</section>
</article> ご覧のとおり、セクションがトップレベルかどうかに関係なく、セクション内で h1 要素を使用できます。第 2 レベルまたは第 3 レベルの要素。
次のコードは卒業式ページであり、2 つのセクションが含まれています。1 つは卒業予定者のリストを表示するもの、もう 1 つは卒業式の形式を表示するものです。
<!DOCTYPE Html>
<html>
<head>
<title>Graduation Ceremony Summer 2022</title>
</head>
<body>
<h1>Graduation</h1>
<section>
<h1>Ceremony</h1>
<p>Opening Procession</p>
<p>Speech by Validactorian</p>
<p>Speech by Class President</p>
<p>Presentation of Diplomas</p>
<p>Closing Speech by Headmaster</p>
</section>
<section>
<h1>Graduates</h1>
<ul>
<li>Molly Carpenter</li>
<li>Anastasia Luccio</li>
<li>Ebenezar McCoy</li>
<li>Karrin Murphy</li>
<li>Thomas Raith</li>
<li>Susan Rodriguez</li>
</ul>
</section>
</body>
</html>article
article は、ブログ エントリや新聞記事などの独立したドキュメント コンテンツを表し、23c3de37f2f9ebcb477c4a90aac6fffd タグのコンテンツはドキュメントの残りの部分から独立しています。
article は特別なセクション タグであり、セクションよりも明確なセマンティクスを持ち、関連するコンテンツの独立した完全なブロックを表します。一般に、記事にはタイトル セクション (通常はヘッダー内に含まれます) があり、フッターが含まれる場合もあります。セクションもテーマ別のコンテンツですが、記事自体は構造と内容の点で独立しており、完全です。
記事に記事を埋め込む場合、原則として内側の記事の内容は外側の記事の内容と関連します。たとえば、ブログ投稿では、ユーザーが投稿したコメントを含む記事は、それを含むブログ投稿記事内に非表示にする必要があります。
<article> <a href="http://www.apple.com">Safari 5 released</a><br /> 7 Jun 2010. Just after the announcement of the new iPhone 4 at WWDC, Apple announced the release of Safari 5 for Windows and Mac...... </article>
aside
HTML5 によって提供される 15221ee8cba27fc1d7a26c47a001eb9b 要素タグは、現在のページまたは記事の補助情報部分を表すために使用されます。これには、参照、サイドバー、広告、ナビゲーション要素グループ、および現在のページに関連する情報が含まれます。またはメインコンテンツとは異なるその他の同様のセクション。
現在の仕様によれば、15221ee8cba27fc1d7a26c47a001eb9b 要素は次の 2 つの方法で使用できます。
n はメインコンテンツの補助情報部分として含まれ、そのコンテンツは引用や語彙に関連することができます。現在の記事一覧へ など
n ページまたはサイトのグローバル補助情報部分として 23c3de37f2f9ebcb477c4a90aac6fffd の外で使用されます。最も典型的な形式はサイドバーで、コンテンツはフレンドリ リンク、アフィリエイト ナビゲーション、または広告ユニットなどになります。
次のコード例は、上記の 2 つの使用方法を組み合わせたものです:
<body>
<header>
<h1>My Blog</h1>
</header>
<article>
<h1>My Blog Post</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
<aside>
<!-- Since this aside is contained within an article, a parser
should understand that the content of this aside is directly related
to the article itself. -->
<h1>Glossary</h1>
<dl>
<dt>Lorem</dt>
<dd>ipsum dolor sit amet</dd>
</dl>
</aside>
</article>
<aside>
<!-- This aside is outside of the article. Its content is related
to the page, but not as closely related to the above article -->
<h2>Blogroll</h2>
<ul>
<li><a href="#">My Friend</a></li>
<li><a href="#">My Other Friend</a></li>
<li><a href="#">My Best Friend</a></li>
</ul>
</aside>
</body>上記は、HTML5 学習ノート (2) の簡潔なバージョンです: 新しい要素のセクション、記事、および余談のコンテンツについては、お支払いください。 PHP 中国語 Web サイト (www .php.cn) に注意してください。