HTMLを書き始めると、多くの方が最初に「何をどこから書けばいいのか分からない」と感じます。結論からいうと、HTMLの書き方は、基本テンプレートを1つ覚えて、タグ・属性・入れ子のルールを押さえれば十分スタートできます。
この記事では、HTMLファイルの基本形、head と body の役割、タグと属性の書き方、コメント、インデント、初心者がつまずきやすいミスを、前提知識がなくても分かるように順番に整理します。
最初はテンプレートをそのまま使って大丈夫です。意味が分かってくるのは、実際に書き始めてからで問題ありません。
結論：まずはこのテンプレートから始めればOK
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ページタイトル</title>
</head>
<body>
<h1>見出し</h1>
<p>本文を書きます。</p>
</body>
</html>
初心者の方は、まずこの形を見て「HTMLは外側から順に入れ子で組み立てるんだな」と理解できれば十分です。
HTMLを書く前に知っておきたいこと
HTMLは、メモ帳のようなテキストエディタでも書けます。ファイル名を sample.html のように .html で保存し、ブラウザで開けば内容を確認できます。
つまり、最初の段階では特別な開発環境がなくても練習できます。まずは短いHTMLを書いてブラウザで開き、「コードを書くと画面が変わる」という感覚をつかむことが大切です。
最初の一歩として何をすればいいか
- テキストエディタで
sample.htmlを作る - 基本テンプレートを貼り付ける
h1やpの文字を自分用に書き換える- ファイルを保存してブラウザで開く
- 文章や見出しを変えながら、どこが画面に反映されるか確認する
この流れだけでも、HTMLが「ただ読むもの」ではなく、「自分でページを組み立てるための道具」だと実感しやすくなります。
HTMLの基本構造
| 記述 | 役割 | 初心者向けの覚え方 |
|---|---|---|
<!DOCTYPE html> | HTML文書であることを宣言する | このファイルはHTMLです、と最初に伝える |
<html> | ページ全体を囲む | 家全体の外枠 |
<head> | 設定情報を書く | ページの裏側の設定 |
<body> | 画面に表示される内容を書く | 実際にユーザーが見る本文 |
HTMLそのものの役割がまだ曖昧な方は、先に HTMLとは？ を読むと、構造の意味がさらに理解しやすくなります。
headタグとbodyタグの違い
head には、ページタイトル、文字コード、スマホ表示設定、説明文などの「設定情報」を書きます。ここに書いた内容の多くは、本文のように大きく画面へ表示されるものではありません。
一方、body は実際にユーザーが見る本文です。見出し、文章、画像、リンク、リストなどは基本的に body の中へ書きます。
この違いを理解しておくと、設定情報と本文が混ざらなくなります。詳しくは headタグの記事 も参考になります。
HTMLの書き方で押さえたい基本ルール
1. 開始タグと終了タグで囲む
多くのHTMLタグは、開始タグと終了タグのセットで書きます。
<p>これは段落です。</p>
この例では、<p> が開始タグ、</p> が終了タグです。ただし img や meta のように終了タグを持たないものもあります。
2. タグは入れ子で書く
HTMLは、タグの中に別のタグを入れて構造を作ります。これを入れ子といいます。
<div> <p>段落の中に<a href="#">リンク</a>を入れる</p> </div>
このとき、開いた順番と逆順で閉じるのがルールです。ここが崩れると、見た目が崩れたり、意図しない構造になったりします。
3. 属性は開始タグに書く
属性はタグに追加情報を与えるためのものです。たとえばリンク先URLは、a タグの href 属性に書きます。
<a href="https://example.com">公式サイト</a>
画像なら src、スタイル指定なら class など、用途に応じて属性を使い分けます。属性の考え方を丁寧に学びたい方は、HTMLの属性 も役立ちます。
よく使うタグを書き換えるだけでも練習になる
初心者の方は、最初から新しいページを全部自分で組み立てるより、既存のテンプレートの一部を書き換える練習がおすすめです。たとえば、h1 の文字を変える、p を増やす、a のリンク先を変える、といった小さな変更でも十分学習になります。
こうした小さな変更を繰り返すと、「どのタグがどこに効いているのか」が自然に分かるようになります。最初から完璧なページを作ろうとせず、小さく試して確認するのがコツです。
4. タグ名は小文字で統一する
HTMLは大文字でも動く場合がありますが、現在は小文字で統一するのが一般的です。見やすさと保守性のためにも、小文字で書く癖を付けるのがおすすめです。
5. インデントで見やすくする
インデントがなくても動くことはありますが、入れ子が深くなるほど読みづらくなります。スペース2つか4つでそろえるだけでも、後からかなり見返しやすくなります。
よく使う最小サンプル
最初の練習では、見出し・段落・リンク・画像が使えれば十分です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>練習ページ</title>
</head>
<body>
<h1>自己紹介</h1>
<p>HTMLの練習中です。</p>
<a href="https://it-biz.online/">参考サイトを見る</a>
<img src="profile.png" alt="プロフィール画像">
</body>
</html>
各タグの使い方は、見出しタグ、pタグ、aタグ、imgタグ で個別に確認できます。
HTMLコメントの書き方
メモを残したいときや、後で見返したときの目印を置きたいときはコメントを使います。
<!-- ここにメモを書く -->
コメントはブラウザ上に本文として表示されません。複数人で作業するときや、後日修正するときにも便利です。
初心者がつまずきやすいポイント
- 終了タグを閉じ忘れる
- 入れ子の順番が逆になる
- 属性値の引用符を忘れる
headとbodyの役割が混ざる- すべてを
divで書いてしまい、意味が見えなくなる
特に、意味のある場所には意味のあるタグを使う意識が大切です。この考え方は、セマンティックHTML を学ぶとさらに整理しやすくなります。
HTMLの書き方を覚えたあとに何を学ぶべきか
HTMLの基本構造と主要タグが分かったら、次はCSSで見た目を整える学習へ進むのが自然です。HTMLだけではページの色や余白、横並びレイアウトなどはあまり細かく調整できないためです。
その次にJavaScriptを学ぶと、メニューの開閉や入力チェックなどの動きが付けられるようになります。つまり、HTMLの書き方を覚えることは、Web制作全体のスタートラインに立つことでもあります。
よくある疑問
属性値は必ず引用符で囲むべきですか？
実務では引用符付きで書くのが無難です。見やすく、ミスも減らせます。
HTMLは手で全部書くものですか？
最初は手で書いて仕組みを理解するのが大切です。そのあと、エディタの補完機能やテンプレートを使うと効率的に書けるようになります。
最初に全部のタグを覚える必要はありますか？
必要ありません。h1、p、a、img などの基本タグから始めれば十分です。
次に読むと理解しやすい記事
まとめ
HTMLの書き方は、最初こそ記号が多く見えて難しそうですが、基本の型を覚えると一気に楽になります。まずは短いサンプルを自分で書き写し、見出しや文章を入れ替えながら、タグの役割に慣れていきましょう。