ZeroPlus Gateについて

\ シェア /

FacBook
Twitter
LINE
はてブ
PPocket
ZeroPlus Media > Web制作 > HTML/CSS > 【HTML】コンテンツを区切るタグ、sectionとarticleの違いについて解説

【HTML】コンテンツを区切るタグ、sectionとarticleの違いについて解説

HTML/CSS

2022/08/28

2023/06/02

コンテンツを区切るタグ

HTMLにはコンテンツを区切るタグとして、sectionタグとarticleタグがあります。どちらもHTMLでマークアップする際によく使われる重要なタグです。

この記事では、「HTMLのコンテンツを区切るsectionタグとarticleタグの違い」について解説していきます。

この記事のゴールは「sectionタグとarticleタグの役割について理解し、使い分けること」です。

いっしょに学習していきましょう。

なお、HTMLには他にも見出しや段落を表すタグ、メタ情報を記載するメタタグなど、さまざまな種類のタグがあります。詳しくは下記の記事をご一読ください。

この記事で身につく内容
  • HTMLでのコンテンツの区切り方

ZeroPlus Gateについて

プログラミング学習でこのような経験はありませんか?

  1. 目標に向けて何を学べば良いかわからない
  2. 調べても解決策が見つからない
  3. 現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

  1. なんでも相談できる専属メンター
  2. いつでも技術相談ができるプロ講師
  3. 元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

 

コンテンツを区切るsectionタグ:「章・節・項」などひとまとまりを示す

sectionタグは文章やコンテンツなどひとまとまりになるものに使用します。sectionタグで囲んだ要素が「章・節・項」などであることを示します。

sectionタグはhタグを含むことが推奨されています。

基本書式

<section></section>

例えば次のようにsectionタグを使用できます。

<section>
  <h2>タイトル</h2>
  <p>テキストが入ります。</p>
</section>

<section>
  <h2>タイトル</h2>
  <p>テキストが入ります。</p>
</section>

出力結果

section

上記のようにコンテンツの区切りとして使用することができます。

 

コンテンツを区切るarticleタグ:独立したコンテンツのかたまりを示す

articleタグはサイト内で自己完結した、独立しているコンテンツの要素に対して使用します。articleには「記事・論説」という意味があります。

 

基本書式

<artcile></article>

例えば次のようにarticleタグを使用できます。

<article>
  <h2>タイトル</h2>
  <p>テキストが入ります。</p>
</article>

<article>
  <h2>タイトル</h2>
  <p>テキストが入ります。</p>
</article>

出力結果

section

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を使わず、記事全体をそのままarticleタグで囲んでも問題ありません。

sectionタグは入れ子(sectionタグの中にsectionタグ)のように使用することができます。入れ子で使われることはあまりありませんが、使用可能であることは知識として覚えておきましょう。

 

まとめ

sectionタグとarticleタグについて解説しました。2つのタグは似ているようで役割がまったく違うので、状況に応じて使い分けていきましょう。

 

HTMLには様々なタグや属性の種類があり、タグ一つでも覚えることがたくさんあります。少しずつ学習を進めていきましょう。

Web制作は、その他にも学ぶべき知識が数多くあります。

Web制作初学者がWeb制作を学習するにあたって、押さえておくべき知識・技術は「Web制作学習ロードマップ」の記事にまとめています。どこまで勉強すればいいか分からない、次はどんなスキルを勉強すればいいか分からない、という方はぜひ参考にしてみてください!

 

HTMLのコンテンツを区切るタグまとめ

  • sectionタグ:文章やコンテンツなどひとまとまりになるものに使用する
  • articleタグ:独立したコンテンツに対して使用する

ZeroPlus Gateについて

プログラミング学習でこのような経験はありませんか?

  1. 目標に向けて何を学べば良いかわからない
  2. 調べても解決策が見つからない
  3. 現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

  1. なんでも相談できる専属メンター
  2. いつでも技術相談ができるプロ講師
  3. 元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

\ 学んだことをSNSでシェアしよう /

この記事の執筆者

ZeroPlus Media変種部

ZeroPlus Media編集部

ZeroPlusは、「フリーランス特化型プログラミングスクール」です。ZeroPlus Mediaでは、フリーランスとして活躍する際に役立つ有益なプログラミングやWeb制作に関する情報を発信しています。

質問について

ZeroPlus Media読者限定で質問対応をおこなっています。以下の2つの方法で質問を受け付けています。

選べる2つの質問方法

1

Google Foam(テキスト)で質問

mail

フォーム送信

メールで解答

formで質問
2

Google meet(オンラインmtg)で質問

meet

日時選択

メールを受け取る

メールからmtgに参加

meetで質問
ZeroPlus Gateについて

あなたの目的に合わせた2つのサービス

あなたの目的に合わせたZeroPlusの2つのサービス
基礎からフリーランスレベルまで本質的な学びを提供しています

完全無料!30日間で学びきれる
プログラミンスクールZeroPlus Gate

  • お金をかけずに、学習を進めたい
  • Webサイトを作れるようになりたい
  • メンターや講師に質問しながら学習したい

詳しくはこちらから

フリーランス特化型
プログラミングスクール ZeroPlus

  • プログラミング学習で悩んでいる
  • 仲間と一緒に学習したい
  • フリーランスとしての総合的な力を養いたい

詳しくはこちらから