HTMLタグを少しずつ理解してみよう
更新日：2026-08-02
前のページでは、index.html を作成し、ブラウザで表示できることを確認しました。
ここからは、HTML の中に書かれていた「タグ」の意味を少しずつ理解していきます。
最初から全部覚える必要はありません。
まずは、
「こういう役割があるんだな」
くらいの感覚で大丈夫です。
今回使用するファイル構成
この回では、次のファイルを使用します。
html-practice/
└── index.html
前回のHTMLをもう一度見てみる
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>はじめてのHTML</title>
</head>
<body>
<h1>はじめてのHTML</h1>
<p>ブラウザに表示されました。</p>
</body>
</html>
HTML は、「タグ」と呼ばれる記号を使って構造を表現します。
例えば、
<h1>はじめてのHTML</h1>
の <h1> がタグです。
タグには開始タグと終了タグがある
多くのHTMLタグは、
<タグ名>
内容
</タグ名>
という形で書きます。
例えば、
<p>こんにちは</p>
の場合、
<p>が開始タグ</p>が終了タグ
です。
終了タグには / が付きます。
h1 タグ
<h1>はじめてのHTML</h1>
h1 は「見出し」を表すタグです。
ブラウザでは、大きく太字で表示されます。
h は heading（見出し）の意味です。
p タグ
<p>ブラウザに表示されました。</p>
p は paragraph（段落）の意味です。
文章を書くときによく使います。
title タグ
<title>はじめてのHTML</title>
title タグは、ブラウザのタブに表示されるタイトルです。
実際にブラウザのタブを見てみると、
はじめてのHTML
と表示されているはずです。
body タグ
<body>
<h1>はじめてのHTML</h1>
<p>ブラウザに表示されました。</p>
</body>
body の中に書かれた内容が、ブラウザの画面に表示されます。
つまり、
- 見出し
- 文章
- 画像
- ボタン
など、実際に画面へ表示したいものは、基本的に body の中へ書きます。
head タグ
<head>
<meta charset="UTF-8">
<title>はじめてのHTML</title>
</head>
head は、画面には直接表示されない設定を書く場所です。
例えば、
- タブタイトル
- 文字コード
- CSSファイルの読み込み
などを書きます。
今は、
「設定を書く場所なんだな」
くらいでOKです。
実際に書き換えてみよう
試しに、h1 や p の内容を書き換えてみましょう。
例えば、
<h1>こんにちは</h1>
<p>HTMLを勉強中です。</p>
のように変更して、ブラウザを更新してみてください。
表示内容が変わるはずです。
ブラウザを更新する
HTMLファイルを書き換えただけでは、ブラウザ表示は自動更新されません。
変更後は、ブラウザで更新を行ってください。
例えば、
- F5キー
- 更新ボタン
などで再読み込みできます。
まだ全部覚えなくてOK
HTMLタグは非常にたくさんあります。
ですが、最初から全部覚える必要はありません。
まずは、
- 見出し
- 文章
- 画面に表示される
- タグで意味を表現する
という感覚を少しずつ理解していきましょう。
次のページでは、HTMLに色やデザインを付ける CSS を学んでいきます。