[必要性は?] section要素の使い方は? article要素との違いも分かりやすく解説!

2021年2月24日2021年12月10日

section要素について知りたい人

section要素について知りたいな!

この記事は上記のような疑問を解消するものとなっています。

この記事でお話すること

section要素とは?
section要素の使い方
section要素とarticle要素の違いは!?

section要素は文章の論理構造を表すために使用します。

section要素はとても分かりずらい要素の一つです。

そのため、しっかりと理解しないとどのように使用したらいいのか分からないと思います。

また、section要素とarticle要素とどのような点で異なるのか分からないという方も多いです。

そこでこの記事ではsection要素について解説していきます。

気になる方は是非最後まで読んで頂ければと思います。

section要素の評価

頻出度

(3.0)

重要度

(3.0)

総合評価

(3.0)

1.section要素とは?

section要素を利用することでHTML文書内のセクションを表現することができます。

セクションを表現するより意味的に具体的な要素がない場合に使用します。

セクションは章や節や項のように、見出しとそれに関する内容というように階層構造になる範囲を定義する領域になります。

2.section要素の使い方

section要素は範囲を指定したり、区切りを作成したりするためのものです。

それではsection要素の使い方をみていきましょう。

以下のソースコードは記事全体をarticle要素でマークアップしてそれぞれのセクションをsection要素で区切っています。

<!DOCTYPE> 
<html lang="ja"> 
<head> 
<meta charset="UTF-8"> 
<title>article要素とは?</title> 
<link rel="stylesheet" href="style.css"> 
</head> 
<body> 
<h1>記事一覧</h1>
<article>
<h2>記事大見出し</h2>
<section>
<h3>記事小見出し</h3>
<p>本文</p>
</section>
<section>
<h3>記事小見出し</h3>
<p>本文</p>
</section>
</article>
</body> 
</html>

使用時の注意点

それぞれの <section> は識別可能であるべき、特に <section> の子要素に見出し (<h1>-<h6> 要素) を含めましょう
<section> 要素の内容が単独で配信して意味がある場合、代わりに <article> 要素を使用してください
<section> 要素を単なる汎用コンテナーとして使用しないでください。このような場合、特にスタイル付けのみの目的で区切るのは <div> の役割です。大まかに言えば、 section は文書のアウトラインに論理的に現れるものに使用してください