セマンティック HTML とは、(無意味な) div および span タグを絶対にすべてに使用するのではなく、暗黙の意味のために HTML タグを使用することを意味します。 なぜこれをしたいのですか？ タグによっては、タグ内のコンテンツを特定の方法で解釈できます。 下記は用例です。
ヘッダータグ
使用する場合 それ以外の 、 と それ以外の など、Google やその他の検索エンジンは、ヘッダーをページの重要なタイトルとして解釈します。 こうすることで、ユーザーがヘッダーとサブヘッダーの単語を検索すると、ページの関連性が高くなると見なされます (ランクが高くなります)。 さらに、はるかに短く、よりクリーンです。
これは両方の方法で機能します。ヘッダー以外にはヘッダー タグを使用しないでください。特に、フォント サイズを大きくしたり、検索エンジンのキーワードのアウトラインを作成したりしないでください。 このようにして、ページの構造を解析できます (これは、 W3C HTML バリデーター）。 この構造は、スクリーン リーダーやその他のツールで使用して、ページの目次を作成できます。
フォーム ラベル
の タグは残念ながら忘れています。 それを使用する意味がすぐには明らかではないため、それを利用する Web ページはほとんどありません。 label タグは、「電子メール アドレス」などの入力フィールドのラベルを識別するために使用されます。 次のように、テキストと入力フィールドをラップして使用できます。 名: ラベル >、または 為に 次のような属性： 名: ラベル > .
代わりにラベルタグを使用する理由
テーブル
最近では、誰もがテーブルを使用しなくなりつつあります。 表は Web ページの外観を構造化するためのものではないため、これは素晴らしいことです。 しかし、テーブルには依然として非常に重要な目的があります。 スプレッドシートに入れるデータを表示する必要があるときはいつでも、テーブルが役に立ちます。
テーブルを使用する場合、広く使用されていないタグや属性が多数ありますが、アクセシビリティにとって非常に重要です。 使用 まとめ 属性を使用して、テーブル内のデータのより長い要約を提供します。 使用 データに簡単なタイトルを付けるタグ。 使用する タグを使用して、テーブルの列と行のヘッダーを識別します。 次に、 ヘッダー の属性 タグを使用して、そのセルに適用されるヘッダーを識別します。 テーブルのアクセシビリティに関するその他の例と詳細については、 W3C のアクセシビリティ ガイドライン.
リスト
リストは新しいテーブルです。 テーブルはデータのグリッドを目的としていますが、リストはコンテンツのリストを目的としています。 ほとんどの Web ページは本質的にさまざまなもののリストであるため、これは私たちにとって素晴らしいことです。 たとえば、このサイトを見てください。 トップページの中央にブログ記事の一覧を掲載しています。 側面にはリンク (アーカイブ、カテゴリなど) のリストがあり、側面自体はリストのリストです。 もし私が表を使っていたら、「この左のものは真ん中のものと何か関係がある」と言っていただろうが、実際にはそうではない. リストを使用することで、私は単に「これは互いに関係のある項目のリストです」と言っているだけです。
3 種類のリストから選択できますが、賢明に選択してください。 番号付きリスト ()、順序なしリスト ()、および定義リスト (）。 順序付きリストは、エントリに何らかの順序がある場合にのみ使用してください。 名前と値のペアが必要な場合、またはリストをセクションに分割する必要がある場合は、いつでも定義リストを使用してください。 それ以外の場合は、順序なしリストが安全な賭けです。
リストはページに構造を与えるだけでなく、スタイリングにも非常に便利です。 あなたはちょうど置くことができます ID また クラス 外側のタグ (例: )、外側のタグと内側のタグの両方をスタイルします。 タグ。
結論
可能な限り、さまざまな HTML タグを使用するようにしてください。 時々あなたは使用に行き詰まるでしょう タグを使用しますが、適切な HTML の同等物が見つからない場合は常にタグを制限するようにしてください。 同時に、本来の目的以外に HTML タグを使用しないようにしてください。 これを行うことで、HTML がよりきれいになり、その構造がより読みやすく理解しやすくなります。人々だけでなく、スクリーン リーダー、検索エンジン、その他のプログラムやツールに対しても同様です。