[Sponsor] 「これからWebデザインを始めたい」方のための
Webデザインスクールを渋谷で開催!
はじめてのWebデザイン『HTML・CSS』入門

2-8. コンテンツを区切るタグ(article・section)

記事のコンテンツ内を区切って文章構造をわかりやすくするためのタグとしてarticleとsectionというタグが用意されています。それぞれの特徴と、使い分け方・組み合わせ方を解説します。

  • HTML・CSS
  • Webデザイン

公開日:2019/05/08最終更新日:2019/05/08

1.articleタグ・sectionタグとは?

HTML5では、ドキュメントの構造が明らかにされたセマンティックな(単なる文字の羅列ではなく、意味がある)コードを書くことが推奨されています。

articleとsectionというタグは、見た目などに一切影響を及ぼさないので、一見意味があるのかわからないタグですが、ページ内のコンテンツの構造を明らかにする重要なタグです。

articleとsectionにはそれぞれの意味がありますので、それらを把握して上手に使い分けましょう。

2.<section>タグの使い方

<section>タグはひとかたまりの章(セクション)に使われる要素です。見出しが含まれる文章のひとかたまりを章と考えます。

例えばページ内の導入部分や、新着情報、連絡先などをこの<section>タグで囲います。

例:

<section>
  <h3>HTMLとは</h3>
  <p>HTMLは文章構造をマークアップする言語です。</p>
</section>

3.<article>タグの使い方

<article>タグはサイト内で独立したコンテンツとして成り立つものに使われる要素です。ブログの記事やニュースサイトの記事などが含まれます。複数の<section>を束ねたりして使うことが多いタグです。

例:

<article>
  <h2>HTMLの使い方</h2>
  <section>
    <h3>HTMLとは</h3>
    <p>HTMLは文章構造をマークアップする言語です。</p>
  </section>
  <section>
    <h3>HTMLの書き方</h3>
    <p>タグで文章を囲います。</p>
  </section>
</article>

4.実際にsectionとarticleを使った例

それでは前回までに作ったindex.htmlの<main>〜</main>の中に、以下のHTMLを記述してみましょう。

<main>
  <h1>ウェブサイトの作り方</h1>
  <article>
    <h2>HTMLの使い方</h2>
    <section>
      <h3>HTMLとは</h3>
      <p>HTMLは文章構造をマークアップする言語です。</p>
    </section>
    <section>
      <h3>HTMLの書き方</h3>
      <p>タグで文章を囲います。</p>
    </section>
  </article>
</main>

以下のようにブラウザで表示されます。

articleとsectionの表示

理解度チェック

はじめてのWebデザイン『HTML・CSS』入門

1. HTMLとCSSを学ぶ準備

2. HTMLの基礎知識

3. CSSの基礎知識

このレッスンの著者