Web のきほん

HTML のきほん：最初の Web ページを作る

HTML とは何か、最小のページの作り方、よく使うタグ、リンクと画像、正しく書くためのルール。手を動かしながら最初のページを完成させます。

更新日：2026-09-25

この記事で分かること

HTML が「何をするもの」なのか
自分のパソコンで HTML ファイルを作り、ブラウザで表示する方法
見出し・段落・リンク・画像・リストなど、よく使うタグの書き方
間違えやすいポイントと、正しい書き方のルール

所要時間の目安は 60 分です。最後まで進めると、自己紹介ページが1枚できあがります。

HTML とは

HTML（HyperText Markup Language）は、Web ページの「構造」を書くための言語です。文章に対して「ここは見出し」「ここは段落」「ここはリンク」と印（タグ）をつけていきます。

見た目の飾りつけ（色や大きさ）は CSS、動き（ボタンを押したら何かが起きる）は JavaScript の担当です。HTML はあくまで「骨組み」。まずはここを固めます。

準備：エディタとフォルダ

Visual Studio Code（無料）をインストールします。
デスクトップなどに mysite というフォルダを作ります（半角英数字にしてください）。
VS Code で「ファイル → フォルダーを開く」から mysite を開きます。

これで準備完了です。

いちばん小さな HTML

VS Code で index.html という名前のファイルを作り、次の内容を 自分で打ち込んで 保存してください（コピーせずに打つのが上達の近道です）。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>はじめてのページ</title>
</head>
<body>
  <h1>こんにちは</h1>
  <p>これは私がはじめて作ったページです。</p>
</body>
</html>

保存したら、エクスプローラー（Mac は Finder）で index.html をダブルクリックしてください。ブラウザに「こんにちは」と表示されれば成功です。

それぞれの行の意味

行	意味
`<!DOCTYPE html>`	「これは HTML です」という宣言。最初に必ず書きます
`<html lang="ja">`	ページ全体。`lang="ja"` は「日本語のページ」という意味
`<head>`	ページの設定を書く場所。画面には表示されません
`<meta charset="UTF-8">`	文字コードの指定。これがないと日本語が文字化けします
`<title>`	ブラウザのタブに出る名前
`<body>`	画面に表示される中身はすべてここに書きます
`<h1>`	いちばん大きな見出し
`<p>`	段落（paragraph）

タグのルール

HTML のタグには、いくつかの決まりがあります。

タグは <h1> で始まり、</h1> で終わります。終わりのタグには / がつきます。
開始と終了の間に、中身を書きます：<p>こんにちは</p>
タグは入れ子にできます。ただし、開いた順の逆に閉じる のがルールです。

<!-- 正しい -->
<p>これは<strong>大事</strong>です</p>

<!-- 間違い（閉じる順番が逆） -->
<p>これは<strong>大事</p></strong>

<br> や <img> のように、終了タグがないものもあります。
半角スペースや改行はいくつ入れても、画面上では1つ分として扱われます。

よく使うタグ

見出し：h1〜h6

<h1>ページの題名（1ページに1つ）</h1>
<h2>章の見出し</h2>
<h3>節の見出し</h3>

数字が小さいほど大きな見出しです。「大きく表示したいから h1」ではなく、文章の階層 で選びます。

段落と改行

<p>段落は p で囲みます。</p>
<p>行の途中で<br>改行したいときは br を使います。</p>

リンク：a

<a href="https://www.google.com/">Google を開く</a>
<a href="about.html">自己紹介ページへ</a>

href に移動先を書きます。同じフォルダにある別のファイルなら、ファイル名だけで指定できます。

画像：img

<img src="cat.jpg" alt="ひなたぼっこをする猫">

src に画像ファイルの場所、alt に「画像が表示できなかったときの説明文」を書きます。alt は目の不自由な方の読み上げにも使われる、大事な属性です。画像ファイルは index.html と同じフォルダに置いてください。

リスト：ul / ol / li

<ul>
  <li>りんご</li>
  <li>みかん</li>
</ul>

<ol>
  <li>粉を混ぜる</li>
  <li>焼く</li>
</ol>

ul は順番のない箇条書き（点）、ol は順番のある箇条書き（数字）です。中身の1項目が li です。

強調：strong / em

<p>提出期限は<strong>金曜日</strong>です。</p>

strong は「重要」、em は「強調」。見た目を太くしたいだけなら、あとで CSS で行います。

まとまり：div / span

<div class="profile">
  <h2>山田 太郎</h2>
  <p>趣味は<span class="hobby">ランニング</span>です。</p>
</div>

div はブロック（かたまり）、span は文の一部を囲むための「意味のない箱」です。CSS で装飾するときの目印として使います。class は、その目印につける名前です。

やってみよう：自己紹介ページ

次の内容を含むページを、自分で書いてみてください。

見出し（h1）に自分の名前かニックネーム
自己紹介の段落を2つ以上
趣味を箇条書き（ul）で3つ
好きなサイトへのリンクを1つ
画像を1枚（自分で用意した写真やイラスト。無料素材でも構いません）

書けたらブラウザで開いて、表示を確認してください。文字を変えて保存し、ブラウザを更新（F5 または Cmd+R）すると反映されます。

つまずきやすいところ

日本語が文字化けする → <meta charset="UTF-8"> が head の中にあるか確認。VS Code の右下が「UTF-8」になっているかも確認。
画像が出ない → ファイル名の大文字小文字、拡張子（.jpg と .jpeg は別）、同じフォルダにあるかを確認。
変更が反映されない → 保存し忘れが最も多いです。VS Code のタブに●がついていたら未保存です。
全角スペース → コードの中に全角スペースが混ざると動かなくなることがあります。VS Code では全角スペースが目立つように表示されます。

まとめ

HTML はページの「構造」を書く言語。見た目は CSS、動きは JavaScript。
<!DOCTYPE html> → html → head と body の骨組みを覚える。
タグは開いた順の逆に閉じる。
見出しは階層で選ぶ。画像には alt を書く。

次は「CSS のきほん」で、このページに色とレイアウトをつけていきます。

公開教材の一覧へ