HTMLにはコンテンツを区切るタグとして、sectionタグとarticleタグがあります。どちらもHTMLでマークアップする際によく使われる重要なタグです。
この記事では、「HTMLのコンテンツを区切るsectionタグとarticleタグの違い」について解説していきます。
この記事のゴールは「sectionタグとarticleタグの役割について理解し、使い分けること」です。
いっしょに学習していきましょう。
なお、HTMLには他にも見出しや段落を表すタグ、メタ情報を記載するメタタグなど、さまざまな種類のタグがあります。詳しくは下記の記事をご一読ください。
【HTML】headタグとは？ 初心者でも分かる使い方を紹介
HTMLでのコンテンツの区切り方
コンテンツを区切るsectionタグ：「章・節・項」などひとまとまりを示す
sectionタグは文章やコンテンツなどひとまとまりになるものに使用します。sectionタグで囲んだ要素が「章・節・項」などであることを示します。
sectionタグはhタグを含むことが推奨されています。
基本書式
<section></section>例えば次のようにsectionタグを使用できます。
<section>
<h2>タイトル</h2>
<p>テキストが入ります。</p>
</section>
<section>
<h2>タイトル</h2>
<p>テキストが入ります。</p>
</section>出力結果
上記のようにコンテンツの区切りとして使用することができます。
コンテンツを区切るarticleタグ：独立したコンテンツのかたまりを示す
articleタグはサイト内で自己完結した、独立しているコンテンツの要素に対して使用します。articleには「記事・論説」という意味があります。
基本書式
<artcile></article>例えば次のようにarticleタグを使用できます。
<article>
<h2>タイトル</h2>
<p>テキストが入ります。</p>
</article>
<article>
<h2>タイトル</h2>
<p>テキストが入ります。</p>
</article>出力結果
sectionタグと同様にコンテンツの区切りとしてarticleタグを使用できます。
sectionタグとarticleタグの違い
sectionタグとarticleタグの違いは、似ているようで役割が全く異なります。
sectionタグは文章やコンテンツなどひとまとまりになるものに使用すると解説しました。articleタグの場合はサイト内で自己完結した、独立しているコンテンツの要素に対して使用されます。
sectionタグを使用することで、sectionタグで囲った部分が文章のまとまりであることを明確に示すことができます。
articleタグは、例えばブログ記事のような独立したコンテンツに対して使用されます。
sectionタグとarticleタグを使い分けてみよう
ここまでの知識を踏まえて、次のようなHTMLのいくつかのdivタグを、sectionタグとarticleタグで置き換えてみましょう。
<div>
<div>
<h1>ブログ記事タイトル</h1>
<p>テキストが入ります。</p>
<div>
<h2>h2見出し</h2>
<p>テキストが入ります。</p>
</div>
<div>
<h2>h2見出し</h2>
<p>テキストが入ります。</p>
</div>
</div>
</div>sectionタグとarticleタグに置き換えることができたでしょうか？
以下は置き換えた例になります。
<article>
<section>
<h1>ブログ記事タイトル</h1>
<p>テキストが入ります。</p>
<section>
<h2>h2見出し</h2>
<p>テキストが入ります。</p>
</section>
<section>
<h2>h2見出し</h2>
<p>テキストが入ります。</p>
</section>
</section>
</article>
この例は一例です。一番外側のsectionを使わず、記事全体をそのままarticleタグで囲んでも問題ありません。
sectionタグは入れ子（sectionタグの中にsectionタグ）のように使用することができます。入れ子で使われることはあまりありませんが、使用可能であることは知識として覚えておきましょう。
HTMLタグの使い分けは、実際に手を動かすと理解が深まります
まとめ
sectionタグとarticleタグについて解説しました。2つのタグは似ているようで役割がまったく違うので、状況に応じて使い分けていきましょう。
一つ、確かな理解を積み上げましたね。
ただ「理解した」と「実務で使える」の間には、もう一段ギャップがあります。なんとなく作れても、実務基準ではコードにムダや間違いがあるとみなされることがあります。自分では気づけない、そのズレをどう埋めるかが次の課題です。
そのギャップを埋める一番早い方法は、実際の案件レベルの制作を、メンターに見てもらいながら進めることです。
ZeroPlus Gateでは、30日間無料で、正しくWebサイトを作る力が身につく実践型の学習環境を提供しています。
- メンターとあなただけの学習ロードマップを作れる
- 現場経験豊富なプロへ回数無制限で質問ができる
- 元ランサーズの技術責任者監修のカリキュラム
このレベルの環境を、入会金も月謝も一切なしで提供しているのはZeroPlus Gateだけです。ただし、参加者の数には制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
登録は30秒、今すぐ次の一歩へ
