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