HTMLとは何か — Webページの構造を作る最初の言語 - HTML入門 — Webページの構造とタグのチートシート

HTMLは、Webページの構造を作るためのマークアップ言語です。見出し、段落、リンク、画像、フォームなど、「この情報は何なのか」をブラウザや検索エンジン、支援技術に伝える役割を持ちます。

CSSが見た目を整え、JavaScriptが動きを加えるのに対して、HTMLはページの土台です。ReactやNext.jsを使う場合でも、最終的にブラウザへ届くのはHTMLです。

HTMLは「見た目を作る言語」ではなく、「情報の意味と構造を伝える言語」です。

学習者

ReactやNext.jsを使うなら、HTMLを細かく覚えなくても大丈夫ですか？

先生

JSXはHTMLに似ていますが、土台の考え方はHTMLです。見出し、フォーム、アクセシビリティを理解しているほど、ReactのUIも正しく作れます。

この本の位置づけ

この本は、HTMLクイズカテゴリ html-basic のインプット教材として使えるように作ります。資格対策だけに寄せすぎず、Web制作・フロントエンド開発・React学習の前提になる知識を中心に扱います。

参考にする観点は次の3つです。

観点	取り入れ方
HTML5プロフェッショナル認定試験レベル1	Web基礎、HTML要素、フォーム、レスポンシブ前提の基礎を意識する
Webクリエイター能力認定試験 HTML5対応	実際にページを作る流れ、画像・表・フォーム・アクセシビリティを意識する
MDN / WHATWG HTML Standard	タグや属性の一次情報として参照する

<article>
  <h1>お知らせ</h1>
  <p>新しい記事を公開しました。</p>
  <a href="/news">一覧を見る</a>
</article>

html

このHTMLにCSSを当てると見た目が整い、JavaScriptを加えると操作に応じた動きを付けられます。

各章では、説明のあとにタグや属性のチートシートを置きます。タグを丸暗記するより、「どんな意味を持つタグか」「どの属性と一緒に使うか」「どんな使い方を避けるか」をセットで覚える方が実務で役に立ちます。

次章では、HTML文書の最小構造を作り、doctype、html、head、body の役割を整理します。