CODING

[HTML] articleとsectionの使い方

投稿日:


どうも、べ〜やんです。

今回は、HTMLのarticleとsectionの使い方を紹介します。





articleとsection


divarticlesectionどれを使っても見た目上は同じ様に表示されます。

だったら全部divでいいじゃんと思う方もいると思いますが、クローラーにページの構造を理解してもらいSEO的にも使い分ける必要があります。

divは意味を持たない要素で、どの要素にも当てはまらない場合に最終の手段として使用することが推奨されています。

article

articleは独立したページを作れるような内容の場合に使用します。

例えば、ブログの記事などそれだけを切り離しても完結する内容のものです。

<article>
  <h2>ブログ記事など</h2>
  <p>独立した内容の場合はarticleを使用する</p>
</article>

section

sectionは段落を区切る場合に使用します。

例えば、ページの章・節・項などです。本をイメージしてみると分かりやすいです。

<h1>ページタイトル</h1>
<section>
  <h2>各章のタイトル</h2>
  <p>各章の内容</p>
</section>
<section>
  <h2>各章のタイトル</h2>
  <p>各章の内容</p>
</section>
<section>
  <h2>各章のタイトル</h2>
  <p>各章の内容</p>
</section>

記述ルール

基本的なルールにarticlesectionには見出し(h1~h6)をつけるというルールがあります。なので見出しダグを使うときにはarticlesectionが使えないか考えてみるのもいいと思います。

articleの中にarticlearticleの中にsectionsectionの中にsectionsectionの中にarticleなどのネストする使用もできます。


おわりに


今回は、HTMLのarticleとsectionの使い方を紹介しました。

クローラー目線でも優れたページを作る為に使い分けてみてください。



-CODING
-, ,

執筆者:


comment

関連記事

[CSS] リストの最初や最後だけなどに便利な擬似要素

どうも、べ〜やんです。 今回は、リストで最初や最後だけなど任意の箇所だけ違うデザインにしたい時などに便利な擬似クラスを紹介します。 リスト一部だけ リストの最初や最後だけなど任意のリストだけデザインを …

[CSS] 中央揃え

どうも、べ〜やんです。 今回はCSSでテキストやブロックを中央配置する方法を紹介します。 ブロックとインライン ブロック要素とインライン要素とでは中央揃えの方法が違うので、まずはブロック要素とインライ …

[CSS] 変化Transitionの使い方

どうも、べ〜やんです。 今回は、変化の詳細を指定するTransitionを紹介します。 CSSだけで設定できるので初心者の方にもおすすめですよ。 Transitionとは transitionとは:h …

HTMLでリンクをはる

どうも、べ〜やんです。 今回は、HTMLでリンクを貼る方法をざっくり紹介します。 テキストや画像をクリックしたら、別のページに移動できるあれです。 <a href=""&gt …

[超初心者] CSSとは

どうも、べ〜やんです。 HTMLに続き超初心者の方用に、マークアップ言語のCSSとはついて書きます。 CSSとは何か? CSSとは、Cascading Style Sheets(カスケーディング・スタ …