HTML

HTMLのアウトラインを表すセクション要素について

HTMLの学習ではタグの付け方を中心に学習する人が多いと思います。
ですが、HTMLの重要な要素はタグの付け方だけではありません。

HTMLの学習にはアウトラインをしっかりと理解するが重要です。

以下にHTMLのアウトラインを学習し、理解すべき理由について解説していきます。

HTMLのアウトラインについて

HTML5になる以前までは、<h1>〜<h6>でアウトラインを表現することができていました。
しかし近年では他の方法でもHTMLのアウトラインを表現できるようになりました。

その方法とは、セクション要素を使用することです!
セクションを表す要素は大きく分けて3つあります。

  • article
    内容がそれだけで完結しているセクション
  • aside
    本題から逸れた内容のセクション
  • section
    上記のセクション以外の普通のセクション

一つひとつの詳細については下記で紹介していきます。

article

articleはそれだけで完結したセクションで使用されます。
簡単に言えば、「たとえその部分だけ抜き出したとしても内容を理解できる」ものが該当します。

身近なものとしては、ブログ記事やニュース、論文などです。

記事全体のマークアップを使用する際に使われることが多いです。
HTMLで言えば、<body>のすぐ下に<article>,</body>のすぐ上に</article>となることが多いと思います。

aside

asideは本題ではなく、関連情報や補足情報に使われます。

ブログ記事やネットニュースで言えば、「関連する記事」やSNSのシェアボタンは、asideでマークアップされています。

section

sectionは章や節などを表すときに使われます。
articleが全体を表し、その内部構造はsectionでマークアップされるイメージです。

articleやasideに比べてイメージがしにくいと思いますので、例となるコードを提示していきます。(準備中です💦)

コードを見ていただければ、理解も深まると思います。

<h>タグだけではなく、なぜセクショニングが必要なのか?

「でも、<h>タグを使えばアウトラインは作れるんじゃない?」と思われた方も多いと思います。

実際、<h1>~<h6>のタグを使えば文章構造を表現できます。
それにHTML5になる以前までは、<h>タグのみでアウトラインを表現してきていたようです。

では、なぜセクション要素を使用した方が良いのか?

それは、section要素などを使うことで、章・節・項などが明確にわかるようになるためです。

セクション要素が使用されるまでは、<h>タグの使われ方から章・節・項を推測するしかありませんでした。

つまり<h>タグだけでもアウトラインは構築できていたが、セクション要素を用いることでアウトラインは明確になり、誰が見ても理解しやすくなったと言えます。

アウトラインが明確になるということは、コードのミスや仕事の負担の軽減にもつながります。

もしHTMLのセクション要素を勉強していなかった方は、ぜひ勉強してみてください。

参考書籍

よくわかるHTML5+CSS3の教科書【第3版】 教科書シリーズ
Amazon Services International,  Inc.による
詳細はこちら: https://www.amazon.co.jp/dp/B07KQPY7PL/ref=cm_sw_em_r_mt_dp_U_YRSREbA9MD1V0

HTML5&CSS3デザイン 現場の新標準ガイド フロントエンドエンジニアのための必須知識と実践
Amazon Services International,  Inc.による
詳細はこちら: https://www.amazon.co.jp/dp/B074YZP1RC/ref=cm_sw_em_r_mt_dp_U_oTSREbTJ2VHX4