2021/2/18 HTML&CSS辞典をオープンしました! コンテンツは随時更新します!

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 は文書のアウトラインに論理的に現れるものに使用してください




コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です