HTMLのきほん📄
HTMLは、Webページの「骨組み」を作る言語だよ。見出しはどこ、文章はどこ、画像はどこ……というのを、タグを使ってブラウザに伝えていくよ。
今日は「文字が表示された！」まででOK
このページをぜんぶ覚えなくてもだいじょうぶ。まずはコードの文字を1つ変えて、右の画面も変わることを確かめよう。
このページで出てくるものを見る
- 文字を表示する
- タグで「見出し」「文章」などの役割をつける
- リンク、画像、リストを置く
- ページの大きなまとまりを作る
- 入力できる場所を作る
左のコードにある「こんにちは」を、好きなあいさつに変えてみてね。
右の画面が変わった？ それだけで、もうHTMLを1行書けたよ！
🏠 HTMLってなに？
HTML（HyperText Markup Language）は、家づくりでいう「柱」や「骨組み」にあたる部分。この上にCSSで壁紙や家具（見た目）を、JavaScriptで動く仕掛け（動き）を足していくよ。まずはこの骨組みの作り方から覚えよう。
HTMLは「タグ」で文章を囲んで、その部分の役割を伝える。
<p>これは段落だよ</p>
<p>を「開始タグ」、</p>を「終了タグ」と呼ぶよ。この2つで文章をはさんだかたまりを「要素（element）」と呼ぶよ。
href="..." みたいに追加情報を書くことがあるよ。これを「属性（attribute）」と呼ぶよ。後で出てくる<a href="URL">のhrefがそれだよ。
HTMLファイルには、お決まりの書き出しがあるよ。丸ごと覚えなくてOK。今は<body>の中が画面に出る、とわかれば十分！
<!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>… 実際に画面に表示される中身を書く場所。ここから下がメインコンテンツ。
ここからは1つずつ練習するよ。いちばん上だけ開いてあるので、できたら次へ進んでね。
1見出しをつける<h1>〜<h6>
見出しは、本やノートのタイトルと同じ。<h1>がいちばん大きな見出しで、数字が増えると小さな見出しになるよ。
2文章を書く<p>
ふつうの文章は<p>ではさむよ。文章が2つなら、<p>も2組に分けよう。
3リンクを置く<a>
別のページへ移動できる文字がリンク。hrefの中に行き先を、タグのあいだに画面へ出す文字を書くよ。
4画像を置く<img>
srcに画像の場所を書くと、その画像が出てくるよ。altには、画像が見えないときにも伝わる説明を書くよ。
<img>には、うしろの</img>を書かないよ。まずは、このタグだけ形がちがうと覚えておけばOK！5箇条書きを作る<ul>と<li>
<ul>がリスト全体の箱で、<li>が1個ぶんの項目。項目を増やすときは、<li>...</li>を丸ごとコピーするよ。
6番号つきリストを作る<ol>と<li>
順番が大事なときは<ol>を使うよ。ブラウザが1、2、3の番号を自動でつけてくれる。
7ボタンを置く<button>
押せるものを置くときは<button>。今は置くだけでOK。押したときの動きはJavaScriptのページで作るよ。
作りたいものから、HTMLのタグを探す
| タグ | 役割 |
|---|---|
<h1>〜<h6> | 見出し |
<p> | ふつうの文章 |
<a href="..."> | リンク |
<img src="..." alt="..."> | 画像 |
<ul> / <li> | 箇条書き |
<ol> / <li> | 番号つきリスト |
<button> | ボタン |
まとめへ進む前に、コードが右へずれている理由を知っておこう。
<ul>の要素の中に、<li>の要素が入っているね。こんなふうに、要素の中へ別の要素を入れることをネストというよ。外側を「親要素」、中にあるものを「子要素」と呼ぶこともあるよ。
<ul> 外側の箱
<li>...</li> 1個目<li>...</li> 2個目</ul> 箱はここまで
中に入っている行の先頭へ、半角スペースを2つ入れるよ。画面の見た目は変わらないけれど、どこからどこまでが箱の中なのか見つけやすくなる。
<ul>
<li>プリン</li>
<li>ひなたぼっこ</li>
</ul>1つずつ練習したタグを、こんどは一緒に使ってみよう。まずはリストを1個増やすだけでOK！
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>が正解）