Ceeds Academy教材アプリ教材・症状語・タグで検索
索引グラフ試す
Web/フロントエンド基盤▸Web基礎

Web: HTML の基礎(要素・セマンティクス・文書構造)

knowledge所要 20分最新草稿
→次: Web: CSS の基礎(セレクタ・ボックスモデル・Flex/Grid)次: Web: アクセシビリティ(セマンティクス・ARIA・コントラスト)
意味グラフ(この教材と内容的に近い教材・1ネスト)
例え(Analogies)
HTML=建物の骨組み

HTMLは建物の骨組みと部屋の役割札。ここは玄関(header)、ここは居間(main)…と意味で区切る。骨組みがしっかりしていれば、案内(スクリーンリーダー)も検索(SEO)も迷わない。

概要

📍 Web/フロントエンド基盤 ▸ Web基礎 ▸ HTML | 種別: knowledge | facts_as_of 2026-06

公式ドキュメント — knowledge

🎞 スライド

HTML=文書の「構造と意味」を付ける

役割分担(テキスト図)

[HTML]──構造/意味──┐
[CSS] ──見た目─────┼──▶ 1つのページ
[JS] ──振る舞い───┘

セマンティック要素

header / nav / main / article / section / footer
=意味に合ったタグが a11y / SEO に効く

—
出典(sources)

MDN HTML ; HTML Living Standard ; 2026-06確認

確認問題(Review-Questions)
セマンティックHTMLの利点は?記述
基礎公式
解答・解説▾ 開く

意味が明確になり、アクセシビリティ・SEO・保守性が向上する。

見た目の指定はどこで行う?択一
基礎公式
解答・解説▾ 開く

CSS(HTMLは構造、JSは振る舞い)。

目次
例え概要公式ドキュメント出典確認問題
鮮度
最新
更新: 2026-06-15
次回棚卸し: 2028-06-15
周期: 24か月
版: HTML Living Standard(2026)

概要

HTML は文書の構造を意味付け(セマンティクス)するマークアップ。見出し/段落/リスト/リンク/フォームなどを意味に合ったタグで表す。見た目は CSS、振る舞いは JS。

公式ドキュメント準拠

  • 要素/属性。セマンティック要素:header/nav/main/article/section/footer。
  • 見出し階層(h1→h6)を正しく。画像は alt、フォームは label を付ける。
  • 意味に合ったタグが a11y / SEO に効く。

出典: MDN: HTML

🧭 誤解訂正集

よくある誤解 正しい理解
div だけで作れる セマンティクスが a11y/SEO に効く
見た目も HTML で付ける 見た目は CSS の役割
見出しは大きさで選ぶ h1→h6 は**階層(意味)**で選ぶ

📖 用語

  • HTML … 文書の構造と意味を付けるマークアップ言語。
  • セマンティクス(意味付け) … タグでその部分が何かを表すこと。
  • セマンティック要素 … header/nav/main/article 等の意味のあるタグ。
  • alt / label … 画像の代替テキスト/入力の説明ラベル。
  • a11y / SEO … アクセシビリティ/検索エンジン最適化。

✅ 確認の目安(can-do)

HTML(構造)・CSS(見た目)・JS(振る舞い)の役割分担とセマンティック要素を説明でき、**「この部分にどのタグが意味的に正しいか」**を判断できる。