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 は、ブログ エントリや新聞記事などの独立したドキュメント コンテンツを表し、
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 によって提供される
<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) に注意してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
