セマンティックなHTMLの重要性と実例講座【誤用編】

HTMLを書く際、特に初心者が間違いやすいポイントがあります。これらの問題に注意し、適切にタグを使うことで、HTMLの品質が向上します。ここでは、間違えやすい主要なHTML要素とその正しい使い方をいくつか紹介します。

<div> と <section> の誤用

• 間違いやすい点: <div> は汎用的なコンテナで、何にでも使えてしまうため、意味のある構造タグを使うべき場面でも<div>を多用してしまうことがあります。
• 正しい使い方: セマンティックな意味を持つタグ（例えば<section>, <article>, <header>, <footer>）がある場合は、それらを優先して使用しましょう。

悪い例

<div class="section">
  <h2>会社概要</h2>
  <p>当社は1990年に設立されました...</p>
</div>

良い例

<section>
 <h2>会社概要</h2>
 <p>当社は1990年に設立されました...</p>
</section>

section は「セクション」の意味を持つため、意味のあるまとまったコンテンツには<div>ではなく、<section>を使うべきです。

<b> と <strong>, <i> と <em> の誤用

• 間違いやすい点: 見た目だけの理由で<b>（太字）や<i>（斜体）を使うことが多いですが、これらはセマンティックな意味を持ちません。
• 正しい使い方: 重要な内容を強調するためには<strong>や<em>を使用しましょう。これにより、内容に強調や重要性を付加することができます。

悪い例

<p>この製品は<b>重要</b>です。</p>
<p>このキーワードは<i>強調</i>されます。</p>

良い例

<p>この製品は<strong>重要</strong>です。</p>
<p>このキーワードは<em>強調</em>されます。</p>

<strong> は意味的に「強い強調」を表し、スクリーンリーダーでも強調して読み上げられることがあります。<em>も同様に「意味的な強調」を示します。

<br> の乱用

• 間違いやすい点: 行の間にスペースを入れたいときに<br>を使うことがありますが、複数の改行が必要なときでも多用すべきではありません。
• 正しい使い方: 改行のために<br>を使うのではなく、ブロック要素（例えば<p>や<div>）を使ってコンテンツを分けましょう。

悪い例

<p>当社の主なサービス:<br>ウェブ開発<br>アプリ開発<br>マーケティング支援</p>

良い例

<h2>当社の主なサービス:</h2>
<ul>
　<li>ウェブ開発</li>
　<li>アプリ開発</li>
　<li>マーケティング支援</li>
</ul>

リストなど、項目を分けるために<br>を使うのは避け、代わりにリストタグ（<ul>や<ol>）を使いましょう。<br>は短いテキストでの改行など、限られた場面でのみ使用するのがベストです。

<img> タグでのalt属性の欠如

• 間違いやすい点: 画像に対してalt属性を忘れがちです。特に、画像が表示されない場合や視覚障がい者がスクリーンリーダーを使う場合、この属性が重要です。また、SEOの観点でも評価を上げるために重要です。
• 正しい使い方: alt属性に画像の内容を簡潔に説明するテキストを入れることで、アクセシビリティが向上します。

悪い例

<img src="logo.png">

良い例

<img src="logo.png" alt="会社のロゴ">

画像の代替テキスト（alt）を設定することで、画像が表示されない場合でも、代わりのテキストが表示され、スクリーンリーダーなどが内容を読み上げられます。

フォーム要素での<label>の欠如

• 間違いやすい点: フォーム要素（<input>, <textarea>, <select>など）に<label>タグを関連付けないことが多いです。これにより、視覚障がい者がフォームの内容を理解しにくくなります。
• 正しい使い方: 各フォーム要素に必ず<label>タグを使い、そのfor属性をフォームのidと一致させます。

悪い例

<input type="text" name="name">

良い例

<label for="name">名前</label>
<input type="text" id="name" name="name">

フォーム要素に<label>タグを正しく使うことで、スクリーンリーダーを使うユーザーもフォームを正しく利用できるようになります。また、ラベルをクリックすることでフォーム要素にフォーカスが当たるという利便性も向上します。

<table>の誤用

• 間違いやすい点: レイアウトのために<table>を使うのは昔の手法で、今では誤用とされています。
• 正しい使い方: テーブルはデータを表形式で表示する場合のみ使用します。レイアウトにはCSSを使用しましょう。

悪い例

<table> 
 <tr>
  <td>メニュー</td>
  <td>コンテンツ</td>
 </tr>
</table>

良い例

<nav>
 <ul>
  <li>ホーム</li>
  <li>ブログ</li>
  <li>お問い合わせ</li>
 </ul>
</nav>

<section>
 <p>ここにコンテンツが入ります。</p>
</section>

<table>タグはデータの表現に使用し、レイアウトには適しません。CSSを使ってレイアウトを構築しましょう。

まとめ

間違えやすいHTMLのポイントを押さえ、セマンティックなタグを適切に使うことで、コードの品質が向上します。特に、<div>の多用を避け、セマンティックな意味のあるタグ（<section>, <article>など）を使う、見た目だけのために<b>や<i>を使わない、そしてアクセシビリティやSEOを意識したフォームや画像のalt属性を忘れないことが重要です。

これらを意識してHTMLを書くことで、より強固でアクセスしやすいWebページを作成できるようになります。