HTMLセクションのタグ-htmlチュートリアル-php.cn

次の記事では、HTML セクションのタグの概要を説明します。 HTML タグは、ヘッダー、章、フッターなどのドキュメントのセクションを定義します。タグは、Web ページのコンテンツをセクションとサブセクションに分割します。通常、2 つのフッター、ヘッダー、またはその他の新しいセクションが必要な場合に使用されます。通常、セクションタグは、関連するコンテンツの汎用ブロックをグループ化します。

を使用する主な利点は次のとおりです。タグは、開発者とブラウザーの両方に対してその意味を説明するセマンティック要素であるということです。

セクションタグの注意点

HTML5 の Section タグには開始タグと終了タグの両方が必要です。つまり、

……..

タグはコンテンツを分岐するために使用されます。つまり、セクションとサブセクションを分散します。
セクションタグに許可されているコンテンツタイプは、フローコンテンツ手段
です。タグは、親としてネストされた
を持つことはできません。要素;その後、同じコンテンツに
を含めることはできません。親としてタグを付けます。コンテンツと明白なコンテンツをセクション化します。
要素は、
の子孫であってはなりません。要素。
各
の子として見出しタグを導入することで視覚化する必要があります。要素。
のコンテンツをシンジケートする必要がある場合は、要素を個別に分割する場合は、
を使用できます。代わりにタグを付けてください。
要素を汎用コンテナとして使用しないでください。これが
です。特にスタイル設定のみを目的としてセクション化が行われる場合に使用します。経験則として、
はタグは論理的にドキュメントのアウトラインに表示される必要があります。
要素はセマンティック要素であるため、文書のセクションに焦点を当てて、人間とユーザーエージェントの両方に、囲まれたコンテンツに関する意味を提供します。これは汎用のセマンティック要素であるため、他のセマンティックコンテナー要素 (article、sides、nav) が適切でない場合に使用する必要があります。

構文:

以下に記載の構文を示します:

HTML/XHTML
```
<body>
<section> ... </section>
<body>
```
ログイン後にコピー
CSS
```
section{
--your css code—
}
```
ログイン後にコピー
HTMLセクションタグの属性

以下に挙げる属性の一部を示します:

1.タグ固有の属性
で使用される特定の属性は存在しません。タグ。

2.グローバル属性

他のすべての HTML タグと同様、
タグは HTML5 のグローバル属性もサポートしています。

以下はグローバル属性です:

中止します

オートコンプリート時

オートコンプリートエラー時

オンブラー

キャンセル

プレイ可能

プレイスルー可能

変更中

クリックしてください

閉じる

コンテキストメニュー上

変更中

ondblclick

オンドラッグ

オンドラジェンド

オンドラジェンター

ondragexit

オンドラグリーブ

オンドラオーバー

オンドラッグスタート

オンドロップ

期間変更中

1 つ空になりました

終了

エラー

オンフォーカス

入力時

無効です

キーダウン時

キーを押すと

オンキーアップ

オンロード

onloadeddata

onloadedmetadata

onloadstart

オンマウスダウン

マウス入力

onmouseleave

マウス移動

マウスアウト

マウスオーバー時

マウスアップ時

オンマウスホイール

一時停止中

プレイ中

プレイ中

進行中

レート変更

リセット時

サイズ変更中

スクロール

求めました

探求中

選択中

上映中

出撃中

インストールされました

送信時

一時停止中

定刻更新

オンにします

ボリューム変更時

待機中

3.イベント属性

で使用できるイベント属性がありません。タグ。

の CSS テキスト書式設定プロパティタグ

以下は CSS テキストの書式設定プロパティです:

文字の色

テキストの配置

文字装飾

テキスト変換

行の高さ

テキスト方向

テキストシャドウ

単語の間隔

の CSS フォントプロパティタグ

以下は CSS フォントのプロパティです:

font-style: normal|italic|oblique|initial|inherit

font-variant: normal|small-caps|initial|inherit

font-weight: normal|bold|bolder|lighter|number|initial|inherit

font-size: medium|xx-small|x-small|small|large|x-large|xx-large|smaller|larger|length|initial|inherit

font-family: family-name|generic-family|initial|inherit

CSS Test Shadow Property for
Tag

Given below is the CSS Test Shadow Property:

<style> address{ text-shadow: 1px 1px #FF0000; } </style>
ログイン後にコピー

Examples of HTML section Tag

Given below are the examples of HTML section Tag:

Example #1

Code:

<!DOCTYPE html> <html> <head> <title>Section tag</title> </head> <body> <section> <h1>eduCBA: Article 1</h1> <p>Content of Article 1</p> </section> <section> <h1>eduCBA: Article 2</h1> <p>Content of Article 2</p> </section> <section> <h1>eduCBA: Article 3</h1> <p>Content of Article 3</p> </section> </body> </html>
ログイン後にコピー

Output:

Example #2

Nested Section Tag.

The
tag can be nested wherein the font size of the subsection is smaller than the section only if both have the same font properties. The subsection is used for organizing complex data.

Code:

<!DOCTYPE html> <html> <head> <title>Section tag</title> </head> <body> <section> <h1>eduCBA: Article 1</h1> <p>Content of Article 1</p> <section> <h1>Subsection</h1> <h1>Subsection</h1> </section> </section> <section> <h1>eduCBA: Article 2</h1> <p>Content of Article 2</p> <section> <h1>Subsection</h1> <h1>Subsection</h1> </section> </section> <section> <h1>eduCBA: Article 3</h1> <p>Content of Article 3</p> <section> <h1>Subsection</h1> <h1>Subsection</h1> </section> </section> </body> </html>
ログイン後にコピー

Output:

Example #3

Code:

<!DOCTYPE html> <html> <head> . . . </head> <body> <header> <h1>HTML Section tag example</h1> </header> <main> <article> An article on HTML Section tag</article> </main> <aside> Body of an article </aside> <footer> <section>Copyright ©2020- EDUCBA.</section> <address> A- 406, Boomerang, Chandivali Farm Road, Yadav Nagar, Chandivali, Powai, Maharashtra, Mumbai - 400072. </address> </footer> </body> </html>
ログイン後にコピー

Output:

Example #4

Code:

<!DOCTYPE> <html> <head> <style&gt section{ border:1px solid pink; padding:15px; margin:10px; } </style> </head> <body> <h2> List of Articles</h2> <section> <h3>Article 1 heading</h3> <p> Body of article </p> </section> <section> <h3>Article 2 heading</h3> <p> Body of article </p> </section> <section> <h3>Article 3 heading</h3> <p> Body of article </p> </section> </body> </html>
ログイン後にコピー

Output:

Example #5

While creating a
tag in HTML5, we can use either the class or id attributes wherein each id should be unique, and the class can be used multiple times when necessary.

The section should always have a header element (H1 to H6). If a title cannot be given for the section, we can use the
element, which will probably be more appropriate, and always never use the
tag just for putting styles.

Code:

<!DOCTYPE> <html> <head> <style> section{ border:1px solid pink; padding:15px; margin:10px; } </style> </head> <body> <section id="sectiontag" class="sectionclass"> <h2>HTML Section tag</h2> <p>Random text Random text Random text...</p> </section> <section id="articletag"> <h2>HTML Article tag</h2> <p>Random text Random text Random text...</p> </section> <section id="footertag"> <h2>HTML Footer tag</h2> <p>Random text Random text Random text...</p> </section> </body> </html>
ログイン後にコピー

Output:

Conclusion

The
element is a structural HTML element that groups all the related elements. Each
usually includes one or more heading elements and additional elements presenting related content.
is a new HTML5 element used to define an important document section. It is better to use it within articles, to define navigation, or in the header or footer. If a section of the content deserves its heading, which would be listed in a theoretical or actual table of contents, it should be placed as a
.