HTMLの学習を始めると、<h1>や<p>のようなタグがたくさん登場します。「最初にどれを覚えればよい？」「タグはどのように組み合わせる？」と迷う方も多いのではないでしょうか。
初心者が最初に覚えたいのは、見出し、段落、リンク、画像、リスト、ページ構造を表す基本タグです。すべてを暗記するのではなく、タグの役割を理解し、必要なときに調べながら1ページを作ることから始めましょう。
この記事では、HTMLタグの仕組み、基本的なHTML文書の型、よく使うタグ一覧、実際にWebページを作る手順、初心者が間違えやすい書き方を解説します。コードをコピーしてブラウザで表示しながら進められます。
HTMLタグとは内容の役割を示す目印
HTMLは、Webページの内容と構造をブラウザへ伝えるマークアップ言語です。文章をタグで囲むと、「これは見出し」「これは段落」「これはリンク」という意味を付けられます。
<h1>はじめてのWebページ</h1>
<p>HTMLの基本タグを練習しています。</p><h1>で囲んだ文字はページの主見出し、<p>で囲んだ文字は1つの段落として扱われます。文字を大きくするためではなく、内容の役割に合うタグを選ぶことが基本です。
タグ・要素・属性の違い
「タグ」と「要素」は似た意味で使われますが、厳密には範囲が違います。<a>が開始タグ、</a>が終了タグで、開始タグから終了タグまでの全体がa要素です。
上の図では、hrefが属性です。属性は要素へ追加情報を与えるもので、a要素のhref属性には移動先のURLを指定します。
| 用語 | 例 | 役割 |
|---|---|---|
| 開始タグ | <a> | 要素の始まりを示す |
| 属性 | href="URL" | 要素へ追加情報を設定する |
| 内容 | 詳しく見る | 画面に表示する文字などを入れる |
| 終了タグ | </a> | 要素の終わりを示す |
| 要素 | <a href="URL">詳しく見る</a> | 開始タグから終了タグまでの全体 |
終了タグを書かない要素もある
imgやmetaなど、内容を囲まず終了タグを持たない要素もあります。これらは空要素（void element）と呼ばれます。
<meta charset="UTF-8">
<img src="photo.jpg" alt="青空と山の写真">HTMLでは<img></img>のようには書きません。要素ごとの書き方を最初からすべて覚える必要はないため、迷ったときはリファレンスで確認してください。
HTMLタグを書く前に基本の文書構造を用意する
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>はじめてのWebページ</title>
</head>
<body>
<h1>はじめてのWebページ</h1>
</body>
</html><!doctype html>は、この文書を現代のHTMLとして扱うための宣言です。html要素が文書全体を囲み、lang="ja"で主な言語が日本語であることを示します。
| 要素・宣言 | 役割 | 画面への表示 |
|---|---|---|
<!doctype html> | HTML文書であることを示す | 表示されない |
html | HTML文書全体を囲む | 要素自体は見えない |
head | 文字コードやタイトルなどを設定する | 内容は基本的に本文へ表示されない |
body | 見出しや文章など、ページの内容を入れる | ブラウザの本文へ表示される |
meta | 文字コードや表示領域などを設定する | 表示されない |
title | ページのタイトルを設定する | ブラウザのタブなどに表示される |
meta name="viewport"は、スマートフォンの画面幅に合わせてページを表示するための設定です。HTMLだけでレスポンシブ対応が完成するわけではありませんが、最初のテンプレートへ含めておきます。
基本構造の各行をさらに詳しく確認したい場合は、次の記事も参考にしてください。
初心者が最初に覚えたいHTMLの基本タグ一覧
HTMLには多くの要素がありますが、最初からすべてを覚える必要はありません。まずは次のタグを使い、見出し・文章・画像・リンクを含む小さなページを作れるようになりましょう。
| タグ | 主な役割 | 基本の書き方 |
|---|---|---|
h1〜h6 | 見出しを作る | <h1>ページのタイトル</h1> |
p | 段落を作る | <p>文章</p> |
a | リンクを作る | <a href="URL">リンク文字</a> |
img | 画像を表示する | <img src="画像" alt="説明"> |
ul・ol・li | 箇条書きや番号付きリストを作る | <ul><li>項目</li></ul> |
strong・em | 重要性や強調を表す | <strong>重要</strong> |
header・nav・main・footer | ページ内の領域を表す | <main>主な内容</main> |
div・span | 要素をまとめる | <div class="card">内容</div> |
タグの種類を広く調べたい場合は、次の記事に用途別の一覧があります。この記事では、基本タグを実際に使うためのポイントへ絞って説明します。
h1〜h6タグで見出しを作る
h1〜h6は、文章の見出しを表す要素です。h1がページ全体の主見出しで、その中の章をh2、さらに細かい話題をh3として階層を作ります。
<h1>HTMLの学習記録</h1>
<h2>学習したタグ</h2>
<h3>pタグの使い方</h3>見出しは文字サイズを選ぶ道具ではありません。h1の次に見た目が好みという理由だけでh4へ飛ばさず、文書の内容に合わせて順序を決めます。
pタグで文章を段落に分ける
pはparagraph（段落）の略で、意味のまとまりごとに文章を囲みます。改行したい位置ごとにpを増やすのではなく、話題が切り替わるところで段落を分けましょう。
<p>HTMLはWebページの内容と構造を作る言語です。</p>
<p>CSSを組み合わせると、色や余白を変更できます。</p>重要な言葉にはstrong、文中で強調したい箇所にはemを使えます。見た目を太字や斜体にするだけならCSSで調整し、HTMLでは内容の意味を優先します。
aタグでリンクを作る
a要素は、別のページやページ内の場所へ移動するリンクを作ります。href属性へリンク先を指定し、要素の内容には移動先が分かる言葉を書きます。
<a href="https://example.com/about">運営者情報を見る</a>「こちら」のような短い言葉だけでは、リンクだけを読み上げたときに目的が分かりません。「運営者情報を見る」のように、移動先を判断できるリンク文字にするとアクセシビリティも高まります。
imgタグで画像を表示する
img要素は画像を表示します。src属性で画像ファイルの場所を指定し、alt属性へ画像が見えない場合にも内容が伝わる説明を書きます。
<img
src="images/profile.jpg"
alt="ノートパソコンでHTMLを学習している様子"
width="800"
height="450"
>画像が装飾だけで、本文の理解に必要な情報を持たない場合はalt=""とします。画像の表示方法やレスポンシブ対応は、次の記事で詳しく解説しています。
ul・ol・liタグでリストを作る
順番に意味がない箇条書きはul、手順や順位のように順番が重要なリストはolを使います。それぞれの項目をli要素で囲みます。
<h2>用意するもの</h2>
<ul>
<li>パソコン</li>
<li>テキストエディタ</li>
<li>Webブラウザ</li>
</ul>liは、基本的にulまたはolの子要素として書きます。リストの入れ子やCSSでの装飾は、次の記事で確認できます。
header・nav・main・footerタグでページを分ける
ページの各領域には、役割に合う要素を使います。headerは導入部分、navは主要なナビゲーション、mainはページ固有の中心的な内容、footerは末尾の情報を表します。
<header>
<h1>学習記録</h1>
<nav aria-label="メインメニュー">
<a href="/">ホーム</a>
<a href="/about/">運営者情報</a>
</nav>
</header>
<main>
<h2>今日学んだこと</h2>
<p>HTMLの基本タグを練習しました。</p>
</main>
<footer>
<p>© 学習記録</p>
</footer>役割を持つ要素がない範囲をまとめる場合はdiv、文章の一部分をまとめる場合はspanを使えます。CSSを適用するために便利ですが、すべてをdivで囲まず、意味を表せる要素がないか先に考えましょう。
基本タグを組み合わせてWebページを作る
ここまでに紹介したタグを組み合わせ、簡単なWebページを作ります。最初はbody要素の中が空の状態です。
変更前の状態
<body>
</body>この状態でindex.htmlをブラウザへ読み込んでも、本文には何も表示されません。次に、見出し、段落、リスト、リンクを追加します。
追加するHTML
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>はじめてのWebページ</title>
</head>
<body>
<main>
<h1>はじめてのWebページ</h1>
<p>HTMLの基本タグを練習しています。</p>
<h2>学習すること</h2>
<ul>
<li>見出し</li>
<li>段落</li>
<li>リンク</li>
</ul>
<a href="https://example.com/html-tags">HTMLタグ一覧を見る</a>
</main>
</body>
</html>コードを保存したら、index.htmlをダブルクリックするか、ブラウザへドラッグして開きます。すでに開いている場合は再読み込みしてください。
変更後の表示
上の画像のように、ブラウザはHTMLタグの役割に合わせて内容を表示します。CSSをまだ書いていないため、文字サイズや余白、リンク色はブラウザの初期スタイルです。
まずはHTMLだけで内容と構造を正しく作り、表示を確認してからCSSで見た目を整えると、問題が起きた場所を見つけやすくなります。
HTMLタグを書くときの基本ルール
タグは正しい順番で入れ子にする
要素の中へ別の要素を書くことを入れ子と呼びます。内側の要素から先に閉じ、タグの範囲が交差しないようにしてください。
<!-- 正しい書き方 -->
<p>HTMLの<strong>基本タグ</strong>を学びます。</p>
<!-- 避ける書き方：タグが交差している -->
<p>HTMLの<strong>基本タグ</p></strong>エディタの自動補完や色分けを使うと、終了タグの場所を確認しやすくなります。インデント（行頭の空白）をそろえ、親子関係が見えるように書くことも大切です。
タグ名は小文字で統一する
HTMLのタグ名は大文字でも解釈されますが、現在は小文字で書くのが一般的です。<P>と<p>を混在させず、小文字へ統一すると読みやすくなります。
属性値は引用符で囲む
引用符を省略できる属性値もありますが、初心者のうちはダブルクォーテーションで囲む書き方へ統一しましょう。空白や記号を含む値でも範囲が分かりやすくなります。
<a href="https://example.com/" class="button-link">詳しく見る</a>意味に合うタグを選ぶ
見た目だけを基準にタグを選ぶと、文書構造が分かりにくくなります。タイトルだからh1、段落だからp、移動する操作だからaというように、内容の意味へ合わせます。
意味のあるHTMLは、ブラウザだけでなく、検索エンジンやスクリーンリーダーなどにも構造が伝わりやすくなります。この考え方をセマンティックHTMLと呼びます。
ファイル名と保存場所を確認する
コードが表示されない場合は、タグだけでなくファイル名も確認します。index.html.txtになっていないか、画像のsrcが実際の保存場所と合っているかを見直してください。
HTMLの基本タグに関するよくある質問
HTMLタグは何個くらい覚える必要がありますか？
すべてを暗記する必要はありません。最初はhtml、head、body、h1〜h3、p、a、img、ul、li、mainなどを使えれば、小さなページを作れます。
フォームや表など、新しい内容を作るときに必要なタグを追加で調べましょう。何度も使うタグは、ページを作るうちに自然と覚えられます。
HTMLタグとCSSは何が違いますか？
HTMLタグは見出しや段落などの内容と構造を作り、CSSは文字色、余白、配置などの見た目を整えます。HTMLで土台を作ってからCSSを追加する順番で練習すると、役割の違いを理解しやすくなります。
タグを書いてもブラウザへ表示されない原因は何ですか？
終了タグの不足、入れ子の間違い、ファイルを保存していない、別のファイルを開いているといった原因が考えられます。エディタで保存してブラウザを再読み込みし、少ないコードへ戻して1か所ずつ確認してください。
metaやtitleなど、head要素へ書く内容は本文へ直接表示されません。タグの役割によって表示場所が違う点にも注意しましょう。
Visual Studio CodeでHTMLの型をすぐに入力できますか？
Visual Studio Codeでは、HTMLファイルへ半角の!を入力して候補を確定すると、Emmetにより基本構造を展開できます。展開後はlangやtitleなどをページに合わせて変更し、各行の意味も確認してください。
まとめ
HTMLタグは、Webページの内容へ見出し、段落、リンクなどの意味を付ける目印です。開始タグ、内容、終了タグの関係と、属性の役割を理解すると、新しいタグも調べながら使えるようになります。
まずはindex.htmlへ基本構造を書き、h1、p、a、ul、liなどを組み合わせてブラウザで表示してみてください。表示できたら内容を少しずつ変え、次にCSSで見た目を整えていきましょう。