HTML はウェブのドキュメント層で、ウェブページを有意義なものにするために必要な構造とコンテンツを提供します。ここでは、ウェブの重要な要素である HTML に関する知識を深めるのに役立つ、コース、記事、コレクションなどの HTML コンテンツやその他の有用な情報をご覧いただけます。
HTML を初めてご利用になる場合は、Google では、始めるにあたって役立つ包括的なコースを用意しています。
HTML の特定のトピックについて詳しくは、以下のコースをご覧ください。
すべての主要なブラウザ エンジンで新たに利用可能になった最新の HTML 機能について学びます。
ユーザー補助機能が充実したウェブ アプリケーションを構築するために役立つ HTML のパターンとコンセプトについて学びます。
ウェブ アプリケーションを高速化するための HTML ベースの概念とパターンについて学習します。
Chrome DevTools を使用してウェブ アプリケーションの HTML や DOM をデバッグする方法について説明します。
学習コース

HTML を初めて使用する場合は、「HTML の学習」コースでは、構造上の問題、メタデータ、セマンティクス、スキルの向上に役立つその他のトピックなど、HTML の仕組みの基礎を学びます。

HTML について学ぶ

HTML についてさらに学びたい場合は、ウェブ アプリケーションの改善に役立つ高度なトピックについて学べる以下のコースをご覧ください。

HTML フォームを使用すると、ユーザーはウェブ アプリケーションに入力を与えることができます。本コースでは、HTML フォームを効果的に使用するために必要な情報をすべて学習します。
フォームについて学びましょう。
画像はウェブでよく使用されますが、img 要素を使用するだけではありません。このコースでは、ウェブ上の画像の使い方について知っておくべきことをすべて学習します。
画像について学ぶ
ユーザー補助はウェブ プラットフォームのすべての部分にわたりますが、ユーザー補助対応の HTML の記述は、ユーザー補助対応のウェブ アプリケーションを構築するうえで不可欠です。このコースでは、ユーザー補助対応のマークアップを記述するために必要な知識をすべて学習します。
ユーザー補助について

ベースラインは、ウェブ プラットフォームの機能をすべての主要なブラウザ エンジンで安全に使用できるタイミングをウェブ デベロッパーに知らせます。Baseline で新たに利用可能になった HTML 機能の一部を以下に示します。
限定公開の折りたたみ式メニューがベースラインになりました。2024 年 9 月に新たに利用可能になりました。
宣言型 Shadow DOM がベースラインになりました。2024 年 2 月に新たに利用可能になりました。
Popover API は、2024 年 4 月にベースラインの新規利用可能になりました。
2023 年 4 月に、inert 属性がベースラインに新しく追加されました。
iframe の遅延読み込みがベースラインになりました。2023 年 12 月に新たに利用可能になりました。

HTML は、ユーザー補助対応ウェブ アプリケーションを構築するうえで基本的な要素です。このセクションでは、HTML を使用してユーザーがアクセス可能なウェブ アプリケーションを作成する方法について、参考になる記事やリソースを紹介します。
ヘディングとランドマークに適切な要素を使用すると、支援技術を使用しているユーザーのナビゲーション エクスペリエンスを大幅に改善できます。
詳細
正しいセマンティック HTML 要素を使用すると、キーボード アクセスのほとんどまたはすべてを満たすことができます。タブインデックスを調整する時間を減らして、ユーザーの満足度を高めましょう。
詳細
一時的または永続的な運動機能障がいのあるユーザーの多くは、キーボード ショートカットを使用してアプリをより効率的に操作しています。アプリに適切なキーボード ナビゲーション戦略があると、すべてのユーザーにとってより良いエクスペリエンスが創出されます。
詳細
スクリーン リーダーで音声 UI をユーザーに提示するには、意味のある要素に適切なラベルまたは代替テキストを設定する必要があります。ラベルまたは代替テキストは、ユーザー補助機能用の名前を要素に付与します。これは、ユーザー補助ツリーで要素のセマンティクスを表現するための重要なプロパティの 1 つです。
詳細

HTML の使用方法は、ウェブ アプリケーションのパフォーマンスに影響する可能性があります。このセクションでは、HTML を使用してウェブ アプリケーションを高速化する方法に関する記事やリソースを紹介します。
ブラウザのプリロード スキャナは、ブラウザがリソースを通常よりも早く検出するために使用する、特殊な HTML パーサーです。ウェブ アプリケーションのパフォーマンスにどのように役立つか、また、その影響を受けないようにする方法について説明します。
詳細
Fetch Priority API は、fetchpriority HTML 属性を使用して、ブラウザに対するリソースの相対的な優先度を示します。これにより、読み込みを最適化し、Core Web Vitals を改善できます。
詳細
リソースのプリロードは、HTML link 要素を使用して、リソースが必要になる前にリソースを取得するようブラウザに指示する手法です。このガイドでは、この機能を使用してウェブアプリのパフォーマンスを向上させる方法について説明します。
詳細

ウェブ向けのブラウザレベルの画像遅延読み込み

画像の遅延読み込みは、ページを最初に読み込むときの帯域幅を節約するために効果的な手法です。このガイドでは、HTML loading を使用して画像の遅延読み込みを行う方法について説明します。
詳細

Chrome DevTools は、デベロッパーがウェブ アプリケーションをデバッグするためのツールスイートです。ウェブ アプリケーションのページの HTML と DOM のデバッグや、その他の関連するコンセプトのデバッグに役立つツールをいくつかご紹介します。
DevTools には、ウェブ アプリケーションの DOM の表示、編集、デバッグを行うことができる [Elements] パネルがあります。[要素] パネルの使い方については、こちらのガイドをご覧ください。
詳細
DevTools の [Elements] パネルでは、JavaScript によってトリガーされた DOM の変更をリッスンできます。この便利な機能を使用して、ウェブ アプリケーションの DOM の変更をデバッグする方法を説明します。
詳細
[カバレッジ] パネルは、ウェブ アプリケーションの HTML によって読み込まれている未使用の CSS コードや JavaScript コードを探すのに便利なツールです。このガイドでは、このツールの使用方法と、ウェブ アプリケーションのパフォーマンスを改善する方法を説明します。
詳細