HTMLのきほん📄
HTMLは、Webページの「骨組み」を作る言語だよ。見出しはどこ、文章はどこ、画像はどこ……というのを、タグを使ってブラウザに伝えていくよ。
🏠 HTMLってなに？
HTML（HyperText Markup Language）は、家づくりでいう「柱」や「骨組み」にあたる部分。この上にCSSで壁紙や家具（見た目）を、JavaScriptで動く仕掛け（動き）を足していくよ。まずはこの骨組みの作り方から覚えよう。
HTMLは「タグ」で文章を囲んで、その部分の役割を伝える。
<p>これは段落だよ</p>
<p>を「開始タグ」、</p>を「終了タグ」と呼ぶよ。この2つで文章をはさんだかたまりを「要素（element）」と呼ぶよ。
タグの中に
href="..." みたいに追加情報を書くことがあるよ。これを「属性（attribute）」と呼ぶよ。後で出てくる<a href="URL">のhrefがそれだよ。
ページ全体の骨組み
HTMLファイルには、お決まりの書き出しがあるよ。まずはこれを丸ごと覚えちゃおう。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>ページのタイトル</title>
</head>
<body>
<p>ここに表示したい内容を書く</p>
</body>
</html><!doctype html>… 「このファイルはHTML5で書いてるよ」という宣言。おまじないとして最初に1回だけ書く。<html lang="ja">… ページ全体を囲むタグ。lang="ja"で「日本語のページだよ」とブラウザや検索エンジンに伝える。<head>… 画面には直接表示されない、ページの設定を書く場所。文字コードやタイトルなど。<meta charset="UTF-8" />… 文字コードの指定。これを忘れると日本語が文字化けすることがあるよ。<body>… 実際に画面に表示される中身を書く場所。ここから下がメインコンテンツ。
よく使うタグ
まずはこの7つを覚えれば、簡単なページは作れちゃう。
| タグ | 役割 |
|---|---|
<h1>〜<h6> | 見出し。数字が小さいほど大きい見出し（h1は1ページに1回が基本） |
<p> | 段落（ふつうの文章のかたまり） |
<a href="..."> | リンク。href属性にリンク先を書く |
<img src="..." alt="..."> | 画像。altは画像が表示できないときの代わりの説明文（超重要） |
<ul> / <li> | 順番のないリスト（箇条書き）と、その項目 |
<ol> / <li> | 順番のあるリスト（番号つき）と、その項目 |
<button> | クリックできるボタン |
<img>のような、終了タグを書かない・書けないタグを「空要素（void element）」と呼ぶよ。ほかに<br>（改行）や<meta>もこの仲間。altを書き忘れると、目が不自由な人が使う「スクリーンリーダー」に画像の内容が伝わらなくなっちゃうから、画像には必ずaltをつける習慣をつけよう。
セマンティックHTML
HTMLのタグには、それぞれ役割があるよ。そのブロックが何なのか、タグの名前じたいで伝えられるようになっているんだ。
たとえば「ここはナビゲーションだよ」「ここは記事本文だよ」というのをタグの名前で伝えると、ブラウザ・検索エンジン・スクリーンリーダーがページの構造を理解しやすくなる。これを「セマンティック（意味づけされた）HTML」と呼ぶよ。
<header> | ページ or セクションの先頭（ロゴやナビなど） |
<nav> | ナビゲーション（メニュー）のかたまり |
<main> | そのページの主役となるメインコンテンツ（1ページに1つ） |
<section> | 意味のあるまとまり（見出しとセットで使うことが多い） |
<article> | それ単体で完結する記事・投稿など |
<footer> | ページ or セクションの末尾（著作権表示やリンクなど） |
このサイト自身も、この構造で作られているよ（ページのソースを見てみてね）。
フォームのきほん
ユーザーが何かを入力する場所を作るタグたち。
<form>… 入力欄をまとめる箱<label>… 入力欄の名前（ラベル）。for属性で入力欄と紐づける<input>… 1行の入力欄。type属性で種類が変わる（text、email、passwordなど）<button>… 送信ボタンなど
labelのfor属性と、inputのid属性を同じ値にすると、ラベルの文字をクリックしただけで入力欄にカーソルが移動するようになるよ。地味だけど大事な使いやすさ（アクセシビリティ）の工夫。
⚠️ ありがちなミス
- 閉じタグを書き忘れる（
<p>を書いたら</p>も忘れずに） - 属性の値を
"（ダブルクォート）で囲み忘れる <img>にaltをつけ忘れる- タグの入れ子が交差する（
<b><i>text</b></i>はNG、<b><i>text</i></b>が正解）