HTML5において利用が推奨されている要素として、「article要素」と「section要素」があります。
article要素
サイト内で自己完結しており、それ自体で独立したコンテンツとして成り立つものarticle要素の内容だけ抜き出して違和感がないもの
ブログやニュースの記事など
section要素
文章内の節を表す
意味や機能など文章の区切り
Webページの内容は、主にこの2つの組み合わせで構成されています。文章だけだとイメージしづらいと思いますので、例として次のWebページをHTMLで作成してみましょう。
上記は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>
blog.htmlの文章構成は以下となります。
見出し<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要素で囲いました。
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要素で囲いました。
見出しと2つの節
article要素とsection要素について簡単にまとめると、その部分だけ切り取って独立したWebページとして成り立つだけの内容があれば「article要素」、それ以外は「section要素」を使用します。
実際に上記section要素の内容だけを読むと、「なぜプログラミングが注目されるのか?」という主題にあたる部分が存在しないため、この文章が何に対して書かれているのか不明で、切り取って独立させることができません。
arcticle要素とsection要素の違いは理解が難しく、人の主観によってどちらを定義するか別れる場合もあります。まずは「記事が自己完結しているか」という観点より、どちらかで囲うよう心掛けましょう。
