HTML入門 #1 - Webページの基本構造

入門 | 10分 で読める | 2026.07.12

公式ドキュメント
HTML

今回やること

HTMLは、Webページの内容と構造を書くための言語です。

最初の目標は、1つのHTMLファイルを作り、ブラウザで表示できる状態にすることです。

この記事では、最小構成のHTMLを書きながら、基本のタグの役割を確認します。

作業フォルダを作る

まず学習用のフォルダを作ります。

mkdir html-basic
cd html-basic
code .

VS Codeで index.html を作成します。

最小のHTMLを書く

index.html に次を書きます。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>はじめてのHTML</title>
  </head>
  <body>
    <h1>はじめてのHTML</h1>
    <p>HTMLファイルをブラウザで表示しました。</p>
  </body>
</html>

ファイルを保存し、ブラウザで開きます。h1 と p の文章が表示されれば成功です。

各部分の役割

書き方役割
<!doctype html>HTML5として解釈してもらう宣言
<html lang="ja">ページ全体の言語を指定
<head>画面には直接出ない設定を書く場所
<meta charset="UTF-8">日本語などの文字化けを防ぐ指定
<title>ブラウザのタブや検索結果に使われるタイトル
<body>画面に表示する内容を書く場所

head は設定、body は見える内容、と分けて覚えると理解しやすくなります。

インデントをそろえる

HTMLではタグの入れ子が増えます。インデントをそろえると、どこからどこまでが1つのまとまりか分かりやすくなります。

悪い例:

<body>
<h1>タイトル</h1>
<p>本文</p>
</body>

よい例:

<body>
  <h1>タイトル</h1>
  <p>本文</p>
</body>

ブラウザ上の表示は同じでも、後から読む人にとって大きな差になります。

よくあるミス

ミス起きること確認する場所
index.html ではなく index.htm で保存した想定と違うファイルを開くファイル名
タグを閉じ忘れた表示が崩れる開始タグと終了タグ
charset がない日本語が文字化けすることがあるhead
保存していないブラウザに変更が反映されないVS Codeの保存状態

練習

次の3つを自分で変更してみましょう。

  1. title を自分の名前入りに変える
  2. h1 を「自己紹介ページ」に変える
  3. p に今日学んだことを書く

次のステップ

HTML入門 #2 - 見出し・段落・リンク・画像 で、ページの中身を増やしていきます。

参考リソース

おすすめ記事

← 一覧に戻る
PR
PR
PR
PR