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エフェクト紹介サイト!CSSFX

どうも、べ〜やんです。 今回は、CSSのおしゃれなエフェクトを紹介してくれるサイト『CSSFX』を紹介します。 CSSFXとは 引用元:CSSFX CSSFXはCSSのクリック、ホバー、ローディング時 …

[CSS] overflowの使い方

どうも、べ〜やんです。 今回はCSSのoverflowの使い方を紹介します。 テキストが長いけどスペースを大きく取りたくない場合などに便利です。 overflowとは overflowは要素からはみ出 …

[CSS] linear-gradient()グラデーション

どうも、べ〜やんです。 今回は、グラデーションを指定するlinear-gradient()を紹介します。 linear-gradient()とは linear-gradient()は背景色をグラデーシ …

[HTML] ルビを振る方法

どうも、べ〜やんです。 今回こんかいは、HTMLでルビを振ふる方法ほうほうを紹介しょうかいします。 ルビを振るとは ご存知の方がほとんどだと思いますが、ルビとは(ふりがな)のことです。 なんで(ふりが …

[CSS] CSSで文字に影をつける方法

どうも、べ〜やんです。 今回は、CSSで文字に影やアウトラインをつける方法を紹介します。 text-shadow text-shadowは文字に影をつけるプロパティです。 値は4つ使用します。 {te …