HTMLを勉強し始めると、<h1>や<p>のような記号を目にします。「この記号は何？」「タグは全部覚えないといけないの？」と戸惑う方も多いのではないでしょうか。
HTMLタグは、文章や画像に見出し・段落・リンクなどの役割を伝えるための目印です。基本の仕組みとよく使うタグを押さえれば、初心者でもシンプルなWebページを作れます。
この記事では、HTMLタグの意味、要素や属性との違い、初心者が最初に覚えたいタグを目的別に解説します。最後は実際にindex.htmlを書き、ブラウザに表示してみましょう。
HTMLタグとは文章や画像の役割を示す目印
HTMLは「HyperText Markup Language（ハイパーテキスト・マークアップ・ランゲージ）」の略です。Webページの内容と構造をブラウザへ伝えるために使います。
マークアップとは、文章などに目印を付けて意味を示すことです。たとえば、ページの大見出しにはh1、段落にはp、リンクにはaというタグを使います。
<h1>HTMLの練習</h1>
<p>最初のWebページを作っています。</p>ブラウザはh1を大見出し、pを段落として扱います。タグは文字を大きくしたり余白を付けたりするだけの装飾ではなく、内容の役割を示すものです。
タグ・要素・属性の違い
HTMLでは「タグ」「要素」「属性」という言葉がよく登場します。似ていますが、指している範囲と役割が異なります。
上の図では、①が開始タグの一部、②が属性、③がリンクとして表示する内容、④が終了タグです。これらをまとめた全体をHTML要素と呼びます。
| 用語 | 意味 | 例 |
|---|---|---|
| タグ | 要素の始まりや終わりを示す記号 | <p>、</p> |
| 要素 | 開始タグから終了タグまでを含む全体 | <p>文章です。</p> |
| 属性 | 要素へ追加情報や設定を与えるもの | href="menu.html" |
開始タグと終了タグで内容を囲む
多くのHTML要素は、開始タグと終了タグをセットで使います。終了タグには、要素名の前に半角のスラッシュ/を付けます。
<p>ここが段落の内容です。</p><p>が開始タグ、</p>が終了タグです。その間にある「ここが段落の内容です。」までを含めてp要素と呼びます。
終了タグを書かない要素もある
imgやbrなど、内容を挟まない要素には終了タグがありません。このような要素を空要素と呼びます。
<img src="cafe.jpg" alt="海辺のカフェ">
<br>HTMLでは、空要素の末尾を/>にする必要はありません。<img ...>や<br>の形で記述できます。
属性は開始タグの中に書く
属性は、HTML要素へ追加情報を与えます。属性名、半角のイコール=、ダブルクォーテーションで囲んだ値、という順番で開始タグの中に書きます。
<a href="menu.html">メニューを見る</a>
<img src="cafe.jpg" alt="海辺のカフェ">href属性はリンク先、src属性は読み込む画像の場所を指定します。alt属性は画像の内容を文章で伝え、画像を表示できない場合や音声読み上げを利用する場合にも役立ちます。
初心者が最初に覚えたいHTMLタグ一覧
HTMLタグはすべて暗記する必要はありません。まずは、Webページで頻繁に使う次のタグから覚えると、簡単なページを作れるようになります。
| タグ | 役割 | 主な用途 |
|---|---|---|
h1〜h6 | 見出し | ページや章の題名を示す |
p | 段落 | ひとまとまりの文章を書く |
a | リンク | 別のページやページ内の位置へ移動する |
img | 画像 | 画像ファイルを表示する |
ul・ol・li | リスト | 箇条書きや番号付きの一覧を作る |
strong・em | 重要性・強調 | 文章の重要な部分や強調する部分を示す |
header・main・footer | ページの大きな構造 | 上部・主要部分・下部を分ける |
section・article | 意味のあるまとまり | 話題や独立した記事を整理する |
div・span | 汎用的な囲み | CSS適用などのために範囲をまとめる |
見出しを作るh1〜h6タグ
h1からh6は見出しを表します。数字は文字サイズを選ぶためではなく、見出しの階層を示すためのものです。
<h1>海辺のカフェ</h1>
<h2>おすすめメニュー</h2>
<h3>季節のドリンク</h3>ページ全体の題名をh1、大きな章をh2、その中の小見出しをh3にします。見た目を小さくしたいだけの理由でh2からh4へ飛ばさず、内容の親子関係に沿って使います。
文章を書くpタグ
pはparagraph（段落）の略です。文章を意味のある段落ごとに囲みます。
<p>海を眺めながら季節のドリンクを楽しめます。</p>文章の途中で見た目だけを改行するbrとは役割が異なります。話題が一区切りしたところで新しいp要素を作るのが基本です。
リンクを作るaタグ
a要素は、別ページや同じページ内の位置へのリンクを作ります。移動先はhref属性に指定します。
<a href="menu.html">メニューを見る</a>「こちら」だけをリンクにするより、「メニューを見る」のように移動先が分かる文言にすると、読者にも音声読み上げソフトの利用者にも伝わりやすくなります。
画像を表示するimgタグ
img要素は画像を表示します。src属性に画像の場所、alt属性に画像の内容を指定します。
<img src="images/cafe.jpg" alt="窓から海が見えるカフェの店内">装飾だけの画像ではalt=""と空にする場合もあります。内容を理解するために必要な画像では、画像を見なくても要点が伝わる短い説明を書きます。
リストを作るul・ol・liタグ
順番のない箇条書きはul、手順や順位のように順番がある一覧はolで囲みます。各項目にはliを使います。
<ul>
<li>コーヒー</li>
<li>紅茶</li>
<li>レモネード</li>
</ul>liは単独で並べず、基本的にulまたはolの子要素として使います。
ページ構造を表すheader・main・footerタグ
headerはページやセクションの導入部分、mainはページ固有の中心的な内容、footerは末尾の情報を表します。
見た目の上・中央・下を機械的に分けるのではなく、内容の役割に合わせて選びます。main要素は、通常1ページの中で1つだけ使います。
内容をまとめるsection・article・divタグ
sectionは見出しを付けられる1つの話題、articleは単独でも意味が通る記事や投稿をまとめます。divは特別な意味を持たない汎用的な囲みです。
「このまとまりに見出しを付けられるか」「その部分だけを取り出しても内容が成り立つか」を考えると選びやすくなります。見た目を整えるためだけの囲みにはdivが適しています。
sectionとdivの違いは、次の記事でコードと画像を使って詳しく解説しています。
HTMLタグの正しい入れ子構造
HTML要素の中には、別のHTML要素を入れられます。この親子関係を「入れ子」と呼びます。
上の図では、body要素の内側にmain要素があり、さらにその内側にh1要素とp要素があります。外側の要素を親要素、内側の要素を子要素と呼びます。
後から開始した要素を先に閉じるのが基本です。次のようにタグが交差しないようにします。
<!-- 正しい書き方 -->
<p>海辺の<strong>カフェ</strong>です。</p>
<!-- タグが交差している誤った書き方 -->
<p>海辺の<strong>カフェ</p></strong>コードを字下げすると、親子関係を目で追いやすくなります。半角スペース2個または4個など、チームや教材のルールに合わせて揃えてください。
HTMLの基本構造
HTMLファイルには、ページの情報を書くhead要素と、ブラウザに表示する内容を書くbody要素があります。最小限の基本構造は次のとおりです。
<!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>| 記述・要素 | 役割 |
|---|---|
<!doctype html> | 現代のHTML文書であることをブラウザへ伝える |
html | HTML文書全体を囲む |
head | 文字コードやページタイトルなど、文書の情報をまとめる |
body | 見出し、文章、画像など、画面に表示する内容をまとめる |
<!doctype html>はタグではなく、文書型宣言です。lang="ja"は文書の基本言語が日本語であること、charset="UTF-8"は文字コードがUTF-8であることを示します。
基本構造の各行をさらに詳しく確認したい場合は、次の記事も参考にしてください。
HTMLタグを使ってWebページを作る手順
ここからは、見出し、段落、リンク、リストを使った小さなWebページを作ります。テキストエディタで作業用フォルダを開き、index.htmlを用意してください。
変更前のHTMLを用意する
最初は基本構造だけを書きます。body要素の中は空の状態です。
<!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>
</body>
</html>この状態で保存してブラウザで開いても、body要素に内容がないため画面は空白です。
body要素へタグを追加する
body要素の中へ、ページの内容を追加します。どのタグがどの内容を囲んでいるか分かるように、字下げも揃えましょう。
<body>
<header>
<h1>海辺のカフェ</h1>
<p>季節のドリンクを楽しめます。</p>
</header>
<main>
<section>
<h2>おすすめメニュー</h2>
<ul>
<li>アイスコーヒー</li>
<li>レモネード</li>
<li>チーズケーキ</li>
</ul>
<a href="menu.html">メニューを見る</a>
</section>
</main>
</body>headerにはページの導入、mainには中心的な内容を入れました。sectionの中は「おすすめメニュー」という1つの話題でまとまっています。
変更後のHTMLを確認する
基本構造と追加した内容を合わせた完成形は次のとおりです。
<!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>
<header>
<h1>海辺のカフェ</h1>
<p>季節のドリンクを楽しめます。</p>
</header>
<main>
<section>
<h2>おすすめメニュー</h2>
<ul>
<li>アイスコーヒー</li>
<li>レモネード</li>
<li>チーズケーキ</li>
</ul>
<a href="menu.html">メニューを見る</a>
</section>
</main>
</body>
</html>ブラウザで表示を確認する
index.htmlを保存してブラウザで開くと、タグで指定した役割に合わせて見出し、段落、リスト、リンクが表示されます。
上の図では、h1要素が大見出し、p要素が段落、a要素がリンクとして表示されています。HTMLだけでも役割に応じた初期表示がありますが、色や余白などの見た目はCSSで調整します。
HTMLファイルをブラウザで開く具体的な操作が分からない方は、次の記事で画面を見ながら確認できます。
HTMLタグを書くときの注意点
記号は半角で入力する
タグの山かっこ< >、スラッシュ/、属性の引用符"は半角で入力します。全角の＜p＞はHTMLタグとして認識されず、そのまま文字として表示されます。
終了タグと入れ子を確認する
終了タグの書き忘れや、タグが交差した入れ子は表示崩れの原因になります。エディタの入力補完や対応するタグの強調表示も活用してください。
見た目ではなく意味でタグを選ぶ
太字にしたいからh2を使う、余白が欲しいからpを増やす、という選び方は避けます。見出しには見出しタグ、段落にはpを使い、見た目はCSSで整えます。
非推奨のタグを新しく使わない
centerやfontなど、古いHTMLで使われていた一部の要素は現在では非推奨です。中央揃え、文字色、文字サイズなどの見た目はCSSで指定します。
HTMLの内容へCSSを適用する方法は、次の記事で基本構文から解説しています。
HTMLタグでよくある疑問
HTMLタグは全部でいくつありますか？
HTMLには100種類を超える要素があり、仕様の更新によって追加や非推奨化も行われます。ただし、最初からすべて覚える必要はありません。
この記事で紹介した見出し、段落、リンク、画像、リスト、ページ構造のタグから使い、必要になったものを公式リファレンスで調べる学び方が効率的です。
HTMLタグに大文字と小文字の違いはありますか？
HTMLではタグ名の大文字と小文字は区別されませんが、現在は小文字で書くのが一般的です。<P>ではなく<p>のように揃えると読みやすくなります。
HTMLタグは暗記する必要がありますか？
すべてを暗記する必要はありません。よく使うタグはコードを書いているうちに自然と覚えます。
使うタグに迷ったときは、実現したい見た目ではなく「この内容にはどのような役割があるか」を考え、リファレンスで確認してください。
HTMLだけでWebサイトを作れますか？
HTMLだけでも文章、画像、リンクを持つWebページは作れます。ただし、色、余白、レイアウトなどの見た目を整えるにはCSSを使います。
ボタンを押したときの複雑な動作や、内容の動的な変更にはJavaScriptも使います。まずHTMLで内容と構造を作り、次にCSSで見た目を整える順番で学ぶと理解しやすいです。
まとめ
HTMLタグは、文章や画像に見出し・段落・リンクなどの役割を与える目印です。多くの要素は開始タグと終了タグで内容を囲み、必要に応じて開始タグへ属性を追加します。
最初からすべてのタグを暗記する必要はありません。まずはh1〜h6、p、a、img、リスト、ページ構造のタグを使い、index.htmlをブラウザで表示してみてください。
HTMLとCSSを続けて学ぶ方法や教材を探している方は、次の記事も参考にできます。