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

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

関連記事

HTMLでリンクをはる

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

HTMLの改行方法

どうも、べ〜やんです。 今回はHTML5で改行する方法を紹介します。 タグが必要 HTML5で改行するためには普段文章を書いている感覚と同じようにEnterで改行はできません。 <p>HT …

[HTML] 特殊文字で空白スペース

どうも、べ〜やんです。 今回は、特殊文字を使って空白スペースを挿入する方法を紹介します。 空白スペース htmlではひとつの半角スペースは空白スペースとして使用できますが、連続した半角スペースはひとつ …

[超初心者] CSSの書き方

どうも、べ〜やんです。 今回はCSSに付いて超基本をざっくりまとめます。 CSSでできること CSSはwebページの見た目を整える働きがあります。背景色や文字色、デザインの位置や大きさの変更など、様々 …

[CSS] CSSでチェックマークを作る方法

どうも、べ〜やんです。 今回はCSSでチェックマークを作る方法を初心者の方用に紹介します。 リストなどのデザインのバリエーションを増やすのに便利です。 チェックマーク リストなどによく使われるチェック …