Webサイトの品質を底上げする、正しいHTML設計の基本
Webサイト制作や改修の現場で「セマンティックHTMLに対応しましょう」と言われる機会が増えています。
ただ、言葉だけが先行していて、実際に何をどこまでやればよいのかが曖昧なまま進んでしまうケースも少なくありません。
セマンティックHTMLとは、「見た目のためだけに要素を並べるのではなく、コンテンツの意味や役割に合ったHTMLタグを正しく使うこと」です。
つまり、「それが見出しなのか」「ナビゲーションなのか」「本文なのか」「補足情報なのか」を、ブラウザや検索エンジン、支援技術に対して明確に伝える設計思想です。
これは単なるきれいな書き方ではありません。
アクセシビリティの向上、SEOへの好影響、保守性の向上、そして将来的な改修のしやすさに直結する、Web制作の基礎体力そのものです。
では、セマンティックHTMLへの対応として、具体的に何を行えばよいのでしょうか。
① 文書の基本構造を正しく整える
まず最初に必要なのは、HTML文書としての土台を正しく組むことです。
| <!DOCTYPE html> | ページの一番最初にこれを読むように記述 |
|---|---|
| <html lang=”ja”> | ページの言語を定義 |
また、<head> 内には文字コード、ビューポート、タイトル、必要に応じてディスクリプションを適切に設定し、ページの基礎情報を明確にします。
こうした設定は地味に見えますが、HTMLの解釈、検索結果への表示、モバイル表示の安定性など、サイト全体の品質に大きく関わります。土台が悪いと、その上のデザインがどれだけ美しくても、建物としては成り立ちません。
② ページの大枠をランドマーク要素で構造化する
セマンティックHTML対応で特に重要なのが、ページ全体の役割を明確に区切ることです。
そのために使うのが、いわゆるランドマーク要素です。基本的には以下の実装を行います。
| <header> | サイトやページの導入部分 |
|---|---|
| <nav> | 主要ナビゲーション |
| <main> | そのページの主たる内容。通常1ページに1つ。 |
| <aside> | 補足情報や関連情報 |
| <footer> | 末尾の共通情報 |
これにより、見た目だけでなく、ページ構造そのものが機械的に理解しやすくなります。
スクリーンリーダー利用者が主要領域へ素早く移動しやすくなるほか、HTMLの意味が整理されることで、保守や再設計の際にも構造把握がしやすくなります。
③ section と article を正しく使い分ける
| <section> | あるテーマを持った内容のまとまり たとえば「サービスの特徴」「導入事例」「よくある質問」など、ページ内の章立てに近い。 |
|---|---|
| <article> | それ単体で独立して成立するコンテンツ ブログ記事、ニュース一覧の1件、投稿カード、レビュー、メディア記事などは article との相性が良い代表例です。 |
ここで大事なのは、単なるレイアウト用の囲みには section を使わないことです。
意味を持たない箱なら div で十分です。逆に、意味のあるまとまりなのに全部 div で済ませてしまうと、HTMLの構造情報が死にます。
④ 見出し階層を整理する
セマンティックHTML対応では、見出しの使い方も極めて重要です。
<h1> から <h6> までの見出し要素は、単に文字を大きく見せるためのものではなく、情報の階層を示すためのものです。
ページ全体の主題には <h1> を使い、その下に大項目として <h2>、さらにその下位に <h3> というように、構造に応じて段階的に使用します。
ここでよくあるミスは、デザイン都合でタグを選んでしまうことです。
「大きく見せたいから h2」「少し小さくしたいから h4」といった使い方は、見た目だけを優先した誤用です。
見た目はCSSで調整し、HTMLでは意味と階層を守るべきです。
また、h2 の次にいきなり h4 に飛ぶような構造も、文書として不自然になりやすいため注意が必要です。
⑤ 本文や文章表現を適切な要素でマークアップする
本文の意味付けも、セマンティックHTMLの基本です。
| <p> | 段落 |
|---|---|
| <strong> | 重要な語句 |
| <em> | 文脈上の強調 |
| <blockquote> / <q> | 引用文 |
| <code> / <pre> | コード / 複数行のコードブロック |
内容に応じて要素を選ぶことが大切です。
この部分を雑にすると、HTMLはただ並んだ文字の塊になり見る人が疲れます。
⑥ 箇条書きや定義をリスト要素で表現する
| <ul> | 複数の項目を列挙する場合は、順序のない一覧 各項目は <li> で囲みます。 |
|---|---|
| <ol> | 複数の項目を列挙する場合は、順序がある場合 各項目は <li> で囲みます。 |
| <dl> | 用語と説明のセット その中で用語に <dt>、説明に <dd> を使う |
見た目だけ箇条書きっぽく見せるために div を並べる実装は、HTMLの意味を削ってしまう典型例です。
リストであるという情報は、ちゃんとタグで伝えたほうがいいです。
⑦ リンクとボタンの役割を混同しない
セマンティックHTML対応で、非常に重要かつ実務で崩れがちなのが、リンクとボタンの使い分けです。
| <a> | ページ遷移や別ページへの移動、同一ページ内のアンカー移動 |
|---|---|
| <button> | モーダルを開く、メニューを開閉する、フォームを送信するなど、ページ内で何らかの動作を実行するもの |
div に onclick を付けて疑似ボタンにする実装は、見た目だけ動けばよいという雑な設計になりやすく、キーボード操作や支援技術との相性も悪くなります。ここは本当に大事で、リンクとボタンは見た目が似てても仕事が違う話というです。
⑧ 画像や図版に意味を持たせる
内容理解に必要な画像であれば、その画像の意味が伝わる代替テキストを入れる必要があります。
一方、単なる装飾であれば alt=”” として、支援技術に不要な情報を読ませない配慮が求められます。
| <img> | alt 属性を適切に設定する |
|---|---|
| <figure> / <figcaption> | 図版や写真と説明文をひとまとまりとして扱う場合 「これは図として意味を持つコンテンツである」と明示できる |
このように、画像も単に貼るのではなく、「何のための画像か」をHTML上で示すことが重要です。
⑨ 表はレイアウトではなく、表データに使う
表形式のデータには <table> を使用し、見出しセルには <th>、データセルには <td> を使います。
必要に応じて <caption>、<thead>、<tbody>、<tfoot> を組み合わせることで、表の構造がより明確になります。
また、行見出し・列見出しには scope 属性を適切に付けることで、支援技術が表の読み上げ関係を理解しやすくなります。
昔ながらのレイアウトのための tableは、今では基本的に避けるべきです。
⑩ フォームを正しい要素で構成する
問い合わせフォームや検索フォームなどでは、意味に応じたフォーム要素を正しく使う必要があります。
入力欄には用途に応じた input type を選び、長文には <textarea>、選択肢には <select> を使用します。
そして、各入力欄には必ず <label> を関連付け、入力の意味を明確にします。
また、複数の入力項目がひとまとまりの意味を持つ場合には、<fieldset> と <legend> によってグループ化することが有効です。
プレースホルダーの文言だけで入力内容を説明する実装は、視認性やアクセシビリティの面で問題が出やすいため、ラベルの代わりにはなりません。
ラベルを消したがるデザインはたまにあるが、だいたい後で人間に復讐されます。
⑪ 日時や機械可読な情報を適切に表現する
記事公開日やイベント日時などは、<time> 要素を使うことで意味を明示できます。
datetime 属性を併用すれば、表示用の文字列と機械可読な日時情報を両立できます。
こうした要素は、見た目には大差なくても、データとしての扱いやすさや意味の伝達力を高めてくれます。
人間には自然に読めて、機械にも理解できる。これが良いマークアップです。
⑫ ARIAは最後の補助として使う
セマンティックHTMLの対応を進めるうえで、よく誤解されるのがARIAの扱いです。
ARIAは便利な補助手段ですが、HTMLの意味づけを置き換えるものではありません。
まずはネイティブのHTML要素で実現することが優先です。
button が使えるなら div role=”button” を作る必要はありません。
table が使えるなら、無理にARIAロールで表を再現する必要もありません。
ARIAは、HTMLだけでは意味や状態が十分に伝わらない場合に、必要最小限で補うものです。
盛れば偉いというわけではなく、情報を増やすことが結果として混乱をばらまくありがた迷惑になります。
まず優先的に見直すべきポイント
既存サイトをセマンティックHTML対応させる場合、すべてを一気に直すのが難しいこともあります。
その場合は、次の順で優先的に見直すと効果が出やすくなります。
まず、div で作られた疑似ボタンや疑似リンクをやめ、適切な要素に置き換えること。次に、見出し階層を整理し、header、nav、main、footer などのランドマーク構造を整えること。さらに、フォームのラベル、画像の alt、箇条書きや表のマークアップを見直していくと、サイト全体の意味構造がぐっと改善されます。
この順番は、ユーザー体験・アクセシビリティ・保守性に対する効果が比較的大きく、実務上も取り組みやすい部分です。
まとめ
セマンティックHTMLへの対応とは、単に新しいタグを増やすことではありません。コンテンツの意味を整理し、その役割に合ったHTMLで構造化することです。
正しい見出し、適切なランドマーク、意味に合ったリンクやボタン、正しく関連付けられたフォーム、そして無駄に div で埋め尽くさない設計。
それらを積み重ねることで、Webサイトは見た目だけの箱から、意味の通った情報設計へと進化します。サイト全体の品質を底上げし、将来の改修や運用までラクにする、地味だがめちゃくちゃ効く基礎工事です