変遷したセクション要素
前書き
このページは、HTML (Standard)に関する情報を備忘録的にまとめたもののひとつです。
専門家がまとめたリファレンスページと違い、専門的かつ高等な情報はありませんのでご注意ください。
セクション要素とは
セクション要素は、HTML内で文書を明確に区分（セクショニング）するために用いられる要素です。
現在主流のHTML Living Standardでは、以下の要素がセクション要素に区分されています。
- body
- article
- section
- nav
- aside
- h1 ～ h6
- hgroup
- header
- footer
- address
「body」といった昔からの要素もいくつかあるものの、勉強を怠っていた人は「article？ section？ 何それ？」「header？ headの間違いじゃ？」などと混乱してしまうと思います。
現時点でセクション要素を使わない事がページ評価にどのような影響を与えるかはわかっていませんが、いずれAIなどの進化により見た目と内部ソースの両面でわかりやすいページが高品質と評価される未来が来るかもしれません。
今のうちにその性格と使い分け方を覚えておくとよさそうです。
セクション要素の追加と進化
最近（といってもここ10年以内）にHTMLを始めた方はあまり知らないかもしれませんが、HTMLのセクションに関する要素はHTML4からHTML5にかけて大幅に変化しました。
かつてのHTMLにはこういった要素がなく、紙媒体の文書と同様に見出し（h1～h6）タグとそれに続く文書を人間が見て判断する「なんちゃってセクション」が常識でした。
汎用ブロック要素「div」にid/class属性を付けて表現していた方々もいたそうですが、大体はスタイルシートやスクリプトを活用するのに必要だったのでやむなくつけていた、というケースが大半で、セクショニングとして活用していた人は少数派と言っても良いでしょう。
現在のHTMLで採用されているセクション要素は以下の通りです。
このうち太字の要素が、HTML4から存在するものです。
| タグ要素 | 要素が示すセクション |
|---|---|
| body | HTML内の文書コンテンツ領域 |
| article | 文書内の自己完結した項目 メディア記事の1項目、SNS投稿の1記事や付随するコメントエリア、ウィジェット/ガジェット1つ、などに用いる |
| section | 見出し（h1～h6）を伴うコンテンツグループ 後述の「hgroup」よりも一般的な運用が可能 |
| nav | ナビゲーションリンクのグループなど、他のページへのリンクを集めた領域 ヘッダー直下にあるページナビ、モバイル向けのポップアップ式リンクバー、などに用いる |
| aside | メインコンテンツと直接関連しないコンテンツ領域 補足説明に用いる画像や説明文のエリア、本文に付記するコメントなど、本文から除外してほしい内容の指定に用いる |
| h1, h2, h3, h4, h5, h6 | セクションの見出し |
| hgroup | 見出しと、セットになるコンテンツをグループ化した領域 |
| header | 文書の前置きになる領域 俗に「ページヘッダー」と呼ばれる部分に用いる |
| footer | 文書の著者や権利情報、索引や奥付けなどの領域 俗に「ページフッター」と呼ばれる部分に用いる 1つのBODY要素内にある最初の項目しか認識されない |
| address | 直近にあるarticleもしくはbody要素の連絡先に関する領域 |
HTML5以降の知識がある人はこの情報だけでもなんとなく理解できますが、古いHTML知識で止まっている「自称ベテラン」の方は「？」が飛び交ってフリーズしているかもしれません。
これらを大まかにイメージ化したものが以下の画像です。
一般的に見られるホームページ風レイアウトにタグ要素を当てはめたものですが、classやidを複雑に用いなくても上記の要素だけで簡単にセクショニングできる事がわかるかと思います。
実際にはモバイル向けのポップアップメニューや各種SNSや広告などのガジェット用内部フレームなどがあるためここまで単純化はできませんが、旧来のDIV要素にclassやidを当てはめていく方式よりはわかりやすいのではないかと思います。
セクション要素の留意事項
セクション要素はHTML文書の構造を明確化するのに役立ちますが、不十分な知識で乱用すると逆に（ソースレベルでは）ページを破綻させるリスクもあります。
一般的には旧来のH1～6要素とP要素に加え、ARTICLE、SECTION、NAV、ASIDEの4要素だけを用いる事が広く推奨されているようです。
これらはセクション要素の中でも比較的自由度が高く、Blog記事の特に注目させたい部分とおまけの部分を分ける、検索クローラーが迷子にならないよう「パンくずリスト」などを導入する、といった最近よく見かけるウェブページ運用上のお悩みを解決するのに役立ちます。
自由度が高いとはいえ、正しい扱い方を十分に知っておかないと当然ながらページ評価を下げる原因になってしまいます。
セクション要素に興味を持たれた方は、ウェブデザイン会社や関連業界のデザイナーの方々といったその道の先達が発信する情報などを参考にしつつ、社会的な影響が少ない個人ページなどに導入して勉強していくのが良いでしょう。
0 件のコメント:
コメントを投稿