HTMLをセクション分けするタグの使い方！divタグとの違いも解説
「sectionタグってなんで利用するの？divタグではダメなの？」
「正しくコーディングするためにHTMLをセクション分けするタグについて知りたい！」
上記のように考えている方もいるのではないでしょうか。
sectionタグとdivタグには明確な違いがあり、正しくsectionタグを使うことでSEO施策になります。
また、HTMLにはsectionタグ以外にもコンテンツの内容に合わせてセクション分けできるタグがあり、使い方を理解することで正しくコーディングできるようになるでしょう。
今回、WEBCAMP MEDIAは、HTMLをセクション分けするタグの使い方について解説していきます。
以上の項目に沿って説明します。
この記事を読むことで、sectionタグを始めHTMLをセクション分けするタグの正しい使い方が理解できるので、ぜひチェックしてみてください！
＼プログラミングスクールを比較／
|
DMM WEBCAMP |
COACHTECH |
RUNTEQ |
|
|---|---|---|---|
|
|
|
|
| 目指せる姿 | WEBエンジニアへの転職 |
フリーランスエンジニア | WEBエンジニアへの転職 |
| 分割払い | ○ | ○ | ○ |
| 補助金 | ○ | × | ○ |
| 転職保証 | ○ | × | × |
| 受講期間 | 3ヶ月〜 | 3ヶ月〜 | 5ヶ月〜 |
| 特徴 |
【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり |
【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当 |
【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す |
| 料金 | 329,350円〜 ※給付金適用後 |
42万9,000円~ | 55万円 |
|
公式HP |
公式HP |
公式HP |
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 |
COACHTECH |
RUNTEQ |
|
|---|---|---|---|
|
|
|
|
|
| 目指せる姿 | WEBエンジニアへの転職 |
フリーランスエンジニア | WEBエンジニアへの転職 |
| 分割払い | ○ | ○ | ○ |
| 補助金 | ○ | × | ○ |
| 転職保証 | ○ | × | × |
| 受講期間 | 12週間〜 | 3ヶ月〜 | 5ヶ月〜 |
| 特徴 |
【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり |
【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当 |
【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す |
| 料金 | 329,350円〜 ※給付金適用後 |
42万9,000円~ | 55万円 |
|
公式HP |
公式HP |
公式HP |
