あそびラボ

お問い合わせ

MENU

あそびラボ

お気軽にご相談ください

  • 03-6905-8103
  • 受付時間:平日10:00-18:00

ご相談・お問い合わせ

divタグの多用はやめよう!

Web講座 第15回

ふくろう先生
ふくろう先生

divタグを多用してる人をよく見かけるけど、パンちゃんはどうじゃ?

パンちゃん
パンちゃん

え、divタグって多用したらいけないんですか?

ふくろう先生
ふくろう先生

タグにはそれぞれ役割があるので、それを知った上で使うのはいいんじゃが、とりあえず何でもかんでもdivで囲んじゃえ!というのは良くないんじゃ。

<div>タグばかり使用してませんか?

マークアップの際に<div>ばかり使用していないでしょうか?
<div>ではなく<article><section>を使用して、クローラーに親切な文書構造を目指しましょう。

なぜ全てdivで囲んではいけないのか

articlesectiondiv、それぞれどのタグを使用しても表示に変化はありません。
では、どうしてdivではなくarticleやsectionを使用した方がよいのでしょうか?

この3つのタグにはそれぞれ違った役割があります。

【article】 article…“記事”
単独でも成り立つ、独立した内容を囲む際に使用。

【section】 section…“章・節”
テーマ毎にコンテンツを分ける際に使用。

【div】 division…“分割”
レイアウト目的でグループ化する際に使用。
タグ自体に特別な意味はない。

articleとsectionはタグ自体に明確な意味がありますが、divにはありません。

つまり、適切なタグを使用せずdivばかりを使用したページは、
クローラーが理解できない構造のページとなるのです。

divは、他に適切なタグがない際の最終手段として使用することを推奨されているタグです

sectionとは

テーマを持った1つのまとまりを表します。
例えば、サイトのトップページであれば下記のようにマークアップできるでしょう。

<section>
<h2>ABOUT</h2>
<p>このサイトは~……</p>
</section>

<section>
<h2>CONCEPT</h2>
<p>コンセプトは~……</p>
</section>

sectionの中身はABOUTやCONCEPTなどの、意味のある1グループであることがわかります。

sectionには見出しを含むことが推奨されていますが、そもそも見出しが存在しないコンテンツはテーマ性が低いと言えるので、“見出しがない場合sectionの使用は適切ではない”という解釈ができます。

articleとは

ページから切り離されても単独で成り立つコンテンツを表します。
サイト内の通常コンテンツだけでなく、投稿記事や投稿コメントなども囲うことができます。

<article>
<header>
<h1>ブログを始めました!</h1>
<p><time datetime=”2021-02-20″>2021/02/20</time></p>
</header>
<p>今日からブログを始めてみまし……</p>
<footer>
<p>カテゴリ:<a href=”news”>お知らせ</a></p>
</footer>

<section>
<h2>コメント</h2>
<article>
<p>更新楽しみにしてま……</p>
<footer>
<p><time datetime=”2021-02-21″>2021/02/21</time></p>
<p>by Taro</p>
</footer>
</article>
<article>
<p>更新がんばってくだ……</p>
<footer>
<p><time datetime=”2021-02-22″>2021/02/22</time></p>
<p>by Jiro</p>
</footer>
</article>
</section>

</article>

最後に

articleとsectionはよくわからないからとりあえずdiv、なんて人は少なくないはずです。
タグの役割をしっかり理解し、適切なマークアップを心がけていきましょう。

パンちゃん
パンちゃん

なるほど!

articleやsectionは、HTML5から追加された要素ですよね。

構造化をきちんとすべきということですね!

ふくろう先生
ふくろう先生

そうじゃ!

HTML5になってから数年経つので、構造化タグをきちんと理解して、適切なマークアップを心掛けるのじゃ。

へっぽこ Web講座一覧へ

池袋・練馬近郊でホームページ制作の
ご相談をされたい方はこちら ▶