HTML ガイド

このページでは、 HTML を使用するためのガイドを紹介します。

HTML コメント <!-- … --> の使用

HTML のコメントは、マークアップに説明メモを追加したり、文書内の特定の箇所をブラウザーに解釈させないようにしたりするために使用します。

HTML でのマイクロデータの使用

マイクロデータは WHATWG HTML 標準の一部であり、ウェブページ上の既存のコンテンツ内でメタデータを入れるために使用されます。検索エンジンやウェブクローラーは、ウェブページからマイクロデータを抽出して処理し、ユーザーへ高度な閲覧操作を提供するために使用することができます。検索エンジンは、ウェブページ上の情報を理解し、ユーザーにより関連性の高い結果を提供することを可能にするため、この構造化されたデータを直接利用できることから大きな利益を得ます。マイクロデータは、値をプロパティに割り当てるためにアイテムと名前と値の組み合わせを記述するためのサポート語彙を使用します。マイクロデータは、機械可読なタグとともに HTML 要素に注釈する試みで、古い RDFa やマイクロフォーマットの同様のアプローチよりも簡単な方法を提供します。

HTML におけるレスポンシブ画像の使用

この記事では、レスポンシブ画像という概念について学びます。レスポンシブ画像とは、画面サイズや解像度などが大きく異なる端末でも適切に表示される画像のことです。また、HTML が提供する、レスポンシブ画像の実装に役立つツールについても見ていきます。これにより、さまざまな端末でのパフォーマンスを向上させることができます。

HTML のマイクロフォーマットの使用

マイクロフォーマット (Microformat) (μF と略記されることもあります) は、意味情報と構造化データを HTML に埋め込むために使用される規格で、検索エンジンやアグリゲーター、その他のツールが使用するための API を提供します。HTML のこれらの最小限のパターンは、人、組織、イベント、場所などの基本的な情報からドメイン固有の情報まで、さまざまなものをマークアップするために使用されます。

HTML の日付と時刻の形式の使用

一部の HTML 要素は日付や時刻の値を使用します。この記事ではこれらの値を指定する文字列の形式について説明しています。

HTML フォーム検証と制約検証 API の使用

ウェブフォームの作成は常に複雑な作業でした。フォーム自体をマークアップすること自体は簡単ですが、それぞれの入力欄が妥当で一貫しているかどうかをチェックすることはもっと難しく、問題をユーザーに伝えることは頭痛がするかもしれません。HTML5 では、フォームに新しい仕組みが導入されました。 input 要素に意味を持つ新しい型と、クライアント側でフォームの内容をチェックする作業を簡単にする制約検証が追加されました。基本的な、よくある制約は、JavaScript を必要とせずに、新しい属性を設定することでチェックできます。もっと複雑な制約は制約検証 API を使用して検査することができます。

コンテンツカテゴリー

ほとんどの HTML 要素は 1 つ以上のコンテンツカテゴリーに属していて、カテゴリーごとに共通した特徴を持つ要素を分類しています。これは緩やかなグループ分けです（実際にはこれらのカテゴリーの要素間の関係を作成していません）。しかし、これらは、特にその複雑な詳細に遭遇したときに、カテゴリーの共有動作とその関連ルールを定義し記述するのに役立ちます。どのカテゴリーにも属さない要素も存在します（track など）。

後方互換モードと標準モードを理解する

かつてウェブでは、よく 2 つのバージョンのページを作成していました。ひとつは Netscape Navigator 向け、もうひとつは Microsoft Internet Explorer 向けです。 W3C がウェブ標準を作成したとき、ウェブ上のほとんどの既存サイトの表示が壊れるため、ブラウザーはウェブ標準を採用し始めることができませんでした。そのためブラウザーは、標準に準拠した新しいサイトと以前の古いサイトを区別して扱うために、2 つのモードを導入しました。

構文とよくあるタスクの HTML 早見表

HTML を使用しているとき、HTML タグを正しく使用する方法や適用方法を簡単に覚える方法があるととても便利です。MDN は広範にわたる HTML ドキュメント と深い解説である一連の　HTML ガイドを提供しています。しかし、多くの場合、手っ取り早くヒントを得たいものです。そのため、早見表では、よく使用するコードの断片をすばやく正確に使用することができるようにしています。