HTML

すべてのWebページの構造

HTMLは、あらゆるWebページのコンテンツと構造を記述します。最初のタグから、アクセシブルなフォームやセマンティックなHTMLまで、このコースはWeb開発の他のすべての土台となる、揺るぎない基礎を身につけさせてくれます。

基礎

初級 - 基本を一歩ずつ

• HTMLとは何か？タグと属性HTMLとは何かを知り、タグと属性を見分けられるようになりましょう。
• テキストを構造化する：見出し、段落、リスト見出し、段落、リストの階層でテキストを整理できるようになりましょう。
• リンクと画像aタグとimgタグで、他のページへのリンクを作り、画像を表示しましょう。
• シンプルな表table、tr、th、tdタグで、データを行と列に整えて見せましょう。
• HTMLページの完全な骨組みdoctypeと、html、head、meta、bodyタグで、完全なWebページを組み立てましょう。

ステップアップ

中級 - 実践的なものを作る

• フォーム: input, label, select, textarea, button完全でアクセシブル、そして本番投入できるフォームを構築する。
• セマンティックHTML: 実際のページを構造化する名前のない div を、構造に意味を与えるタグに置き換える。
• メディア: audio, video, figure と figcaptionプラグインなしで、音声・動画・キャプション付きの図版を埋め込む。
• グローバル属性と data-*どこでも使える属性を活用し、独自のデータを HTML に格納する。
• ページをウェブに向けて整えるページの head を磨き上げる: title、description、favicon、そして安全な外部リンク。

応用

上級 - 高度なパターンとパフォーマンス

• アクセシビリティ: alt、見出しの階層、ARIA代替テキスト、スクリーンリーダーが実際にたどれる見出しの階層、そしてネイティブのHTMLでは足りない場面に限定したARIAの使い方をマスターします。
• 高度なフォームとネイティブのバリデーションrequired、pattern、inputmode、そしてConstraint Validation APIを活用し、外部ライブラリなしで堅牢なフォームを作ります。
• レスポンシブ画像: srcset、sizes、picturesrcsetとsizesで適切な画面に適切な画像を配信し、アートディレクションにはpictureをとっておき、遅延読み込みをマスターします。
• 技術的SEO: Open Graphと構造化データOpen Graphでソーシャルネットワークでのページのプレビューをコントロールし、JSON-LDのschema.orgでリッチリザルトを狙います。
• 読み込みパフォーマンス: defer、async、preload、prefetchdeferとasyncでスクリプトの実行順序を整え、preload、preconnect、prefetchでネットワークを操縦します。

マスター

エキスパート - 設計、内部構造、エッジケース

• HTMLからDOMへ: パースとエラー回復ブラウザがあらゆるHTMLストリームを、たとえ不正なものであっても、いかにして決定論的なDOMツリーへと変換するかを理解します。
• Web Components: カスタム要素、シャドウDOM、スロットカスタム要素のライフサイクル、シャドウDOMのカプセル化、そしてスロットによるコンテンツ投影を習得します。
• 国際化: lang、dir、charsetとUnicodeの罠lang、dir、そして文字エンコーディング宣言を賢く使い、Unicodeの正規化と方向性の罠を打ち破ります。
• HTML側のセキュリティ: XSS、sandbox、noopener、CSPマークアップに固有のXSSベクトルを特定し、HTMLのネイティブな防御手段(sandbox、noopener、Content Security Policy)を展開します。
• モダンなインタラクティブHTML: dialog、details、popover、contenteditableUIライブラリを、モダンなHTMLのネイティブなプリミティブ(モーダルダイアログ、排他的なアコーディオン、ポップオーバー、編集可能な領域)に置き換えます。