文書や画像をグループ化することによって情報をまとめ、表示されるページの各内容やソースを見やすくすることができます。表示されるページの内容を見やすくするというのは、レイアウトやデザインを現すために枠組みを用意するということです。
また、見た目だけでなく内部的に
その情報をまとめるため、枠組みを作るには基本的にはsection要素、article要素、div要素を使用します。
他にもaside要素やnavi要素もありますが、それらは比較的に使用方法が分かりやすいと思いますので、ここでは3つの要素にはそれぞれ意味を持っており、用途によって使い分けます。このページでそれぞれ順番に説明していきます。
1つのテーマをまとめるsection要素
section要素とはその名の通りこのタブを用いた範囲はセクションであるということを表し、章や節、項などの範囲を指定する場合に使用する要素で、該当の範囲指定するものにテーマがあればsection要素を使用してグループ化します。テーマがあれば、ということなのでsection要素で指定した範囲の初めには<h1>〜<h6>で見出しをそのテーマとして入れておくことが推奨されています。例えば企業ホームページですと新着情報や連絡先といったものです。下記で使い方の例をコードで説明します。
<section>
<h2>人気No.1：チワワ</h2>
<section>
<h3>性格</h3>
<p>チワワは甘えん坊で動きが機敏で、とても活発です。</p>
</section>
<section>
<h3>飼い方</h3>
<p>軽い散歩をしたり室内でおもちゃで遊んだりしましょう。</p>
</section>
</section>
<section>
<h2>人気No.2：トイプードル</h2>
<section>
<h3>性格</h3>
<p>賢く温厚であり、とても友好的。遊ぶことが大好きなのでいっぱい遊んであげるといいです。</p>
</section>
<section>
<h3>飼い方</h3>
<p>家の床は滑りにくい材質にしてあげてください。朝晩の軽い散歩は欠かさずに。
散歩以外でもたくさん遊んであげましょう。</p>
</section>
</section>それぞれのランキング1位2位をまずsectionで囲み、h3要素の見出しとp要素をsection要素で囲っています。このようにセクションとしてまとめるようにして<section>を使用します。
独自で完結しているセクションとしてまとめるarticle
article要素はsection要素よりもさらに限定的で、一つの記事や独自のコンテンツとして、その指定する範囲が独立できるものにarticle要素を使用します。articleという単語の意味そのものを考えればわかりやすいですね。例えばブログページだと記事の一覧が並んでいますが、それぞれの記事へのリンクなどは独立して一つの記事としてまとめるのでarticle要素で囲みます。実際にコードで記述するとこんな感じ。
<main>
<h1>犬特集一覧</h1>
<article>
<h2>チワワ特集</h2>
<p>チワワの特徴や飼い方など、チワワに関するすべてを徹底解説！！</p>
</article>
<article>
<h2>トイプ特集</h2>
<p>チワワの特徴や飼い方など、チワワに関するすべてを徹底解説！！
</article>
</main>このように、記事一覧を表示するページではそれぞれの記事が独立しているコンテンツだと認識をしてほしいので、article要素で各記事のタイトルや紹介文を囲んでいます。
特別な意味を持たないグループ化最後の手段 div要素
div要素には特別な意味はありません。コンテンツのレイアウトやデザインなど装飾するためにdiv要素でグループ化したい時に使用します。特定の範囲をまとめたいけど章や節、項とは違うし、ましてやその範囲で完結している独自のコンテンツでもないという場合はdivで囲ってデザインを整えます。使い方の例としては、レスポンシブデザインを考慮する際にテーブルでは上手く表現したいデザインができないといった場合に各セルをdiv要素で囲ってデザインするといった手法もあります。他にもdivには使い道はありますが、とりあえずはsectionでもarticleなど、どのグループ化する要素でもない場合div要素を使おうということです。HTML5より前はsectionやarticleなどはありませんでしたので、とりあえずdivで囲んでおくという風潮がありましたが、最近ではSEO的にも内部的に各セクションの意味を持たせることが必要になってきているのでdivの乱用は控えて行ったほうがいいかもしれません。
最後にそれぞれの要素を用いたコードを、例として記述しておきます。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>犬種人気ランキングL</title>
<meta charaset="utf-8">
<meta name="description" content="犬のペットとして人気のある種類のランキングを付けます。">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>犬種人気ランキング</h1>
<p>犬の人気のある種類をランキング方式でお届けします。あなたの買っているペットは何位かな？</p>
<div class="dogs">
<h2>犬の人気ランキング</h2>
<div class="Chihuahua">
<h3><strong>１位</strong>チワワ</h3>
<p>昔CMでも話題になったチワワが第一位です。可愛いですもんね。人気の理由は割愛します。</p>
</div>
<div class="toy_poodle">
<h3><strong>２位</strong>トイプードル</h3>
<p>ぬいぐるみみたいな可愛さですね。私も飼いたいです。人気の理由は割愛します。</p>
</div>
<div class="long_Chihuahua">
<h3><strong>３位</strong>ロングコートチワワ</h3>
<p>やっぱり可愛いですね。でもチワワに含めていいですよね。人気の理由はやっぱり割愛します。</p>
</div>
</div>
</body>
</html>
まとめ
- div要素でグループ化する
- グループ化することで枠組みを用意しデザインやレイアウトを現すことができる
- ソースの可読性が高まる
コメント