HTML
HTML はウェブのドキュメント層で、ウェブページを有意義なものにするために必要な構造とコンテンツを提供します。ここでは、ウェブの重要な要素である HTML に関する知識を深めるのに役立つ、コース、記事、コレクションなどの HTML コンテンツやその他の有用な情報をご覧いただけます。
次のページに進んでください。
HTML の学習
HTML を初めてご利用になる場合は、Google では、始めるにあたって役立つ包括的なコースを用意しています。
その他のコース
HTML の特定のトピックについて詳しくは、以下のコースをご覧ください。
HTML で新たに利用可能になったベースライン機能
すべての主要なブラウザ エンジンで新たに利用可能になった最新の HTML 機能について学びます。
HTML とユーザー補助
ユーザー補助機能が充実したウェブ アプリケーションを構築するために役立つ HTML のパターンとコンセプトについて学びます。
HTML とパフォーマンス
ウェブ アプリケーションを高速化するための HTML ベースの概念とパターンについて学習します。
Chrome DevTools で HTML と DOM をデバッグする
Chrome DevTools を使用してウェブ アプリケーションの HTML や DOM をデバッグする方法について説明します。
学習コース
HTML を初めて使用する場合は、
HTML を初めて使用する場合は、「HTML の学習」コースでは、構造上の問題、メタデータ、セマンティクス、スキルの向上に役立つその他のトピックなど、HTML の仕組みの基礎を学びます。
他のコースもチェックしましょう。
HTML についてさらに学びたい場合は、ウェブ アプリケーションの改善に役立つ高度なトピックについて学べる以下のコースをご覧ください。
フォーム
HTML フォームを使用すると、ユーザーはウェブ アプリケーションに入力を与えることができます。本コースでは、HTML フォームを効果的に使用するために必要な情報をすべて学習します。
画像
画像はウェブでよく使用されますが、
img
要素を使用するだけではありません。このコースでは、ウェブ上の画像の使い方について知っておくべきことをすべて学習します。
ユーザー補助
ユーザー補助はウェブ プラットフォームのすべての部分にわたりますが、ユーザー補助対応の HTML の記述は、ユーザー補助対応のウェブ アプリケーションを構築するうえで不可欠です。このコースでは、ユーザー補助対応のマークアップを記述するために必要な知識をすべて学習します。
ベースライン 新規の HTML 機能
ベースラインは、ウェブ プラットフォームの機能をすべての主要なブラウザ エンジンで安全に使用できるタイミングをウェブ デベロッパーに知らせます。Baseline で新たに利用可能になった HTML 機能の一部を以下に示します。
HTML とユーザー補助
HTML は、ユーザー補助対応ウェブ アプリケーションを構築するうえで基本的な要素です。このセクションでは、HTML を使用してユーザーがアクセス可能なウェブ アプリケーションを作成する方法について、参考になる記事やリソースを紹介します。
見出しとランドマーク
ヘディングとランドマークに適切な要素を使用すると、支援技術を使用しているユーザーのナビゲーション エクスペリエンスを大幅に改善できます。
セマンティック HTML を使用してキーボードでの作業を容易にする
正しいセマンティック HTML 要素を使用すると、キーボード アクセスのほとんどまたはすべてを満たすことができます。タブインデックスを調整する時間を減らして、ユーザーの満足度を高めましょう。
キーボード アクセスの基礎
一時的または永続的な運動機能障がいのあるユーザーの多くは、キーボード ショートカットを使用してアプリをより効率的に操作しています。アプリに適切なキーボード ナビゲーション戦略があると、すべてのユーザーにとってより良いエクスペリエンスが創出されます。
ラベルと代替テキスト
スクリーン リーダーで音声 UI をユーザーに提示するには、意味のある要素に適切なラベルまたは代替テキストを設定する必要があります。ラベルまたは代替テキストは、ユーザー補助機能用の名前を要素に付与します。これは、ユーザー補助ツリーで要素のセマンティクスを表現するための重要なプロパティの 1 つです。
HTML とパフォーマンス
HTML の使用方法は、ウェブ アプリケーションのパフォーマンスに影響する可能性があります。このセクションでは、HTML を使用してウェブ アプリケーションを高速化する方法に関する記事やリソースを紹介します。
ブラウザのプリロード スキャナと戦わない
ブラウザのプリロード スキャナは、ブラウザがリソースを通常よりも早く検出するために使用する、特殊な HTML パーサーです。ウェブ アプリケーションのパフォーマンスにどのように役立つか、また、その影響を受けないようにする方法について説明します。
Fetch Priority API を使用してリソースの読み込みを最適化する
Fetch Priority API は、
fetchpriority
HTML 属性を使用して、ブラウザに対するリソースの相対的な優先度を示します。これにより、読み込みを最適化し、Core Web Vitals を改善できます。
重要なアセットをプリロードして読み込み速度を改善する
リソースのプリロードは、HTML
link
要素を使用して、リソースが必要になる前にリソースを取得するようブラウザに指示する手法です。このガイドでは、この機能を使用してウェブアプリのパフォーマンスを向上させる方法について説明します。
ウェブ向けのブラウザレベルの画像遅延読み込み
画像の遅延読み込みは、ページを最初に読み込むときの帯域幅を節約するために効果的な手法です。このガイドでは、HTML
loading
を使用して画像の遅延読み込みを行う方法について説明します。
Chrome DevTools で HTML と DOM をデバッグする
Chrome DevTools は、デベロッパーがウェブ アプリケーションをデバッグするためのツールスイートです。ウェブ アプリケーションのページの HTML と DOM のデバッグや、その他の関連するコンセプトのデバッグに役立つツールをいくつかご紹介します。
DOM の表示と変更のスタートガイド
DevTools には、ウェブ アプリケーションの DOM の表示、編集、デバッグを行うことができる [Elements] パネルがあります。[要素] パネルの使い方については、こちらのガイドをご覧ください。
DOM の変更をリッスンする
DevTools の [Elements] パネルでは、JavaScript によってトリガーされた DOM の変更をリッスンできます。この便利な機能を使用して、ウェブ アプリケーションの DOM の変更をデバッグする方法を説明します。
ウェブ アプリケーションの HTML によって読み込まれた未使用のコードを見つける
[カバレッジ] パネルは、ウェブ アプリケーションの HTML によって読み込まれている未使用の CSS コードや JavaScript コードを探すのに便利なツールです。このガイドでは、このツールの使用方法と、ウェブ アプリケーションのパフォーマンスを改善する方法を説明します。