HTML 5学習ノート簡明版(2):新要素のsection,article,aside
11593 ワード
section
section要素は、ドキュメントまたはプログラム内の一般的なsectionセクションを描き、一般的に1つのsectionにはheadとcontentコンテンツブロックが含まれています.sectionは、小さなセクション、またはtabページのtabの下のboxブロックとして表すことができる.1つのページには、introduction、news items、contact informationを表す複数のsectionに分割できます.
要素の内容が集約されて表示されると、section要素を使用する必要がなくarticle要素として定義できます.
section要素は一般的なコンテナ要素ではないので、1つの要素が対応するstyleまたはscriptスクリプトを定義する必要がある場合はdiv要素を使用することをお勧めします.sectionの使用条件は、この要素の内容がドキュメントのアウトラインに明確に表示されることを確保することです.
次の例のコードはアップルのウェブサイトのページの一部から来て、コードには2つの短いsectionが含まれています.
<!doctype html>
<title>SVG in text/html
</title>
<p> A green circle:
<svg>
<circle r="50" cx="50" cy="50" fill="green"/>
</svg>
</p>
<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>
このsectionがトップクラスなのか、2級または3級の要素なのかを考慮することなく、sectionでh 1要素を任意に使用できることがわかります.
次のコードは卒業式のページで、2つのsectionが含まれています.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は、sectionよりも明確な意味を持つ特殊なsectionラベルであり、独立した完全な関連コンテンツブロックを表す.一般的にarticleにはタイトル部分(通常headerに含まれる)があり、footerも含まれる場合があります.sectionもテーマ性のあるコンテンツですが、構造的にもコンテンツ的にもarticle自体は独立して完全です.
articleにarticleが埋め込まれている場合、原則として、内部のarticleの内容は外層の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
HTML 5に提供される