HTMLにはコンテンツを区切るタグとして、sectionタグとarticleタグがあります。どちらもHTMLでマークアップする際によく使われる重要なタグです。
この記事では、「HTMLのコンテンツを区切るsectionタグとarticleタグの違い」について解説していきます。
この記事のゴールは「sectionタグとarticleタグの役割について理解し、使い分けること」です。
いっしょに学習していきましょう。
なお、HTMLには他にも見出しや段落を表すタグ、メタ情報を記載するメタタグなど、さまざまな種類のタグがあります。詳しくは下記の記事をご一読ください。
HTMLでのコンテンツの区切り方
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
目次
コンテンツを区切る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タグ）のように使用することができます。入れ子で使われることはあまりありませんが、使用可能であることは知識として覚えておきましょう。
まとめ
sectionタグとarticleタグについて解説しました。2つのタグは似ているようで役割がまったく違うので、状況に応じて使い分けていきましょう。
HTMLには様々なタグや属性の種類があり、タグ一つでも覚えることがたくさんあります。少しずつ学習を進めていきましょう。
Web制作は、その他にも学ぶべき知識が数多くあります。
Web制作初学者がWeb制作を学習するにあたって、押さえておくべき知識・技術は「Web制作学習ロードマップ」の記事にまとめています。どこまで勉強すればいいか分からない、次はどんなスキルを勉強すればいいか分からない、という方はぜひ参考にしてみてください！
HTMLのコンテンツを区切るタグまとめ
- sectionタグ：文章やコンテンツなどひとまとまりになるものに使用する
- articleタグ：独立したコンテンツに対して使用する
プログラミング学習でこのような経験はありませんか？ これらの悩みは、学習環境を整えることで全て解決することができます。 ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。 条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。 少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
ただし、無料サービスの提供には参加者の数に制限があります。
