HTMLの <section> タグ
<section>とは文章を区切るためのHTML要素である。章、節および項がそれぞれsectionに該当する。
構文
HTML要素のタグ名、属性名および属性値は、大文字と小文字のどちらでもよい。section 要素の終了タグは省略できない。
<section>
<!-- flow-content -->
</section>
<SECTION>
<!-- flow-content -->
</SECTION>
sectionとdivの違い
sectionが文章の構造を表すセマンティックな要素であるのに対して、divは汎用的な区切り要素である。そのため、divは単なる視覚上の装飾のために使われることも多い。
div要素はあまりにも汎用的に使われてきたため、HTML5においてsection、articleおよびnav等のセマンティックな要素が造られることになった。
要素 | 説明 |
---|---|
address | 連絡先 |
article | 独立した記事 |
aside | コンテンツとは無関係なもの(広告等) |
div | 意味的ではなく視覚的な区切り |
figure | 図とキャプション |
footer | フッター |
header | ヘッダー |
hgroup | 見出し、サブタイトル及びリード文 |
main | メインコンテンツ |
nav | ナビゲーション |
section | 意味的な区切り |
コンテンツモデル
aside要素の開始タグと終了タグの間にはフロー・コンテンツを含めることができる。具体的には、以下に示す要素である。
- テキスト
<a>
<abbr>
<address>
<article>
<aside>
<audio>
<b>
<bdi>
<bdo>
<blockquote>
<br>
<button>
<canvas>
<cite>
<code>
<data>
<datalist>
<del>
<details>
<dfn>
<div>
<dl>
<em>
<embed>
<fieldset>
<figure>
<footer>
<form>
<h1>
<h2>
<h3>
<h4>
<h5>
<h6>
<header>
<hgroup>
<hr>
<i>
<iframe>
<img>
<input>
<ins>
<kbd>
<label>
<main>
<map>
<mark>
<math>
<menu>
<meter>
<nav>
<noscript>
<object>
<ol>
<output>
<p>
<picture>
<pre>
<progress>
<q>
<ruby>
<s>
<samp>
<script>
<section>
<select>
<small>
<span>
<strong>
<sub>
<sup>
<svg>
<table>
<template>
<textarea>
<time>
<ul>
<var>
<video>
<wbr>
入れ子
section 要素の中に、さらに section 要素を入れることができる。つまり、入れ子にすることができる。
<section>
<h1>深夜特急1 香港・マカオ</h1>
<section>
<h2>第一章 朝の光 発端</h2>
<p>ある朝、目を覚ました時、これはもうぐずぐずしてられない、と思ってしまったのだ。</p>
</section>
<section>
<h2>第二章 黄金宮殿 香港</h2>
<p>インドのデリーからイギリスのロンドンまで乗合いバスで行く、というのが私のささやかな主題だった。</p>
</section>
</section>
属性
section要素にはグローバル属性を指定できる。具体的には、次に示す属性である。
- accesskey
- アクセスキーを指定する。
- autocapitalize
- ユーザーが入力や編集をしたとき、自動的にキャピタライズを行うかどうかを指定する。
autocapitalize属性 値 説明 off 自動的な大文字化を行わない。 on 各文における最初の文字を自動的に大文字にする。 none 自動的な大文字化を行わない。 sentences 各文における最初の文字を自動的に大文字にする。 words 各単語における最初の文字を自動的に大文字にする。 characters すべての文字を自動的に大文字にする。 - class
- CSSのクラスを指定する。空白で区切って、複数のクラスを指定できる。
<section class="container">
- contenteditable
- ユーザによる編集が行えるかどうかを指定する。
contenteditable属性 値 説明 true ユーザによる編集が行える。 false ユーザによる編集が行えない。 - data-*
- カスタムデータ属性を指定する。
- dir
- テキストの方向を指定する。
dir属性 値 説明 ltr 左から右へ記述する。(日本語や英語など) rtol 右から左へ記述する。(アラビア語など) auto ユーザーエージェントに決定される。 - draggable
- 要素がドラッグできるかどうかを指定する。
draggable属性 値 説明 true 要素をドラッグできる。 false 要素をドラッグできない。 - 一意な識別子を指定する。
- lang
- 要素の言語を指定する。
<section lang="ja">
- ondblclick
- 要素がダブルクリックされたときに実行するJavaScriptを指定する。
- style
- CSSのプロパティを指定する。セミコロンで区切って、複数のプロパティを指定できる。
JavaScript
JavaScriptからsection要素へはHTMLElementインタフェースを通じてアクセスできる。
プロパティ | 型 | 説明 |
---|---|---|
dataset | DOMStringMap | section要素のカスタムデータ属性 |
dir | DOMString | section要素のdir属性 |
innerText | DOMString | ノードに描画されるテキスト |
lang | DOMString | section要素のlang属性 |
style | CSSStyleDeclaration | section要素のstyle属性 |
title | DOMString | section要素のtitle属性 |
CSS
- border-right
- 右の境界線の太さ、種類、色を指定するCSSプロパティ
<section style="border-right: medium solid gray"> The quick brown fox jumps over the lazy dog. </section>
The quick brown fox jumps over the lazy dog.
参考文献
Web Hypertext Application Technology Working Group (2023) Sections HTML Living Standard