HTMLをセクション分けするタグの使い方!divタグとの違いも解説

2021.09.15

「sectionタグってなんで利用するの?divタグではダメなの?」
「正しくコーディングするためにHTMLをセクション分けするタグについて知りたい!」

上記のように考えている方もいるのではないでしょうか。

sectionタグとdivタグには明確な違いがあり、正しくsectionタグを使うことでSEO施策になります。

また、HTMLにはsectionタグ以外にもコンテンツの内容に合わせてセクション分けできるタグがあり、使い方を理解することで正しくコーディングできるようになるでしょう。

今回、WEBCAMP MEDIAは、HTMLをセクション分けするタグの使い方について解説していきます。

以上の項目に沿って説明します。

この記事を読むことで、sectionタグを始めHTMLをセクション分けするタグの正しい使い方が理解できるので、ぜひチェックしてみてください!

sectionはHTML内にひとつのセクションを表すタグ

HTML要素のひとつであるsectionタグは、HTMLファイルに書かれている見出しとその内容が書かれている文章をまとめる役割があります。

sectionタグを使ってHTML要素を分類することで、Webサイトがどのような構成になっているのか明確になり、検索エンジンのクローラーが評価しやすくなります。

また、sectionタグを利用する場合、タイトルを表すhタグを入れ子で入力するというルールがあります。

sectionタグとdivタグの違い

sectionタグは、見出しとそれに関する文章をまとめるという役割がありますが、divタグはHTML要素を囲うだけで意味を持っていません。

また、divタグは主にCSSを使ってデザインを整えるために利用するのに対し、sectionタグはWebページの構造を明確にするために利用します。

たとえば、入れ子にhタグが利用されておらず、デザイン変更のみ目的の場合はdivタグを使い、タイトルとその内容が記述されている要素を囲う場合はsectionタグを使います。

上記のように、sectionタグとdivタグでは利用用途が違う点を理解しておきましょう。

sectionタグの使い方をサンプルコードを用いて解説

sectionタグを使って、HTMLの章や節をまとめる方法をサンプルコードを用いて解説していきます。

sectionタグはHTMLファイル内に<section></section>と入力し、タグの間にタイトルと本文を入力します。

サンプルコード

     <body>
        <section>
          <h2>ブログタイトル1</h2>
          <p>ブログタイトル1の内容</p>
        </section>
        <section>
          <h2>ブログタイトル2</h2>
          <p>ブログタイトル2の内容</p>
        </section>
        <section>
          <h2>ブログタイトル3</h2>
          <p>ブログタイトル3の内容</p>
        </section>
      </body>

上記のように章や節のまとまりが複数ある場合は、それぞれをsectionタグで囲いましょう。

また、sectionタグにCSSを適用させたい場合、sectionタグの入れ子にdivタグを入力してdivタグにCSSを利用します。

sectionタグを複数利用するサンプルコード

 <body>
        <style>
          .container{
            display: flex;
            justify-content: space-around;
          }
          .box{
            border: 2px solid;
            border-radius: 15px;
            width: 200px;
            text-align: center;
          }
        </style>
        <div class="container">
          <section>
            <div class="box">
              <h2>タイトル1</h2>
              <p>タイトル1の内容</p>
            </div>
          </section>
          <section>
            <div class="box">
              <h2>タイトル2</h2>
              <p>タイトル2の内容</p>
            </div>
          </section>
          <section>
            <div class="box">
              <h2>タイトル3</h2>
              <p>タイトル3の内容</p>
            </div>
          </section>
        </div>
      </body>

ほかにも、sectionタグの入れ子としてsectionタグを利用でき、sectionタグで囲った内容をさらに細かく分割するときに最適です。

sectionタグを入れ子にして利用する際は、親要素のsectionに利用しているhタグよりも1つ小さい見出しにすることで、大見出しと中見出しを分けて重要度を視覚化できます。

sectionタグを入れ子にするサンプルコード

     <body>
          <section>
              <h2><セクションについて</h2>
              <p>セクションの内容</p>
              <section>
                <h3>セクションの使い方</h3>
                <p>セクションの使い方に関する内容</p>
              </section>
              <section>
                <h3>セクションについてのまとめ</h3>
                <p>まとめの内容</p>
              </section>
          </section>
      </body>

実行結果

section以外でHTMLをセクション分けするタグ一覧

sectionタグ以外にも、下記のように場面に合わせてHTML要素を区分するタグが存在します。

sectionと上記のタグは、HTML要素を囲った範囲を定義する役割を担うセクショニングコンテンツに該当するので、一緒に覚えておくと良いでしょう。

各セクショニングコンテンツの特徴と使い方について解説していきます。

独立記事はarticleタグで作成しよう

articleタグは、Webサイト内で独立している記事を定義するタグで、ブログ記事やトップページのメイン記事に利用されます。

articleタグとsectionタグの使い方で迷う方が多いですが、双方には次のような違いがあります。

ブログ記事を例に挙げると、ブログ自体のまとまりにarticleタグを使い、ブログ内の各見出しと段落のまとまりにセクションを利用します。

articleタグの正しい使い方とsectionタグと使い分ける方法を、サンプルコードを用いて解説していきます。

articleタグのサンプルコード

     <body>
        <article>
          <h1>セクションタグの使い方について徹底解説</h1>
          <p>リード文</p>
          <section>
            <h2>セクションについて</h2>
            <p>セクションの内容</p>
            <section>
              <h3>セクションの使い方</h3>
              <p>セクションの使い方に関する内容</p>
            </section>
            <section>
              <h3>セクションについてのまとめ</h3>
              <p>まとめの内容</p>
            </section>
        </section>
        </article>
      </body>

記事の内容が完結する範囲にarticleタグを使い、段落を各章で分けるときにsectionタグを利用します。

asideタグは補足情報の設置に最適

asideタグは、メインコンテンツと間接的に関係がある補足情報をまとめる役割があり、Webサイトのサイドバーや記事内の補足情報として利用されます。

たとえば、sectionタグの使い方に関する記事がメインコンテンツの場合、最近投稿したHTMLタグ関連の記事を補足情報としてサイドバーに表示することがあります。

asideタグの使い方をサンプルコードを用いて解説してきます。

asideタグのサンプルコード

     <body>
        <article>
          <h1>セクションタグの使い方について徹底解説</h1>
          <p>リード文</p>
          <section>
            <h2>セクションについて</h2>
            <p>セクションの内容</p>
            <section>
              <h3>セクションの使い方</h3>
              <p>セクションの使い方に関する内容</p>
            </section>
            <section>
              <h3>セクションについてのまとめ</h3>
              <p>まとめの内容</p>
            </section>
        </section>
        </article>
        <div id="sidebar">
          <aside>
            <h2>関連記事一覧</h2>
            <ul>
              <li>関連記事1</li>
              <li>関連記事2</li>
              <li>関連記事3</li>
            </ul>
          </aside>
        </div>
      </body>

メインコンテンツを表すmainタグのサイドに関連記事を表示する際にasideタグを利用しています。

記事の本文内で補足情報を挿入するときは下記のように入力します。

     <body>
          <article>
            <h1>セクションタグの使い方について徹底解説</h1>
            <p>リード文</p>
            <section>
              <h2>セクションについて</h2>
              <p>セクションを使うことで記事にまとまりが生まれる</p> 
              <aside>
                <h3>用語解説</h3>
                <p>セクションとは、分割された部分という意味です。</p>
              </aside>
            </section>
          </article>
      </body>

ナビゲーションを作るnavタグ

navタグはnavigationの略称で、現在のページから他のページに移動するナビゲーションリンクをまとめるタグです。主にヘッダー内のメニューバーや記事内の目次で利用します。

ヘッダー内にあるメニューバーにnavタグを利用し、お問い合わせページや会社概要など内部のメニューはリストタグを使って表現することが多いです。

navタグを使ってメニューバーを作る方法をサンプルコードと一緒に解説していきます。

navタグのサンプルコード

     <body>
        <nav>
          <ul>
            <li><a href="#">ホーム</a></li>
            <li><a href="#">お問い合わせ</a></li>
            <li><a href="#">ブログ一覧</a></li>
            <li><a href="#">サイトマップ</a></li>
          </ul>
        </nav>
      </body>

ナビゲーションメニュー全体をnavタグで囲い、各メニューはliタグを使って表示します。

liタグ内にaタグを挿入することでアンカーテキストになり、他のページへ移動できるようになります。

まとめ

今回、WEBCAMP MEDIAでは、HTMLをセクション分けするタグの使い方について解説してきましたが、いかがでしたでしょうか?

HTMLをセクション分けすることで、検索エンジンのクローラーがWebサイトの中身を把握しやすくなりSEO施策にもなります。

また、divタグは、CSSを当ててスタイルを変更することを目的としており、タグ自体に意味がないので多用しないように注意しましょう。

ぜひ参考にしてみてくださいね!

関連記事

資料請求

  • 短期集中で最速エンジニア転職を実現-転職成功者インタビュー一覧

    DMM WEBCAMPでは転職成功率98%を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

    資料をダウンロードする
  • IT技術がもたらす3つの変化と身につけるべきスキル

    IT技術の発展により、今後10~20年程度で47%の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

    資料をダウンロードする
  • 未経験がフリーランスエンジニアになる方法-年収アップで自由な働き方を手に入れる

    働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

    資料をダウンロードする

PAGE TOP

© 2021 WEBCAMP MEDIA Powered by AFFINGER5