HTML解体新書を読みました
昔、HTML要素についてざっと学んだことがありましたが、記憶が曖昧になっています。 改めてHTML要素を網羅的に理解し直したいと思い、HTML解体新書-仕様から紐解く本格入門 という書籍を読んでみました。 また、HTML 要素リファレンス - HTML: ハイパーテキストマークアップ言語 | MDNも参考にしました。
この記事では、その中で特に印象に残った要素について紹介し、個人的な気づきについてお伝えします。
main
main は、ページ内で最も重要なコンテンツをまとめる要素で、ページごとに1つだけ使用います。
main内には、ナビゲーションなど、他のページでも共通して表示されるコンテンツは含めない方が良いとされています。
これまでは、main要素内に他のページでも繰り返される要素を含めていましたが、これを機に構成を見直したいと思います。
header・footer
header と footer は、コンテンツを読む前後に配置される要素です。
書籍を読む前は、headerはグローバルナビゲーション、footerはサイト全体のフッターに使うものだと思っていました。 しかし、articleやsection要素内でも、記事のタイトルや執筆日をheader、コメントやリアクションをfooterとして使う考えに気づき、柔軟な使い方ができると感じました。
aside
aside は、メインコンテンツと直接的な関係はないものの、補足的な情報を提供する要素です。 サイドバーや注意書き、補足説明に適しており、たとえば記事内の関連リンクなどに使用できます。
ブログ記事のarticle要素では、記事を読み終わった後のコメントやリアクションはメイン内容に直接関わるためfooterに配置し、 一方、関連記事や関連タグのリストは補足的な要素としてasideに配置するのが良さそうだと感じました。
article
article は、ブログ記事のように自己完結するコンテンツを表す要素です。 自己完結しているため、article要素内の内容は、その部分だけ切り取っても意味が通じることが求められます。 また、article内にはh1〜h6の見出しを付けることが推奨されます。
articleという名称からも、ブログ記事や雑誌の記事、フォーラムの投稿など、事実や内容を独立して伝える文章に使うことが想定されています。 「記事」とは「事実を書くこと、またはその文章」を指すため、この要素が自己完結的な情報に適していると理解しました。
time
time は、日時を表現するための要素で、datetime属性にマシンリーダブルな形式の日付を入れ、人間が読みやすい日付を表示すると良いとされています。
これまで日付の表示を何度も実装してきましたが、time要素を使用すべきだったと感じました。より正確でセマンティックな実装ができる点が魅力です。
address
address は、住所だけでなく連絡先を示すための要素です。
住所の他にも、SNSリンクやメールアドレスなど、連絡手段をaddress要素に含めると良さそうです。幅広く使える要素だと感じました。
section
section は汎用的なセクション区切りの要素で、見出しを伴うことが推奨されています。
navやasideなど、より適切な要素がある場合はそちらを優先し、それらがない場合にsectionを使用します。 セクションを区切りたいときに活用できる便利な要素です。
fieldset
fieldset は、form内でチェックボックスやラジオボタンのグループをまとめる際に使用する要素です。 グループ名はlegend要素で付けることができます。
これまでに何度もチェックボックスやラジオボタンの実装を行ってきましたが、fieldsetを活用していなかったと反省しました。 より意味のあるマークアップができると感じました。
anchor（a要素）
リンクに関する関係性は、rel属性 で定義できます。外部リンクにはrel="external"を付けた方が良いでしょう。
また、ping属性 を使うと、リンク先に遷移する前に指定したURLへPOSTリクエストが送信され、トラッキングに利用できます。 これまで独自実装で対応していましたが、ping属性を使えば簡単に実現できるため、とても便利だと感じました。
small
small は、補足的な情報を小さく表示するための要素です。 例えば「180円（税込）」の「税込」のような付加情報を視覚的に小さくしたいときに便利です。
em・strong・mark
em は強調を示し、strong はさらに緊急性や重要性を持つ強調に使用します。 mark は、参照や関連性がある場合に注目させたい部分に使うのが適しています。
これまでは「目立たせたい」という意味で何となくemやstrongを使っていましたが、用途に応じて使い分けることが大切だと改めて感じました...。
form
novalidate属性 を使用すると、入力チェック（バリデーション）を無効化できます。 下書き保存や一時的なデータ入力を許可するフォームなどで活用すると便利です。
input
autocomplete属性 は、ユーザーが入力する際に候補を提示するために便利です。
datalist
datalist を使用すると、input（テキスト）フィールドに候補を表示できます。 ただし、すべてのブラウザでサポートされているわけではない点に注意が必要です。
caption・figcaption
caption はtableに説明を付けるための要素で、 figcaption はfigureに説明を付けるために使用します。
どちらも、画像やテーブルの補足説明を明確にできるため、より分かりやすいコンテンツ作成に役立つと感じました。
hgroup
hgroup は、タイトルとサブタイトルをグループ化する際に使用します。 これにより、関連する見出しをひとまとまりにして、より整理された構造を提供できます。
終わりに
HTMLを書く際、「どちらが正しいのだろう？」と悩むことが多々ありましたが、 今回の気づきを通して、いくつかの疑問に答えが見つかったように思います。 今後は、よりセマンティックに合った要素を意識して使っていきたいです。