- HOME
- > BLOG CATEGORY
- 【HTML】sectionタグの正しい使い方を分かりやすく解説!

- お知らせ
- NEW 2023.06.01 【CSS】画像の透過について、mix-blend-modeを使ってみよう
- お知らせ
- 2023.05.18 【WordPress】各ページ背景画像の指定についてbody_classを解説
- お知らせ
- 2023.05.11 【WordPress】CPT UI インポート/エクスポート機能について解説
こんな方に読んでほしい
section
の使い方について学びたい方へ上の図のように、section
は文章中の章や節といったまとまりを示すために使用します。
sectionタグを使用する際にはいくつかのルールがあります、次の章で解説していきます。
[記事の内容]
基本的な記述方法としてはsection
タグは章や節といったまとまりを示すために使用します。
むやみにsectionの使い回し、置き換えはに注意してください。
よくdiv
タグの置き換えでsection
タグに
変換してるのを見受けられますが、
場合によってはそれはNGになります。
ポイント01
sectionタグを使用する際には必ずh1~h6といった見出しタグを挿入しましょう!
NGの使用例
<section><!--↓見出しタグなし-->
<p>テキスト</p>
<p>テキスト</p>
</section>
<section><!--↓見出しタグなし-->
<p>テキスト</p>
<p>テキスト</p>
</section>
pタグは段落を指定するタグのためsectionタグで囲むのは避けておきましょう。
pタグのみでしたらdivタグで囲いましょう。
OKの使用例
<section><!--↓見出しタグあり-->
<h2>見出し01</h2>
<p>テキスト</p>
</section>
<section><!--↓見出しタグあり-->
<h2>見出し01</h2>
<p>テキスト</p>
</section>
section
タグは「見出しと文章」を
ひとつのセットとして覚えておきましょう。
section要素は一般的なコンテナ要素ではありません。
CSSによるスタイルの適用やJavaScriptでの操作のみを目的にするのは、正しい使用方法では
ありません。
ポイント02
レイアウトの目的では使用せず、CSSやJavaScriptを適応させる際には「div」タグを使用しましょう!
NGの使用例
<section class="area">
<section class="txt_center">
<h2>見出し01</h2>
<p>テキスト</p>
</section>
</section>
<section class="area">
<section class="txt_center">
<h2>見出し01</h2>
<p>テキスト</p>
</section>
</section>
.txt_center {
text-align: center;
}
NGの使用例としてCSS(スタイル)目的でのsection
タグの使用は避けるようにしましょう。
CSS(スタイル)目的やJavaScriptでの操作目的の場合はdiv
タグを使用しましょう。
OKの使用例
<section class="area">
<div class="txt_center">
<h2>見出し01</h2>
<p>テキスト</p>
</div>
</section>
<section class="area">
<div class="txt_center">
<h2>見出し01</h2>
<p>テキスト</p>
</div>
</section>
.txt_center {
text-align: center;
}
正しいsection
タグの使い方を覚えましょう。
今回はこれで以上です。
section
タグは章や節といったまとまりを示すために使用します。2021.07.27
2021.07.09
2021.07.06
2021.07.02
2023.06.01
2023.05.18
2023.05.11
2023.05.09
2023.05.04
2023.04.27
2022.06.30
2020.03.22
2020.03.06
2020.02.22
© 2020 shu-naka-blog