HTMLセクションのタグ

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

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

セクションタグの注意点

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

……..

• タグはコンテンツを分岐するために使用されます。つまり、セクションとサブセクションを分散します。
• セクション タグに許可されているコンテンツ タイプは、フロー コンテンツ手段
  です。タグは、親としてネストされた

  を持つことはできません。要素;その後、同じ コンテンツに

  を含めることはできません。親としてタグを付けます。コンテンツと明白なコンテンツをセクション化します。
• 要素は、
  の子孫であってはなりません。要素。
• 各
  の子として見出しタグを導入することで視覚化する必要があります。要素。
• のコンテンツをシンジケートする必要がある場合は、要素を個別に分割する場合は、
  を使用できます。代わりにタグを付けてください。
• 要素を汎用コンテナとして使用しないでください。これが
  です。特にスタイル設定のみを目的としてセクション化が行われる場合に使用します。経験則として、

  はタグは論理的にドキュメントのアウトラインに表示される必要があります。

  要素はセマンティック要素であるため、文書のセクションに焦点を当てて、人間とユーザーエージェントの両方に、囲まれたコンテンツに関する意味を提供します。これは汎用のセマンティック要素であるため、他のセマンティック コンテナー要素 (article、sides、nav) が適切でない場合に使用する必要があります。

  構文:

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

  HTML/XHTML

  <section> ... </section>
  

  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:

  
  
  <title>Section tag</title>
  
  
  <section>
  <h1 id="eduCBA-Article">eduCBA: Article 1</h1>
  <p>Content of Article 1</p>
  </section>
  <section>
  <h1 id="eduCBA-Article">eduCBA: Article 2</h1>
  <p>Content of Article 2</p>
  </section>
  <section>
  <h1 id="eduCBA-Article">eduCBA: Article 3</h1>
  <p>Content of Article 3</p>
  </section>
  
  

  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:

  
  
  <title>Section tag</title>
  
  
  <section>
  <h1 id="eduCBA-Article">eduCBA: Article 1</h1>
  <p>Content of Article 1</p>
  <section>
  <h1 id="Subsection">Subsection</h1>
  <h1 id="Subsection">Subsection</h1>
  </section>
  </section>
  <section>
  <h1 id="eduCBA-Article">eduCBA: Article 2</h1>
  <p>Content of Article 2</p>
  <section>
  <h1 id="Subsection">Subsection</h1>
  <h1 id="Subsection">Subsection</h1>
  </section>
  </section>
  <section>
  <h1 id="eduCBA-Article">eduCBA: Article 3</h1>
  <p>Content of Article 3</p>
  <section>
  <h1 id="Subsection">Subsection</h1>
  <h1 id="Subsection">Subsection</h1>
  </section>
  </section>
  
  

  Output:

  

  Example #3

  Code:

  
   . . . 
  
  <header>
  <h1 id="HTML-Section-tag-example">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>
  
  

  Output:

  

  Example #4

  Code:

  
  
  <style section border:1px solid pink padding:15px margin:10px>
  
  <body>
  <h2> List of Articles
  <section>
  <h3>Article 1 heading
  <p> Body of article 
  </style>

  Article 2 heading

  Body of article

  Article 3 heading

  Body of article

  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:

  
  
  <style>
  section{
  border:1px solid pink;
  padding:15px;
  margin:10px;
  }
  </style>
  
  
  <section id="sectiontag" class="sectionclass">
  <h2 id="HTML-Section-tag">HTML Section tag</h2>
  <p>Random text Random text Random text...</p>
  </section>
  <section id="articletag">
  <h2 id="HTML-Article-tag">HTML Article tag</h2>
  <p>Random text Random text Random text...</p>
  </section>
  <section id="footertag">
  <h2 id="HTML-Footer-tag">HTML Footer tag</h2>
  <p>Random text Random text Random text...</p>
  </section>
  
  

  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

  .

以上がHTMLセクションのタグの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。