HTMLとは
HTML（HyperText Markup Language）は、Webページの構造と意味を記述する言語です。ブラウザはHTMLを読み取り、見出し・段落・画像・リンクなどを画面に表示します。
このLessonのゴール
- HTML・CSS・JavaScriptの役割の違いを説明できる
- タグ・要素・属性という用語を理解する
- 小さなHTMLファイルを作り、ブラウザで表示できる
最終制作物とのつながり
このLessonでは、準備Chapterで作ったindex.htmlを使い、店舗サイトの文章へ意味のある構造を与える第一歩を学びます。
HTMLの役割
- コンテンツに意味を与える
- 文書の階層を表現する
- CSSやJavaScriptが働く土台を作る
HTMLは見た目を整えるための言語ではありません。意味のある構造を作ることが第一の役割です。
最初のHTML
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>はじめてのページ</title>
</head>
<body>
<h1>こんにちは</h1>
<p>はじめてのWebページです。</p>
</body>
</html>
要素は多くの場合、開始タグ（例：<p>）と終了タグ（</p>）で内容を囲みます。詳しくはMDN Web Docsでも確認できます。
| 技術 | 主な役割 |
|---|---|
| HTML | 構造・意味 |
| CSS | 見た目・配置 |
| JavaScript | 動き・振る舞い |
タグ・要素・属性
次のコード全体が「要素」です。href はリンク先を指定する「属性」です。
<a href="https://example.com">公式サイトを見る</a>
属性は開始タグの中に記述します。属性名と値を = でつなぎ、値はダブルクォートで囲むのが基本です。
実際に試してみよう
practice-site/index.htmlをVisual Studio Codeで開くbody内の見出しを店舗名に変更する- 段落を店舗の紹介文に変更する
- ファイルを保存してブラウザを再読み込みする
完了条件
- ブラウザに変更した店舗名と紹介文が表示される
- HTML、CSS、JavaScriptの役割の違いを説明できる
- タグ、要素、属性の違いをコードから確認できる
まとめ
HTMLは見た目ではなく、コンテンツの構造と意味を記述します。このあと、HTML文書全体の基本構造を整えます。
ファイル名の拡張子が
.htmlになっていることを確認しましょう。.html.txtではHTMLとして開けません。
CHECK QUIZ