html5を利用してコーディングする事が増えてるかと思いますが、今でも出てくる話題が「articleとsectionの使い方に迷う。」という事。それらを利用しなくてもhtmlは組めるので、使わないという選択肢も有るのですが、折角なら理解して使いたいですよね。
1.html5について
そもそもhtml5が何か？を説明しておきます。html5はウェブアプリケーションとしての機能や、マルチメディア要素が実装された規格のhtmlです。
記述方法に関しても、これまでのバージョンやxhtmlのものとは違い、かなりシンプルに記述することができ、僕自身もその書きやすさが気に入って、それを選択候補に入れています。
ただ、html5には、これまでのバージョンから存在している多くのタグに、さらに新たなタグが追加されたため、どのタグをどのように扱うべきなのか？というのが頭を悩ませます。
特に今回の記事で触れる、article要素とsection要素は違いがわかりにくく、他の人からも「イマイチ違いがわからない」という声を聞きます。
違いを簡潔に述べると、articleはその要素のみを抜き出しても、独立したページとして成り立つ内容のものであり、sectionは、その要素が機能や意味のひとまとまりとなっているもので、決まりとして、その要素の意味を表すための見出しが必要となります。
たまに「article」と「section」は親子関係？という疑問や、セットとして使うもの？といったものを目にすることが有りますが、そういった関係性はなく、articleの中にsectionが無いこともありますし、sectionをまとめるのがdivという事も普通にあります。
ちなみに、divは意味を持たないブロックにあたります。意味付けできないブロックはdivで囲まれることが多いですね。過去のバージョンのhtmlを利用する場合、このdivに対し、idやclassを付けて意味づけていました。
2.article要素
article要素についてもっと詳しく書きます。
articleは上記で述べたとおり、それ単体で完結するセクション（sectionタグのことではなく）で、雑誌の中にあるコラムや特集、ブログで言えばひとつの記事などが該当します。
artcle内にさらにarticleを入れ子にして使うことも出来ますが、大枠のarticleの内容に対して中のarticleも、その内容に関連性がなければいけません。
articleを使ったサンプル
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>デザインに関する事を書くブログ</title> </head> <body> <h1>配色に関して</h1> <article> <header> <h1>色について</h1> </header> <p>色には様々な種類があります。赤、青、黄、緑などなど、それぞれには様々な意味を持っており、デザインする上ではそれらの意味を意識しておく必要があります。</p> <section> <h1>赤</h1> <p>赤は興奮作用がある色であり、情熱の色というイメージがあります。</p> </section> <section> <h1>青</h1> <p>海や空といったイメージで、見た人に安心感を与える色です。</p> </section> <section> <h1>黄</h1> <p>太陽や光といった、明るいものをイメージさせる色で、それらのイメージから栄光や幸福といった意味を与えられる色です。</p> </section> </article> </body> </html>
サンプルを見てもらえれば感触がつかめると思いますが、このサンプルのブログではデザインに関する内容を取り扱っています。その中の記事で、色に関する事を解説する記事があり、これは単体で完結するものとなります。その為、この記事全体をarticle要素でくくっています。
3.section要素
section要素は、文章に出てくる節や章といった、一区切りの塊のことです。上記サンプルで言えば、それぞれの色を解説している「赤」、「青」、「黄」ですね。sectionには見出しが必要になりますが、サンプルではそれぞれの色が見出しとなっています。
このサンプルのsecition内に、新しくsectionを付け、関連するキーワードを入れてみると、下記のようになります。
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>デザインに関する事を書くブログ</title> </head> <body> <h1>配色に関して</h1> <article> <header> <h1>色について</h1> </header> <p>色には様々な種類があります。赤、青、黄、緑などなど、それぞれには様々な意味を持っており、デザインする上ではそれらの意味を意識しておく必要があります。</p> <section> <h1>赤</h1> <p>赤は興奮作用がある色であり、情熱の色というイメージがあります。</p> <section> <h1>連想するキーワード</h1> <p>情熱、活発、積極的、外向性、興奮、勇気、欲望、革命、力、勇敢、活気、注意</p> </section> </section> <section> <h1>青</h1> <p>海や空といったイメージで、見た人に安心感を与える色です。</p> <section> <h1>連想するキーワード</h1> <p>清潔、冷静、安定、信頼、誠実、知恵、神秘、調和、知性、落ち着き</p> </section> </section> <section> <h1>黄</h1> <p>太陽や光といった、明るいものをイメージさせる色で、それらのイメージから栄光や幸福といった意味を与えられる色です。</p> <section> <h1>連想するキーワード</h1> <p>楽しい、元気、上昇志向、知性、好奇心、洞察力、決断力、想像力、快活、協力き</p> </section> </section> </article> </body> </html>
4.文章のアウトラインについて
マークアップは文章に対し、タグを使って意味を持たせることで、html5になり、より様々な意味づけが出来るようになりました。
検索エンジンは、それらのタグを使うことにより、文章の意味や、伝えたいことを理解してくれるようになっています。ですが、裏を返せば意味付けを間違えると、意図しない意味を検索エンジンに伝えてしまいます。
文章の構造を組み立てるのにhtml5は非常にやりやすいですが、もし、この文書構造を検索エンジンが検索順位を決定づける要素として強く位置づけた場合、間違えたマークアップは諸刃の剣となってしまいます。
わからないまま間違えた意味付けをしてしまうなら、無理して使わずにdivタグ等を利用することをおすすめします。divタグは意味を持たないので、検索エンジンも意味を持たないブロックとして、テキストの内容だけを理解し、評価します。
しっかりと文書構造を行うのであれば、この記事で解説でしたarticle、section、そしてそれ以外の、aside、navといった、セクション要素を使って、アウトラインをしっかりと構築していきましょう。
文章のアウトライン
文章のアウトラインとは、上記で述べたセクション要素を使い、セクションの入れ子構造で構築された文章構造のことをいいます。
html5まではdivタグに対して、idやclassを付けてマークアップしていたものが、html5のセクション要素の登場により、しっかりと意味を付けることが出来るようになりました。
文書を論理づけて構造していくことは、人からしても、ロボットからしても、非常に理解しやくなると言うことで、多くの人から重要視されています。
その為、divタグの乱立のように、ただ闇雲に扱う事は許されておらず、タグ自体を的確に扱う必要があります。
アウトラインを作成する際、それが正しいかを判断するにはHTML 5 Outlinerが役に立ちます。
サイトへ訪問し、ソースを貼り付けて実行すれば、文章のアウトラインが可視化されます。
見出しが必要な要素に見出しがなければUntitled Sectionと表示され、その要素にタイトルが足りない事が分かりますし、可視化されることで文章の構造が捉えやすくなります。
尚、HTML5 OutlinerはGoogleChromeの拡張機能でも提供されています。
HTML 5 Outliner：Chrome拡張版
5.まとめと文献
html5はややこしかったdoctype宣言などが今まで以上にシンプルに書けるようになり、その分文書構造を考えることに、より意識を向けることが出来るようになりました。
意味そのものや言葉が難しいというのもありますが、これからのWebサイト制作はこれまで以上に意味付けが重要視されてきますので、仕様をしっかりと理解して文書構造をきっちり考えていきましょう。
お役に立てたらお願いします🙇
Comments