It's my pc life…

ふと気がつけばいつの間にやら PC と出会い20年超の、初級者以上中級者未満の徒然 PC 生活記録

HTML5 の 新要素 【article】 と 【section】 の用途をようやく理解・確定したので

  1. WebDesign ・ Coding

 それに併せて運営している各サイト・ブログの HTML 記述を変更することに。

 既に稼動しているサイトやブログの記述変更は CSS の記述変更も併せて行う必要があるなど面倒極まりない作業になると思われたが、自分自身の適当上等な性格が今回はプラス方向に作用したのか、article やsection についての各種設定が適当だったため、大した作業にならずに済んだ(笑)

 HTML5 にて登場して以来、様々な説が飛び交い合う中正しい用途の模索に右往左往させられた新要素の <article> と <section>。
 あくまで我流の用途となるが、取りあえず個人的にこの新要素達の用途を理解・確定したので、同じように扱いに困っている人達の助けになればと。

article 要素と section 要素の基礎の基礎

 まずは article と section の基本中の基本を、限界まで雑に簡略化して紹介。

article 要素は「独立した内容を明示する」ための要素

 article 要素は「サイトやブログ全体からその部分だけ抜き取っても独立したコンテンツ=ひとつの記事として成り立つ」部分をマークアップするための要素として用いられる。
 分かりやすい表現として良く「RSS フィードで読み込んでもひとつの記事として成り立っているか」という表現が用いられている。

 例えばブログの記事ひとつひとつはそれぞれ独立した内容で、ブログ全体からその部分だけ抜き取っても意味が通じる= article 要素でマークアップ可能ということになり、恐らくはこれが最もメジャーで分かりやすい使い方となる。

section 要素は「アウトラインを明示する」ための要素

 section は従来 h1 ~ h6 の見出しタグで表現していた文書のアウトラインを、より明確に明示するために用いられる要素として用いられる。

 section 要素の内部には 可能な限り <h1> を持つことが推奨 されており、主な使用例はブログ記事内の章や節といった従来 h3 や h4 等を用いて表現していた箇所を、そうした見出しタグと共に使用される。

実際にブログ記事部分をマークアップしてみる

 文章だけでアウトラインだの独立した内容だの説明されても何が何だか分からないので、取りあえず自分なりにarticle と section の用途を整理・理解した上でブログの記事をマークアップしてみた。

 ベストな正解ではないかもしれないが、そう遠く外れてもいないはず。多分。

 上記を図解したのがこちら。

「独立したコンテンツ」である記事部分は article 要素でマークアップ

 article は「独立したコンテンツ」を明示する要素のため、これはブログを構成する記事部分全体に当たる。従来は「div class=”kiji”」等で作成していた記事欄が article 要素に置き換わると考えれば分かりやすい。

 この場合 article 要素はアウトラインの「章・節・項」の内、最も広い括りとなる「章」に該当し、その内部に存在する各 section 要素に囲まれた範囲が「節」となる。

これまで見出し要素で構成していた部分は <section> + 見出し要素で

 従来の HTML ではブログ自体のタイトルは <h1>、ブログの各記事のタイトルが <h2>、そして各記事内にある小見出しは<h3><h4>の各見出しタグでマークアップしてアウトラインを構成するのが基本となっていたが、HTML5 では、

<section><h3></3></section> のように「見出しタグは section 要素と組み合わせて一緒に使用する」と覚えるのが一番単純で分かりやすい。

 上記図の場合、section + h3 で囲まれた部分が「節」、その内部にある section + h4 で囲まれた部分が「項」を明示することになる。

article や section を入れ子にする場合は関連性のある内容にすること

 article 要素内にある section、あるいは section 要素内にさらに section 要素を入れ子として配置する場合、入れ子にする各要素は親となる要素と関連した内容にする必要がある。

 一番大きな括りとなる「章」が上記図「A」。article 要素下 <h2> 見出しにある「HTML5 新要素について」が主題となる。

 article 要素内部には「節」に当たる section 要素(<h3> 含む)が B-1 と B-2 のふたつ、そしてその内部にはそれぞれ「項」に当たる section 要素(<h4> 含む)が、B-1 内部に C-1 と C-2 のふたつ、B-2 内部に D-1 と D-2 のふたつという構成になっている。

 この文書のアウトライン状最も大きな「章(A)」の主題が「HTML5 の新要素について」なので、その内部にある「節」に当たる B-1「article 要素については」主題に沿う内容のため OK だが、B-2「野菜と果実の区分について」は全く関係の無い内容になるため NG。

 さらに節内にある「項」に当たる B-1 内 C-1 と C-2、B-2 内 D-1 と D-2 を見てみると、B-1 内の C-1 については親となる章及び節の内容に沿う内容のため OK だが、C-2 は章及び節の主題と全く関係の無い内容となっているため NG。

 そもそも章の主題と異なる B-2 にある D-1 と D-2 は、D-1 は章の主題には沿うが親となる節 B-2 の主題とは異なる内容のため NG となり、D-2 は親となる節 B-2 の主題には沿うが、一番大きな主題とは関係の無い内容のため NG となる。

 このように article や section を入れ子にする場合、所属する章・節にの主題に関連する内容になるよう注意する必要があるが、普通にブログ記事を書いていれば 基本的にはこんな間違いは起こらないはずなので、あまり気にする必要はないかもしれない。

article は記事全体、section は記事内の文書構成をハッキリさせるためのもの

 HTML5 の公式説明は小難しい単語が並ぶばかりでなかなか理解が面倒だが、要は「ひとつのブログ記事」で考えた場合、従来は div 要素で囲っていた記事全体部分が article 要素に置き換わり、記事内で h3 や h4 といった小見出しで区切っていたアウトラインは、これからは section + 見出しタグで作っていきましょ-という理解で事足りるのではないかと。

 企業サイト等のビジネス目的で作成するサイトやブログで、SEO やら何やらに神経質なまでに気を遣うならもっと公式説明に沿ったマークアップを追求する必要があるだろう。

 しかし個人の趣味のサイトやブログでそこまで神経を磨り減らしてまで厳密なマークアップをせずとも、上記の理解で十分事足りると思い、現在運営しているサイトやブログは取りあえず上記をマイルールとして運営していくことに。

ブログトップページ等にある記事一覧部分をマークアップしてみる

 article 要素と section 要素はブログ記事以外の部分でも使用できる。よく見られるのがブログのトップに配置される各記事の一覧や、新着記事一覧などの部分。

蒸気は当ブログのトップページの記事一覧部分のマークアップを簡略化したもの。記事一覧が並ぶコンテナ自体は独立コンテンツでもなければアウトラインに関わる部分でもない単なるレイアウトため div class=”maincontents” で作成し、各記事部分はひとつずつ article でマークアップ。
 記事一覧の内部には節や項に当たる部分が無いため section は用いず、header・div・footer で内部を区分・構成している。

通常のサイトによくある更新履歴一覧部分をマークアップしてみる

 ブログでは記事一覧=更新情報みたいなものだが、普通のサイトでは別途「更新履歴」や「新着情報」等でサイト更新内容を示すことが多い。

 この部分を HTML5 でマークアップすると、以下のようになる。

 更新履歴部分全体は独立した記事ではないが、内部に見出しタグ <h2> を持つひとつの意味のあるまとまりなので section 要素で囲い、更新履歴ひとつひとつはそれ自体で独立した内容になるため article 要素で囲む。

 またはこれをもっと簡略化して、以下のようにもマークアップできる。

 更新記事ひとつひとつのタイトルのみを表示する場合、それだけでは「独立したコンテンツ」にはなり得ないので article 要素は使用せず、無難にリストタグで表記してみた。

 個人的にはこっちの方がすっきりしていて無駄がなく良い感じなので、いくつかのサイトでは上記のマークアップで運用している。

 最初に覚えた section 要素の用途が「記事内のアウトライン構成のため」だったので、更新履歴等を丸ごと section 要素で囲うこと自体に若干の違和感を感じているが、別にここは拘らなくても気になるようなら従来通り div 要素でレイアウトしても問題ないようにも思う。

article と section を用いる際の注意点

 article も section も、一度使い方を自分なりに固めてしまえばそう難しい要素ではないし、そこまで扱いに神経質になる必要も無い。
 しかしやはり運用していく上で最低限守っておきたい、あるいは抑えておきたいこともいくつかあるので、ちょこっとそこら辺もまとめてみる。

section は必ず見出しタグを内部に有するが、必ずしも <h1> でなくてもよい

 section 要素は内部に可能な限り h1 タグを有することが推奨されているのは前述の通り。従来の HTML ではサイト・ブログ内に h1 はひとつだけという決まりがあったが、HTML5 からは h1 タグをいくつ使っても良いようになったので、上記図で言えば <h3> <h4> に該当する箇所は全て <h1> に置き換えても運用上は何の問題も無い。

 ……が、それは決して h1 タグを乱用して良いということではないことに要注意。

 一体どうのような文節でどの程度用いれば乱用なのかは個々人にも依るので一概に括って判断するのは難しいが、色々と調べてみると、確かに section 要素は内部に h1 を含むことを推奨されているが、それは絶対のルールではなく、その時々の目的に応じた適切な見出しタグが適用されているのが好ましいという。

 ……これでは何とも曖昧で個人の感性次第になってしまうので、記事内の section 要素内に使用する見出しタグは、従来同様 <h3><h4> とした。

 もちろんサイト・ブログ全体のタイトルは <h1> で、各記事のタイトルが<h2>。<h1> がサイト・ブログ内にひとつしか存在しないのも従来通り。

 果たしてこれが SEO 的に吉と出るか凶と出るかはまだまだこれから次第だが、正直現時点ではそこまで気にする必要もないし、実際検索結果に及ぼす影響はほぼないという話もあるので、今から神経質になっても仕方ないと判断した。

article も section もレイアウト目的では使用しない

 article 要素は「独立したコンテンツ」を明示する要素で、 section 要素は「アウトライン」を明示する要素であり、決してブログの見栄えを整えるためのレイアウト目的の要素ではない。

 レイアウトやその他の、適切に該当する要素がないようなブロックを構成するためには、従来通り div 要素を用いること。

 HTML5 は <article> や <section> の他にも <nav><aside>のように、各セクションを定義・明確化する「セクショニング・コンテンツ」と呼ばれる要素が登場し、こられで適切にマークアップすることが重要視されている。

 そのため 従来通り div 要素を使うべきか、適切な各セクショニング・コンテンツを使うべきか、サイトやブログ構築の初期時にしっかりと明確にしておく必要がある。

article も section も入れ子可能だが、内容は関連性のあるものとして適切に運用すること

 これは前述の通りだが、article 要素はその内部に複数の article 及び section を入れ子にして有することができるし、逆に section 要素が内部に複数の article 及び section を入れ子で有することも可能。

 だがこれらを入れ子で運用する場合、記述するタイトルや内容は 必ず親(章や節)に関連した内容であること が求められているのを忘れずに。

 とは言っても普通に文章を書いていれば、いきなり全く無関係の内容がポッと出で現れるなんてことそうそうないはずだが……

必要以上に厳密なマークアップに拘らない

 article 要素や section 要素に限った話ではないが、これらの使い方に神経質になり過ぎる必要はなく、もし使用すべき箇所が分からないなら、従来通り div 要素や見出しタグでレイアウトやアウトラインを構築しても全然問題無い。

 厳密かつ正確なマークアップに拘り過ぎて肝心の内容がなくなっては本末転倒だし、そもそも HTML5 の公式定義自体が曖昧なため「明確な正解」がマークアップには存在しないというのは昔からある話。
 まずは自分なりに理解できた箇所、使いやすい箇所からマークアップに使用してみて、徐々に慣れていけばそれで十分事足りるのではないかと。

 HTML5 準拠のマークアップでなければ検索エンジンに評価されない訳では無く、検索エンジンの評価対象はマークアップの厳密さ、美しさではなく、あくまでも「サイトやブログの内容」なのをお忘れ無く。

article 及び section 要素の用途まとめ&参考サイト・ブログ

 HTML5 登場以来色々と article や section に振り回され、それに伴い無駄に試行錯誤を続けてきてしまったが、それらを自分なりに噛み砕いてまとめてみると、

  • article はブログ記事全体を囲っていた div 代わりに使用する
  • section は記事内の小見出しと組み合わせて使用してアウトラインを分かりやすくする
  • ブログトップの記事一覧も article で囲って OK
  • サイトの更新履歴等は section で全体枠を作る(独立コンテンツではないので article は NG)

 これぐらいの理解でサイト・ブログ運営には何の影響も無いことにようやく気付けた(笑)

 また、今回 article と section の用途を整理して理解するのに際し、以下のサイトやブログを参考にした。

 どのサイトも非常に分かりやすくまとめられてて涙出てきた……

 HTML5 で登場した新要素の中でも使用機会がダントツで多いにも関わらず用途が分かりにくいことこの上ない代表格の article 要素と section 要素。

 今回は運営中の既存サイト・ブログの部分的な手直しに留めたが、そのうち綺麗にゼロから HTML と CSS を再構成し直したいけど、時間が……

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

コメント更新情報

トラックバック

トラックバックURL: http://itsmy.first-pclife.com/web-wordpress/webdesign-coding/post-523/trackback