HTMLとは？見出し・段落・箇条書きで最初のページを作る

Q: ブラウザで開くと日本語が文字化けします。

コードの head の中に meta charset="UTF-8" が入っているか、メモ帳で保存するときの文字コードが UTF-8 になっているかを確認してください。どちらかがずれていると、日本語が記号の列のように表示されます。

結論: HTMLは「文章に意味の札を付ける」書き方

POINTHTML＝文章に「これは見出し」「これは段落」という意味の札（タグ）を付けるための書き方。札を付けると、ブラウザがそれに合わせて見た目を変えてくれる。

Webページは、ブラウザ（ChromeやEdge）がテキストファイルを読んで画面に表示したものです。メモ帳に「こんにちは」と書いて保存し、ブラウザで開くと、その文字がそのまま出ます。Webページの正体は、ただのテキストファイルなのです。

ただ、文字を並べただけでは「どこが見出しで、どこが本文か」がブラウザに伝わりません。そこで使うのがタグです。荷物に「割れ物」「上積み厳禁」の札を貼るように、文章の一部を <h1> と </h1> で挟んで「ここからここまでが見出し」と伝えます。HTMLは、この札の付け方を決めたルールです。

今回の動画で覚えるタグは3つだけ。見出しの h1〜h6、段落の p、箇条書きの ul と liです。まずは下のコードを実際に動かして、「札を付けると画面がこう変わる」を体験してみてください。

今日のコード（コピーして使えます）

動画の最後にできあがったコードです。右上の「コードをコピー」ボタンを押すと、全文がクリップボードに入ります。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>はじめてのページ</title>
</head>
<body>
  <h1>はじめてのページ</h1>
  <h2>自己紹介</h2>
  <p>IT業界をやさしく案内します。</p>
  <p>これは1行目。<br>
  これは2行目。</p>
  <ol>
    <li>開発の流れ</li>
    <li>職種図鑑</li>
    <li>用語集</li>
    <li>学び方</li>
  </ol>
</body>
</html>

ブラウザで開くと、大きな見出し「はじめてのページ」、ひとまわり小さい見出し「自己紹介」、段落が2つ、番号付きのリストが4項目、という画面になります。動画では箇条書きを ul で作ってから ol に変えたので、このコードは変えたあとの状態です。点付きのリストに戻したいときは、<ol> と </ol> を <ul> と </ul> に書き換えてください。

試し方: メモ帳に貼って index.html で保存するだけ

POINT特別なソフトはいらない。メモ帳に貼る → 名前を index.html にして保存 → ダブルクリック、の3手順。

メモ帳だけで、自分のパソコンにWebページが作れる。

上の「コピー」を押し、メモ帳を開いて貼り付けます。
「ファイル」→「名前を付けて保存」。ファイル名を index.html、ファイルの種類を「すべてのファイル」、文字コードを UTF-8 にして、デスクトップなど分かりやすい場所に保存します。
保存した index.html をダブルクリックすると、ブラウザが開いてページが表示されます。
メモ帳で文字を書き換えて上書き保存し、ブラウザを更新（F5）すると、変更がすぐ画面に反映されます。動画と同じ「打ったら変わる」体験ができます。

ファイル名が index.html.txt になっていませんか？メモ帳は保存時に .txt を付けることがあります。ダブルクリックしてもタグの文字がそのまま表示される場合は、拡張子を確認して .txt を消してください。

コードの読み方: 骨組み・見出し・段落・箇条書き

POINT見るところは2つ。head は「ページの設定」、body は「画面に出る中身」。中身は body の中に書いていく。

最初の数行は毎回同じ定型文です。覚えなくてかまいません。

<!DOCTYPE html> と <html>: 「これはHTMLの文書です」という宣言。
<head>: ページの設定。<title> に書いた文字は、画面ではなくブラウザのタブに出ます。<meta charset="UTF-8"> は日本語を正しく表示するためのおまじないです。
<body>: 画面に出る中身。今回打ったタグは全部この中にあります。

body の中で使った3種類のタグが、今回の本題です。

見出し <h1>〜<h6>: 文字が大きく太くなります。h1がいちばん大きく、数字が大きいほど小さい見出しになります。本の「章」と「節」のような階層です。
段落 <p>: 文章のひとまとまり。段落ごとに上下にすき間が空きます。
箇条書き <ul> と <li>: ul で全体を挟み、中に li で1項目ずつ書きます。ul を <ol> に変えると番号付きになります。

タグは基本的に開始タグと終了タグのペアで中身を挟みます（<p> 〜 </p>）。ただし改行の <br> のように、挟まずに1つだけ置くタグもあります。書き方の細かいルールは、HTML・CSS・JavaScriptの用語ページもあわせてどうぞ。

よくあるつまずき: 改行が効かない・文字化けする

エディタで改行しても、画面では改行されません。ブラウザはファイルの改行を無視するからです。改行したい場所には <br> を入れます。今回のコードの「これは1行目。」の後ろにあるのがそれです。

日本語が記号の列のように文字化けするときは、<meta charset="UTF-8"> が入っているか、メモ帳で保存したときの文字コードが UTF-8 になっているかを確認してください。どちらかがずれると起きます。

タグを閉じ忘れる（</h1> を書き忘れる）と、それ以降の文字がぜんぶ見出しの大きさになります。「なぜか全部大きい」ときは、閉じタグを疑ってください。

よくある質問

HTMLを書くのに特別なソフトは必要ですか？

いりません。Windowsに入っているメモ帳で十分です。保存するときにファイル名を index.html にして、文字コードを UTF-8 にするだけで、ダブルクリックすればブラウザで開けます。慣れてきたら VS Code などの無料エディタを使うと、色分けや入力補助が効いて楽になります。

保存したファイルをダブルクリックしても、タグの文字がそのまま表示されます。

ファイルの拡張子が .txt のままになっている可能性が高いです。メモ帳の保存画面で「ファイルの種類」を「すべてのファイル」にして、ファイル名を index.html にしてください。すでに index.html.txt という名前で保存されている場合は、名前の変更で .txt を消します。

ブラウザで開くと日本語が文字化けします。

コードの head の中に <meta charset="UTF-8"> が入っているか、メモ帳で保存するときの文字コードが UTF-8 になっているかを確認してください。どちらかがずれていると、日本語が記号の列のように表示されます。

HTMLだけで文字の色や配置は変えられますか？

色や配置などの見た目は CSS の役割です。HTMLは「どこが見出しで、どこが段落か」という文章の意味を決め、CSSがその見た目を決めます。まずはHTMLでページの骨組みを作れるようになるのが最初の一歩です。

HTMLとは？3つのタグで最初のWebページを作る