2020.10.01
section要素
section
section要素は、ページ内またはアプリケーション内の一般的なセクションを表します。
article要素やaside要素などに該当しないセクションに使用します。
各セクションは、通常子要素として見出し(h1-h6要素)をが含まれている必要があります。
カテゴリー
フローコンテンツ
セクショニングコンテンツ
パルパブルコンテンツ
section属性
固有の属性はありません。
section使用例
section使用例
[html highlight=”10,13″]
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>TOP | tech.pjin.jp</title>
</head>
<body>
<article>
<h1>人物名</h1>
<section>
<h2>概略</h2>
<p>(概略…)</p>
</section>
</article>
</body>
</html>
[/html]
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>TOP | tech.pjin.jp</title>
</head>
<body>
<article>
<h1>人物名</h1>
<section>
<h2>概略</h2>
<p>(概略…)</p>
</section>
</article>
</body>
</html>
[/html]
section使用例
[html highlight=”10,12,19,21,26,27″]
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>アウグストゥス | tech.pjin.jp</title>
</head>
<body>
<article>
<h1>アウグストゥス</h1>
<section>
<h2>生い立ち</h2>
<section>
<h3>幼少期</h3>
<p>紀元前47年には神祇官に任命される</p>
<h3>青年期期</h3>
<p>紀元前44年3月15日にカエサルがマルクス・ユニウス・ブルトゥス、ガイウス・カッシウス・ロンギヌスらに暗殺される。</p>
<h3>老齢期期</h3>
<p>紀元前42年1月1日、元老院はカエサルの神格化を決定、神君ユリウスとなる。</p>
</section>
<h2>業績</h2>
<section>
<h3>最大の功績</h3>
<p>何よりも「内乱の一世紀」に終止符を打ち、「パクス・ロマーナ」を実現したことが最大の功績である。</p>
<h3>文化</h3>
<p>大帝国となったローマの首都を比類なき都にするため、芸術に心血を注いでいった。</p>
</section>
</section>
</article>
</body>
</html>
[/html]
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>アウグストゥス | tech.pjin.jp</title>
</head>
<body>
<article>
<h1>アウグストゥス</h1>
<section>
<h2>生い立ち</h2>
<section>
<h3>幼少期</h3>
<p>紀元前47年には神祇官に任命される</p>
<h3>青年期期</h3>
<p>紀元前44年3月15日にカエサルがマルクス・ユニウス・ブルトゥス、ガイウス・カッシウス・ロンギヌスらに暗殺される。</p>
<h3>老齢期期</h3>
<p>紀元前42年1月1日、元老院はカエサルの神格化を決定、神君ユリウスとなる。</p>
</section>
<h2>業績</h2>
<section>
<h3>最大の功績</h3>
<p>何よりも「内乱の一世紀」に終止符を打ち、「パクス・ロマーナ」を実現したことが最大の功績である。</p>
<h3>文化</h3>
<p>大帝国となったローマの首都を比類なき都にするため、芸術に心血を注いでいった。</p>
</section>
</section>
</article>
</body>
</html>
[/html]