はじめに
HTMLを学び始めたばかりの頃、こんな悩みはありませんか？
- タグの種類が多すぎて何から覚えればいいかわからない
-
<div>ばかり使ってしまう - タグの役割がイメージできない
- Webページがどのように作られているのかわからない
HTMLには100種類以上のタグがあります。
しかし、最初からすべて覚える必要はありません。
実際のWeb制作でも、よく使う基本的なタグを組み合わせることで、多くのページを作ることができます。
この記事では、HTML初心者が最初に覚えるべき基本タグ10個を、サンプルコード付きで解説します。
補足部分もしっかり理解することでより理解が深まるのでぜひ確認してみてください！
目次
HTMLとは？
HTML（HyperText Markup Language）は、Webページの構造を作るための言語です。
簡単にいうと、
- HTML → ページの構造を作る
- CSS → デザインを整える
- JavaScript → 動きを追加する
という役割があります。
例えば、以下のようなWebページの場合、
タイトル
↓
文章
↓
画像
↓
ボタン
↓
リンク
この構造を作るのがHTMLです。
補足
【.html書類とブラウザーの関係】
HTMLファイルには「タグ」と呼ばれる命令を書いていきます。
例えば文字の大きさや見出し、段落などをタグで指定しない場合は、ブラウザの初期設定で表示されます。
また、HTMLでは改行も自動では行われません。
改行したい場合は適切なタグを使用する必要があります。
HTMLの基本構造
まずは基本的なHTMLの形を見てみましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ページのタイトル</title>
</head>
<body>
<h1>見出し</h1>
<p>これは段落です。</p>
<img src="imag.jpg"alt="画像の説明">
</body>
</html>
HTMLは大きく3つに分かれています。
| 場所 | 役割 |
|---|---|
| html | HTML全体 |
| head | ページ情報 |
| body | 表示される内容 |
初心者が覚えるべきHTMLタグ10選
1. <html>タグ
HTML文書全体を囲むタグです。
<html>
Webページの内容
</html>
HTMLを書く場合、基本的にすべてこの中に記述します。
2. <head>タグ
ページの設定情報を書く場所です。
<head>
<title>プロフィールページ</title>
</head>
主に以下の情報を設定します。
- ページタイトル
- CSSファイルの読み込み
- 文字コード設定
- SEO関連情報
ブラウザ画面には直接表示されません。
3. <body>タグ
実際に画面へ表示される内容を書く場所です。
<body>
<h1>自己紹介</h1>
<p>こんにちは。</p>
</body>
文章・画像・ボタンなどは基本的にbody内に記述します。
4. <h1>〜<h6>タグ
見出しを作るタグです。
<h1>大見出し</h1>
<h2>中見出し</h2>
<h3>小見出し</h3>
数字が小さいほど重要度が高くなります。
例：
h1
└ h2
└ h3
└ h4
補足
h1はページのタイトルとして使うことが多いです。
見出しタグは、文章構造を正しく伝えるためにも重要です。
5. <p>タグ
文章の段落を作るタグです。
<p>
これは段落です。
</p>
文章を書く場合は、基本的にpタグを使用します。
6. <a>タグ
リンクを作るタグです。
<a href="https://example.com">
公式サイトを見る
</a>
hrefにはリンク先を指定します。
使用例：
- 別ページへの移動
- 外部サイトへのリンク
- メニュー作成
7. <img>タグ
画像を表示するタグです。
<img src="image.jpg" alt="プロフィール画像">
主な属性：
| 属性 | 内容 |
|---|---|
| src | 画像ファイルの場所 |
| alt | 画像説明 |
補足
altは必ず設定する習慣をつけましょう。
画像が表示されない場合や、アクセシビリティ向上に役立ちます。
8. <div>タグ
要素をグループ化したり、レイアウトとを調節したりするための汎用タグです。
<div>
<h2>タイトル</h2>
<p>文章</p>
</div>
CSSでデザインするときによく使用します。
補足
<header>や<main>などの意味を持つタグ(セマンティックタグ)で表現できる場合は、そちらを優先して使うのが基本です。
<div>自体は｢ヘッダー｣｢メインコンテンツ｣といった意味はなく、｢ここをひとまとまりにします｣という役割を持つタグだと考えると理解しやすいです。
9. <span>タグ
文章の一部分だけ変更したい場合に使います。
<p>
これは<span>重要</span>な文章です。
</p>
CSSで文字色やサイズを変更するときによく使います。
10. <button>タグ
クリックできるボタン(表示のみ)を作ります。
<button>
送信
</button>
お問い合わせフォームや操作ボタンなどで使用します。
<button>はボタンを表示するためのタグです。クリックした時の動き(送信や画面の切り替えなど)は、Javascriptで追加する事が一般的です。
実際にページを作ってみる
ここまで紹介したタグを使って簡単なページを作ってみましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>自己紹介ページ</title>
</head>
<body>
<h1>山田太郎のプロフィール</h1>
<img src="profile.jpg" alt="プロフィール写真">
<p>
Web制作を勉強しています。
</p>
<a href="https://example.com">
詳しく見る
</a>
<button>
お問い合わせ
</button>
</body>
</html>
このコードだけでも、
- タイトル
- 画像
- 文章
- リンク
- ボタン
を含んだWebページを作ることができます。
[イメージ]
初心者がよくある間違い
1. すべてdivで作ってしまう
初心者によくある例です。
<div>
タイトル
</div>
<div>
文章
</div>
動作はしますが、HTMLの意味が伝わりにくくなります。
可能なら、
<header>
<main>
<footer>
など意味のあるタグを使いましょう。
2. 見出しを順番通り使わない
悪い例：
<h1>
<h4>
良い例：
<h1>
<h2>
<h3>
<h1>の次にいきなり<h4>を使うと、すぐに表示が崩れるわけではありません。
しかし、HTMLの文書構造が分かりにくくなり、以下の影響があります。
・スクリーンリーダーで内容を理解しづらくなる
・保守性が下がる
（後から自分や他の人がコードを読むと、見出しの階層が分かりづらくなり修正しにくくなります。）
HTMLは見た目ではなく構造を表すものをポイントとしておさえましょう。
以上のことから見出しを付ける場合は文章構造を意識しましょう。
3. 画像のaltを書かない
悪い例：
<img src="cat.jpg">
良い例：
<img src="cat.jpg" alt="猫の写真">
alt 属性がないと、以下のような影響があります。
・スクリーンリーダーで画像の内容が伝わらない
(視覚に頼らずWebページを利用する人は、画像が何を表しているのか分かりません。)
・画像が表示されないと内容が分からない
(通信エラーや画像ファイルの読み込み失敗時に、代わりに表示される説明がないため、ユーザーは画像の内容を把握できません。)
以上のことから、img srcの後には画像の説明となるaltを記載しましょう。
まとめ
今回はHTML初心者が最初に覚えるべき10個のタグを紹介しました。
| タグ | 役割 |
|---|---|
| html | HTML全体 |
| head | ページ設定 |
| body | 表示内容 |
| h1〜h6 | 見出し |
| p | 文章 |
| a | リンク |
| img | 画像 |
| div | グループ化 |
| span | 一部分の装飾 |
| button | ボタン |
HTMLはタグを暗記するよりも、
「このタグは何のために使うのか」
を理解することが大切です。
分からないタグやスタイルについて学べるおすすめサイト
次に学ぶおすすめ
今回は、基本的なHTMLタグについて説明しました。
この記事で基本的なHTMLタグを理解できたら、次はCSSを使って見た目を整えてみましょう。
HTMLとCSSを組み合わせることで、より本格的なWebページを作れるようになります。
最後まで読んでいただきありがとうございました！