これぞHTML5!article要素とsection要素ゼロから始めるHTML/CSS講座Vol12



これぞHTML5!article要素とsection要素ゼロから始めるHTML/CSS講座Vol12
目次
  1. ゼロから始めるHTML/CSS講座 article要素とsection要素
  2. article要素とsection要素

ゼロから始めるHTML/CSS講座 article要素とsection要素

article要素とsection要素

HTML5において利用が推奨されている要素として、「article要素」と「section要素」があります。

article要素
サイト内で自己完結しており、それ自体で独立したコンテンツとして成り立つものarticle要素の内容だけ抜き出して違和感がないもの ブログやニュースの記事など

section要素
文章内の節を表す 意味や機能など文章の区切り

Webページの内容は、主にこの2つの組み合わせで構成されています。文章だけだとイメージしづらいと思いますので、例として次のWebページをHTMLで作成してみましょう。

article-section

上記はCodeCampで提供しているブログ記事(Code部)より、一部内容を抜粋したものです。
これを今までの知識でマークアップすると次のようになります。
ファイル名: blog.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>blog</title>
</head>
<body>
    <h1>なぜプログラミングが注目されるのか?</h1>
    <h2>1. プログラミング脳を身につけられる。</h2>
    <p>プログラミングを通じて、論理思考力や表現力が高まるため、 問題解決スキルが身につけられるようになるということ。</p>
    <p>登壇者である、深津氏によれば、</p>
    <p>”プログラミングというと、コードを書くイメージが強いが、実は一番時間を割くのは、問題を解決するための仮説作りや、仕組みやルールなどを作    る方法を考える事。 コードを書くのは、本当に最後の最後”</p>
    <p>また、Code.orgの動画の中で、スティーブジョブズが ”プログラミングから”考え方”を学んだ” と言っている。</p>
    <p>今、子供向けのプログラミング教育が注目されているのは いわゆるこのプログラミング脳を身につけられるからでしょう</p>
    <h2>2. アイディアを生み出したり、整理に使える。</h2>
    <p>まつもとゆきひろ氏によれば、”プログラミングは翻訳作業ではなく、自身のアイディアを表現するもの”と言っています。</p>
    <p>言語に落とし込むことで、思考が整理することができるようになります。</p>
    <p>また、ルールさえ作ってしまえば、コンピューターが自分の代わりに作業をしてくれるなど、自身の力を何倍にも拡張できるのもプログラミングを    学ぶメリットだと言っていました。</p>
</body>
</html>

article-section1-639

blog.htmlの文章構成は以下となります。

article-section2-639

article-section-4

見出し<h1>と小見出し<h2>があり、小見出しに対する内容として段落

が続く文章構成となっています。

より正確なマークアップのため、blog.htmlに文章内の節を表すsection要素を加えてみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>blog</title>
</head>
<body>
    <h1>なぜプログラミングが注目されるのか?</h1>
    <section>
        <h1>1. プログラミング脳を身につけられる。</h1>
        <p>プログラミングを通じて、論理思考力や表現力が高まるため、 問題解決スキルが身につけられるようになるということ。</p>
        <p>登壇者である、深津氏によれば、</p>
        <p>”プログラミングというと、コードを書くイメージが強いが、実は一番時間を割くのは、問題を解決するための仮説作りや、仕組みやルールなどを作る方法を考える事。 コードを書くのは、本当に最後の最後”</p>
        <p>また、Code.orgの動画の中で、スティーブジョブズが ”プログラミングから”考え方”を学んだ” と言っている。</p>
        <p>今、子供向けのプログラミング教育が注目されているのは いわゆるこのプログラミング脳を身につけられるからでしょう</p>
    </section>
    <section>
        <h1>2. アイディアを生み出したり、整理に使える。</h1>
        <p>まつもとゆきひろ氏によれば、”プログラミングは翻訳作業ではなく、自身のアイディアを表現するもの”と言っています。</p>
        <p>言語に落とし込むことで、思考が整理することができるようになります。</p>
        <p>また、ルールさえ作ってしまえば、コンピューターが自分の代わりに作業をしてくれるなど、自身の力を何倍にも拡張できるのもプログラミングを    学ぶメリットだと言っていました。</p>
    </section>
</body>
</html>

小見出しとその内容をsection要素で囲いました。

article-section3-639

article-section-6

section要素にすることで、文章の「節」として定義されます。

さらにblog.htmlへarticle要素を加えると、次のようになります。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>blog</title>
</head>
<body>
    <article>
        <h1>なぜプログラミングが注目されるのか?</h1>
        <section>
            <h1>1. プログラミング脳を身につけられる。</h1>
            <p>プログラミングを通じて、論理思考力や表現力が高まるため、 問題解決スキルが身につけられるようになるということ。</p>
            <p>登壇者である、深津氏によれば、</p>
            <p>”プログラミングというと、コードを書くイメージが強いが、実は一番時間を割くのは、問題を解決するための仮説作りや、仕組みやルールなどを作る方法を考える事。 コードを書くのは、本当に最後の最後”</p>
            <p>また、Code.orgの動画の中で、スティーブジョブズが ”プログラミングから”考え方”を学んだ” と言っている。</p>
            <p>今、子供向けのプログラミング教育が注目されているのは いわゆるこのプログラミング脳を身につけられるからでしょう</p>
        </section>
        <section>
            <h1>2. アイディアを生み出したり、整理に使える。</h1>
            <p>まつもとゆきひろ氏によれば、”プログラミングは翻訳作業ではなく、自身のアイディアを表現するもの”と言っています。</p>
            <p>言語に落とし込むことで、思考が整理することができるようになります。</p>
            <p>また、ルールさえ作ってしまえば、コンピューターが自分の代わりに作業をしてくれるなど、自身の力を何倍にも拡張できるのもプログラミングを    学ぶメリットだと言っていました。</p>
        </section>
    </article>
</body>
</html>

見出しと2つの節をarticle要素で囲いました。

article-section-7

見出しと2つの節

を合わると1つの記事として成り立ちます。これをarticle要素で囲むことで、自己完結するコンテンツとして定義されます。

article要素とsection要素について簡単にまとめると、その部分だけ切り取って独立したWebページとして成り立つだけの内容があれば「article要素」、それ以外は「section要素」を使用します。

article-section4-639

実際に上記section要素の内容だけを読むと、「なぜプログラミングが注目されるのか?」という主題にあたる部分が存在しないため、この文章が何に対して書かれているのか不明で、切り取って独立させることができません。

arcticle要素とsection要素の違いは理解が難しく、人の主観によってどちらを定義するか別れる場合もあります。まずは「記事が自己完結しているか」という観点より、どちらかで囲うよう心掛けましょう。

NEXT LESSON ☛ idとclass

PREV LESSON ☛ ブロックボックスとインラインボックス

関連記事

CodeCampus編集部
この記事を書いた人
CodeCampus編集部
\ 無料体験開催中!/自分のペースで確実に習得!
オンライン・プログラミングレッスンNo.1のCodeCamp