セクション tag_html/css_WEB-ITnose-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

セクション tag_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:47 AM

セクションタグ

section

HTML 仕様: 「セクション要素は、ドキュメントまたはアプリケーションの一般的なセクションを表します。この文脈では、セクションはコンテンツのテーマ別のグループであり、通常は見出しが付いています。」対照的に、簡単に言うと、セクションはセマンティクスを備えた div ですが、実際にはそれほど単純であるとは考えません。セクションは、通常はタイトルが付いた話題のコンテンツを表します。これを見ると、ブログ投稿や個別のコメントではセクションを使用するだけでよいのではないかと思うかもしれません。続きを読む:

「要素の内容をシンジケートすることが合理的である場合、作成者は、section 要素の代わりにarticle 要素を使用することをお勧めします。」

要素の内容がより意味のあるものとして集約される場合、article 要素を使用する必要があります。 .セクションを置き換えます。

では、セクションはいつ使用する必要がありますか?続きを読む:

「セクションの例としては、章、タブ付きダイアログボックス内のさまざまなタブ付きページ、または論文の番号付きセクションなどがあります。Web サイトのホームページは、紹介、ニュース項目、連絡先のセクションに分割できます。セクションの一般的な適用シナリオには、記事の章、タブダイアログボックスのタブ、または論文の番号付きセクションが含まれます。 Web サイトのホームページは、紹介、ニュース、連絡先情報などのセクションに分けることができます。実際、私はここで伝えられる情報に非常に興味を持っています。なぜなら、以下で紹介するセクションと記事の方がモジュール型アプリケーションに適していると思うからです。このトピックについては、将来特別な記事で説明する予定なので、ここでは省略します。今のところ。

W3C も次のように警告していることに注意してください。

「section 要素は汎用のコンテナ要素ではありません。スタイル設定の目的またはスクリプト作成の便宜のために要素が必要な場合、作成者は代わりに div 要素を使用することが推奨されます。」それは、section 要素が適切なのは、その要素の内容がドキュメントのアウトラインに明示的にリストされる場合にのみであるということです。」

section は、単なる通常のコンテナタグではありません。タグがスタイル設定のみを目的とした場合、またはスクリプト作成を容易にするための場合は、div を使用する必要があります。一般に、要素のコンテンツがドキュメントのアウトラインに明示的に表示される場合、セクションは適切です。

<article><hgroup> <h1 id="Apples">Apples</h1> <h2 id="Tasty-delicious-fruit">Tasty, delicious fruit!</h2></hgroup><p>The apple is the pomaceous fruit of the apple tree.</p><section> <h1 id="Red-Delicious">Red Delicious</h1> <p>These bright red apples are the most common found in many supermarkets.</p></section><section> <h1 id="Granny-Smith">Granny Smith</h1> <p>These juicy, green apples make a great filling for apple pies.</p></section>

HTML5 の div セクション記事の違い

セクション要素は、ドキュメントまたはプログラム内の通常のセクションを記述します。一般的に、セクションには head と content コンテンツブロックが含まれます。セクションは、セクション、またはタブページのタブの下にあるボックスブロックとして表すことができます。ページは、紹介、ニュース項目、連絡先情報をそれぞれ表す複数のセクションに分割できます。

要素の内容をまとめて表示して対応する意味を表現できる場合にはarticle要素として定義することができ、section要素を使用する必要はありません。

セクション要素は一般的なコンテナ要素ではないため、要素で対応するスタイルまたはスクリプトを定義する必要がある場合は、セクションを使用する条件として、この要素のコンテンツを確実に定義できるようにする必要があります。文書の概要に明確に表示されます。

次のコード例は、Apple Web サイトのページの一部からのものです。コードには 2 つの短いセクションが含まれています:

<article><hgroup>    <h1 id="Apples">Apples</h1>    <h2 id="Tasty-delicious-fruit">Tasty, delicious fruit!</h2></hgroup><p>The apple is the pomaceous fruit of the apple tree.</p><section>    <h1 id="Red-Delicious">Red Delicious</h1>    <p>These bright red apples are the most common found in many supermarkets.</p></section><section>    <h1 id="Granny-Smith">Granny Smith</h1>    <p>These juicy, green apples make a great filling for apple pies.</p></section></article>

セクションがトップレベルであるか 2 番目であるかに関係なく、セクション内で h1 要素を使用できることがわかります。 -level レベルまたは三次要素。

次のコードは卒業式ページであり、2 つのセクションが含まれています。1 つは卒業予定者のリストを表示するもの、もう 1 つは卒業式の形式を表示するものです。

   <!DOCTYPE Html>   <html>   <head>    <title>Graduation Ceremony Summer 2022</title>   </head>   <body>    <h1 id="Graduation">Graduation</h1>    <section>        <h1 id="Ceremony">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 id="Graduates">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>

2022年夏卒業式

卒業式

式典

開会式

Validatorianによるスピーチ

学級委員長の式辞

卒業証書授与

校長による閉会の辞

卒業生

モリー・カーペンター

アナスタシア・ルッチョ

エベネザー・マッコイ

カリン・マーフィー

トーマス・レイス

Susan Rodriguez

HTML5 学習ノートの簡潔版 (2) : 新しい要素セクション、記事、余談

セクションの主な機能は、そのネストを通じて見出しのコンテキストを変更することであり、主に章とその下位関係などのディレクトリ構造を表すために使用されます。

HTML5のセクション記事の違いは何ですか?ヘッダーフッターナビゲーションを理解するにはどうすればよいですか?

HTML 標準は次のように記述されます:

セクション要素は、ドキュメントまたはアプリケーションの一般的なセクションを表します。この文脈では、セクションは、通常は見出しを持つコンテンツのテーマ別グループです。

セクションの例は次のとおりです。章、タブ付きダイアログボックス内のさまざまなタブ付きページ、または論文の番号付きセクションなど、Web サイトのホームページは、紹介文、ニュース項目、連絡先情報のセクションに分割できます。

注: 要素のコンテンツをシンジケートすることが合理的である場合、作成者は、セクション要素の代わりに記事要素を使用することをお勧めします。

注: 要素が必要な場合にのみ、セクション要素は汎用コンテナ要素ではありません。スタイル設定の目的またはスクリプト作成の利便性のために、作成者は代わりに div 要素を使用することをお勧めします。一般的なルールとして、要素の内容がドキュメントのアウトラインに明示的にリストされる場合にのみ、section 要素が適切です。

意訳は次のとおりです。以下の通り (【】内は私の注釈):

section 要素は、ドキュメントまたはアプリケーションのセクションを表します。「セクション」とは、トピックごとにグループ化されたコンテンツの領域を意味し、通常はタイトルが付いています。 [つまり、各セクションは異なるトピックに対応します。他人が設定した分割基準ではなく、コンテンツ自体のテーマに注意してください。】

セクションの例には、本の章、マルチタブダイアログボックスの各タブページ、論文の番号付きセクションなどがあります。 Web サイトのトップページは、紹介、最新コンテンツ、連絡先情報などのセクションに分かれている場合があります。

注: Web ページの作成者は、コンテンツがシンジケートに使用される場合、セクション要素ではなく記事を使用する必要があります。 [たとえば、ブログのホームページ上のすべてのブログ。別の例は、フォーラム投稿の 1 階、2 階、3 階...n 階です。通常、このコンテンツの各部分は形式は似ていますが、ソースからは独立しています。】

注: セクションはユニバーサルコンテナ要素ではありません。スタイル設定またはスクリプト作成のみに使用する場合は、div 要素を使用します。簡単な経験則として、セクション要素は、要素のコンテンツがドキュメントのアウトラインにリストされる場合にのみ使用してください。

HTML5 セクションをどのように理解していますか?どのようなシナリオで使用されますか?これらのシナリオでは div ではなくセクションを使用するのはなぜですか?

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

HTMLの役割：Webコンテンツの構造Apr 11, 2025 am 12:12 AM

HTMLの役割は、タグと属性を使用してWebページの構造とコンテンツを定義することです。 1。HTMLは、読みやすく理解しやすいようなタグを介してコンテンツを整理します。 2。アクセシビリティとSEOを強化するには、セマンティックタグなどを使用します。 3. HTMLコードの最適化により、Webページの読み込み速度とユーザーエクスペリエンスが向上する可能性があります。

HTMLとコード：用語を詳しく見るApr 10, 2025 am 09:28 AM

htmlisaspecifictypeofcodefocuseduructuringwebcontent

HTML、CSS、およびJavaScript：Web開発者に不可欠なツールApr 09, 2025 am 12:12 AM

HTML、CSS、およびJavaScriptは、Web開発の3つの柱です。 1。HTMLは、Webページ構造を定義し、などなどのタグを使用します。2。CSSは、色、フォントサイズなどのセレクターと属性を使用してWebページスタイルを制御します。

HTML、CSS、およびJavaScriptの役割：コアの責任Apr 08, 2025 pm 07:05 PM

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

HTMLは初心者のために簡単に学ぶことができますか？Apr 07, 2025 am 12:11 AM

HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。

HTMLでの開始タグの例は何ですか？Apr 06, 2025 am 12:04 AM

Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。