HTML の学習へようこそ。

ウェブ デベロッパー向けのこの HTML コースでは、初心者から上級者まで、デベロッパーが HTML をしっかりと理解できるように概要を説明します。

ハイパーテキスト マークアップ言語(HTML)はウェブの基盤であり、ウェブブラウザに表示されるコンテンツとそのコンテンツの構造を提供します。

このページの PDF 版または印刷版を読んでいる場合を除き、このコンテンツはさまざまな HTML 要素とテキストで構成されています。HTML はウェブのコンテンツ レイヤです。HTML 要素は、ドキュメント オブジェクト モデルを構成するノードです。

カスケーディング スタイルシートは、ページのルック アンド フィール、つまりプレゼンテーション レイヤを提供します。JavaScript は動作レイヤであり、ドキュメント内のオブジェクトを操作するためによく使用されます。JavaScript フレームワークで構築されたサイトは、実際には HTML を操作しているだけです。そのため、スクリプトが簡単に解析でき、支援技術が理解できるような方法で HTML をマークアップすることが重要です。

つまり、最新の標準に沿って HTML コードを記述します。

学習内容

ウェブ デベロッパー向けのこの HTML コースでは、初心者から上級者まで、デベロッパーが HTML をしっかりと理解できるように概要を説明します。HTML を初めて使用する方は、構造的に健全なコンテンツを作成する方法を学びます。ウェブサイトの構築に長年携わってきた方でも、このコースで、これまで気づかなかった知識のギャップを埋めることができるかもしれません。

このシリーズでは、MachineLearningWorkshop.com の構造を構築します。このシリーズの作成で、マシンが損傷することはありませんでした。

これは完全なリファレンスではありません。各セクションでは、セクションのトピックを簡単な説明と例で紹介し、さらに詳しく調べる機会を提供します。MDNWHATWG 仕様などのトピック参照や、その他の web.dev 記事へのリンクがあります。このコースはアクセシビリティに関するものではありませんが、各セクションにはアクセシビリティに関するベスト プラクティスと具体的な問題が記載されており、トピックをさらに詳しく掘り下げるためのリンクも含まれています。各セクションには、理解度を確認するための簡単なテストがあります。

このコースでは、次のことを学びます。

HTML の概要

HTML の主なコンセプトの簡単な紹介。

ドキュメント構造

しっかりとした基盤で HTML ドキュメントを構造化する方法を学習します。

メタデータ

メタタグを使用してドキュメントに関する情報を提供する方法。

セマンティック HTML

ドキュメントのコンテンツを説明するために正しい HTML 要素を使用する。

見出しとセクション

セクショニング要素を正しく使用してコンテンツに意味を与える方法。

属性

さまざまなグローバル属性と、特定の HTML 要素に固有の属性について説明します。

テキストの基本

HTML を使用してテキストの書式を設定する方法。

リンクについて知っておくべきこと。

リスト

リストやその他のコンテンツのグループ化方法。

ナビゲーションはサイトやアプリの重要な要素であり、HTML から始まります。

テーブル

表を使用して表形式のデータをマークアップする方法を理解する。

Google フォーム

HTML のフォームの概要。

画像

HTML の画像の概要。

音声と動画

音声や動画などの HTML メディアを操作する方法について説明します。

テンプレート、スロット、シャドウ

テンプレート、スロット、シャドウの説明。

HTML API

JavaScript を使用して HTML 情報を公開し、操作する方法を学びます。

フォーカス

HTML ドキュメントでフォーカス順序を管理する方法。

その他のインライン テキスト要素

テキストのマークアップに使用される要素の範囲の概要。

詳細と概要

非常に便利な詳細要素と概要要素の仕組みと、それらを使用する場所について説明します。

Dialog

<dialog> 要素は、HTML であらゆる種類のダイアログを表すのに便利な要素です。その仕組みについて説明します。

まとめと次のステップ

最後に、その他のリソースをご紹介します。

それでは、HTML を学習する準備はできましたか?さっそく始めましょう