この記事は、プログラミングをまったく知らない人が「AI に頼らず、自分の手でアプリやサイトを作れる」ようになるための連載（全85本）の第4回です。毎日1本ずつ公開します。
この記事でできるようになること
見出し・段落・リンク・画像を使って、ブラウザで開ける「1枚のページ」を自分で書けるようになります。
説明：HTML は「文章に名札をつける」書き方
Web ページの中身は、文章にタグという名札をつけたものです。名札のつけ方の決まりが HTML（エイチティーエムエル）です。
たとえるなら、本の原稿に「ここは大見出し」「ここは本文」とえんぴつで書き込む作業です。ブラウザ（Chrome や Safari）は、その書き込みを読んで、見出しは大きく、本文はふつうの大きさで表示します。
タグの形
<p>こんにちは</p>
-
<p>は開始タグ（ここから本文、という合図） -
</p>は終了タグ（ここまで、という合図。/がつく） - 間の「こんにちは」が中身
開始タグから終了タグまでをまとめて要素と呼びます。
今日使うタグ
| タグ | 意味 |
|---|---|
<h1> 〜 <h6>
|
見出し（h1 が一番大きい。ページに1つが目安） |
<p> |
段落（文章のまとまり） |
<a href="..."> |
リンク |
<img src="..." alt="..."> |
画像（終了タグはない） |
href や src のように、タグの中に書く補足を属性と言います。<a> の href は「行き先」、<img> の src は「画像の場所」、alt は「画像が出なかったときや、目の不自由な人に読み上げられるときの説明文」です。
ページ全体の骨組み
どのページも、この形から始めます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ページの名前</title>
</head>
<body>
ここに見せたいものを書く
</body>
</html>
-
<!DOCTYPE html>: 「これは HTML だよ」という宣言 -
<html lang="ja">: 全体を囲む。lang="ja"は日本語のページという意味 -
<head>: 画面には出ない準備の情報（タブに出るタイトルなど） -
<meta charset="UTF-8">: 文字コードの指定。これがないと日本語が文字化けすることがある -
<body>: 画面に出る中身
字下げ（インデント）は、見やすくするためのものです。スペース2つで統一しましょう。
手を動かす
コピーせず、自分で打ってください。
1. フォルダを作って VS Code で開く
cd ~
mkdir html-practice
cd html-practice
code .
2. index.html を作る
サイドバーで新しいファイルを作り、名前を index.html にします。index.html は「そのフォルダの入り口のページ」によく使われる名前です。
3. 骨組みを打つ
VS Code で ! を打って Tab を押すと、骨組みの雛形が出ます。まずは雛形に頼らず、上の「ページ全体の骨組み」を1回、自分の手で打ってみてください。そのあと <body> の中を次のように書きます。
<h1>わたしの最初のページ</h1>
<p>こんにちは。これは自分で書いた HTML です。</p>
<h2>好きなもの</h2>
<p>音楽をつくるのが好きです。</p>
<p>
<a href="https://qiita.com/">Qiita</a> で学んだことを書いています。
</p>
<img src="cat.png" alt="ねこの写真" width="200">
<title> は わたしの最初のページ にします。Cmd + S で保存します。
4. ブラウザで開く
ターミナル（VS Code の中で Ctrl + `）で次を打ちます。
open index.html
ブラウザが立ち上がり、ページが表示されます。見出しは大きく、リンクは青い下線つきで出ます。
5. 画像を置く
好きな画像を1枚用意し、cat.png という名前にして、index.html と同じフォルダに入れます。src="cat.png" は「同じフォルダの cat.png」という意味です。保存して、ブラウザで Cmd + R（再読み込み）を押すと画像が出ます。
画像を置く前は、画像の場所に alt の「ねこの写真」の文字が出たり、壊れた画像のマークが出たりします。これが「画像が出ないとき」の姿です。
練習問題
答えを見ずに解いてみてください。
-
<h2>を使って、見出し「作りたいもの」を足し、その下に段落を1つ書いてください。 - 好きなサイトへのリンクを1つ足してください。リンクの文字は「公式サイト」にします。
-
<title>を書き換えて、ブラウザのタブの名前が変わることを確かめてください。
よくあるエラーと直し方
HTML は、書き間違えてもエラーメッセージが出ません。ブラウザが気を利かせて、できるだけ表示してくれるからです。そのかわり、表示がおかしいときは自分で見つけます。
終了タグの閉じ忘れ
<p>本文 のように </p> を忘れると、見た目が崩れたり、あとの文章に思わぬ装飾が移ったりすることがあります。表示がおかしいときは、まず「開始タグと終了タグの数が合っているか」を数えます。VS Code でタグの上にカーソルを置くと、対応する相手がわかる目印が出ます。
日本語が文字化けする
<meta charset="UTF-8"> を忘れていないか、確認します。ファイル自体も UTF-8 で保存する必要がありますが、VS Code は最初から UTF-8 で保存します。
画像が出ない
- ファイル名の大文字・小文字、拡張子（
.pngか.jpgか）が合っているか - 画像が
index.htmlと同じフォルダにあるか -
srcの中の名前にスペースが入っていないか
href に書いたのに飛ばない
href の = の後ろを " で囲み忘れていないか確認します。
答え
1.
<h2>作りたいもの</h2>
<p>音楽の仲間が見つかるアプリを作りたいです。</p>
2.
<a href="https://example.com/">公式サイト</a>
行き先は好きなサイトのアドレスに変えてください。
3. <title> の中身を書き換えて保存し、ブラウザで再読み込みすると、タブの名前が変わります。
次回予告
次回は「#05 HTML のフォームと意味のあるタグ」です。入力欄とボタンを作ります。