【初心者向け】HTMLタグ一覧｜すぐに使えるチートシート

HTML（HyperText Markup Language）は、Webページの骨組みを作るための言語です。

Web制作をはじめたばかりの人にとって、たくさんあるタグや属性をおぼえるのは大変に感じるかもしれません。

「どのタグを使えばいいの？」
「書き方がわからない」
そんな悩みをかかえていませんか？

でも安心してください。基本的なタグだけおぼえれば、十分にWebページが作れるようになります。

この記事では、すぐに使えるHTMLのチートシート（早見表）として、よく使うタグとその使い方を分かりやすくまとめました。

ページの基本構造を作るタグ｜すべてのWebページに必要
文章を書くためのタグ｜読みやすいページを作ろう
リンクと画像のタグ｜ページをもっと豊かにしよう
リストと表のタグ｜情報を整理して見やすくしよう
フォームのタグ｜ユーザーからの情報を受け取ろう
HTMLでよく使う便利なタグ｜さらにページを充実させよう
よくある間違い
1. よくある間違いと解決方法
2. HTMLを書くときのルール
まとめ｜HTMLをマスターしてWeb制作をはじめよう
1. 覚えておきたい重要なポイント

ページの基本構造を作るタグ｜すべてのWebページに必要

HTMLの基本的な構造

HTMLで作られたWebページには、決まった構造があります。

どのページも同じような骨組みで作られています。

基本構造のタグ一覧

タグ	なにをするか	必須度	書き方の例
`<!DOCTYPE html>`	HTML5で作ることを宣言	★★★	`<!DOCTYPE html>`
`<html>`	HTML文書のはじまりを示す	★★★	`<html lang="ja">`
`<head>`	ページの情報を書く部分	★★★	`<head>`
`<title>`	ページのタイトル	★★★	`<title>私のWebページ</title>`
`<body>`	画面に表示される部分	★★★	`<body>`
`<meta>`	ページの詳細情報	★★☆	`<meta charset="UTF-8">`

実際のコード例

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>私のはじめてのWebページ</title>
</head>
<body>
    <!-- ここに表示したい内容を書く -->
    <h1>こんにちは、世界！</h1>
    <p>これが私のはじめてのWebページです。</p>
</body>
</html>

それぞれのタグの説明

<!DOCTYPE html>

HTMLのバージョンを宣言する
必ずファイルの一番上に書く

<html>

HTML文書全体を囲む
lang="ja"で日本語のページであることを示す

<head>

ページの設定や情報を書く部分
画面には表示されない

<title>

ブラウザのタブに表示されるタイトル
検索結果にも表示される重要な部分

<body>

実際に画面に表示される内容を書く部分
文章、画像、リンクなどすべてここに書く

ページの基本構造を定義するタグは、どのWebページでも必ず使います。

まずはこの骨組みをおぼえましょう。

文章を書くためのタグ｜読みやすいページを作ろう

見出しのタグ

タグ	大きさ	使う場面	書き方の例
`<h1>`	一番大きい	ページの主タイトル	`<h1>メインタイトル</h1>`
`<h2>`	大きい	大見出し	`<h2>章のタイトル</h2>`
`<h3>`	中くらい	中見出し	`<h3>節のタイトル</h3>`
`<h4>`	小さい	小見出し	`<h4>小さな見出し</h4>`
`<h5>`	より小さい	より細かい見出し	`<h5>詳細な見出し</h5>`
`<h6>`	一番小さい	最も細かい見出し	`<h6>最小の見出し</h6>`

文章のタグ

タグ	なにをするか	書き方の例
`<p>`	段落（パラグラフ）を作る	`<p>これは段落です。</p>`
`<br>`	改行する	`行の途中で<br>改行します`
`<strong>`	重要な部分を太字で強調	`<strong>とても大切</strong>`
`<em>`	少し強調（斜体）	`<em>ちょっと強調</em>`
`<span>`	文字の一部だけをグループ化	`<span>この部分</span>だけ`

実際のコード例

<h1>私の好きな料理</h1>

<h2>和食について</h2>
<p>和食は日本の<strong>伝統的な料理</strong>です。</p>
<p>季節の食材を使って、<em>美しく</em>盛りつけます。<br>
見た目も味も楽しめるのが特徴です。</p>

<h3>おすすめの和食</h3>
<p>私が特におすすめするのは<span>寿司</span>です。</p>

見出しタグの使い方のコツ

<h1>は1ページに1つだけ使う
見出しの順番を守る（h1→h2→h3の順）
見出しの大きさで内容の重要度を表す

文章を読みやすく整理するために、これらのタグは欠かせません。適切に使い分けることで、見やすいページが作れます。

リンクと画像のタグ｜ページをもっと豊かにしよう

リンクを作るタグ

属性	なにをするか	書き方の例
`href`	リンク先のURLを指定	`<a href="https://example.com">リンク</a>`
`target="_blank"`	新しいタブで開く	`<a href="URL" target="_blank">新タブ</a>`
`title`	リンクの説明を表示	`<a href="URL" title="説明">リンク</a>`

画像を表示するタグ

属性	なにをするか	必須度	書き方の例
`src`	画像ファイルの場所を指定	★★★	`<img src="photo.jpg">`
`alt`	画像の説明（読み上げソフト用）	★★★	`<img src="photo.jpg" alt="桜の写真">`
`width`	画像の幅を指定	★☆☆	`<img src="photo.jpg" width="300">`
`height`	画像の高さを指定	★☆☆	`<img src="photo.jpg" height="200">`

実際のコード例

<!-- 外部サイトへのリンク -->
<p><a href="https://www.google.com" target="_blank">Googleで検索</a></p>

<!-- 同じサイト内の別ページへのリンク -->
<p><a href="about.html">私についてのページ</a></p>

<!-- 画像の表示 -->
<img src="images/sunset.jpg" alt="美しい夕日の写真" width="400">

<!-- 画像にリンクをつける -->
<a href="gallery.html">
    <img src="images/thumbnail.jpg" alt="ギャラリーへ" width="200">
</a>

リンクと画像を使うときの注意点

リンクについて

hrefには正しいURLを入力する
外部サイトへのリンクはtarget="_blank"をつけると親切
リンクの文字は「ここをクリック」ではなく、内容がわかる文字にする

画像について

alt属性は必ずつける（視覚障害者の方への配慮）
画像ファイルの名前は分かりやすくする
大きすぎる画像はページの読み込みが遅くなる

ページの中で別のページに移動したり、画像を表示することで、より魅力的なWebページが作れます。

リストと表のタグ｜情報を整理して見やすくしよう

リストを作るタグ

タグ	なにをするか	書き方の例
`<ul>`	順番のないリスト（点付き）	`<ul><li>項目1</li></ul>`
`<ol>`	順番のあるリスト（数字付き）	`<ol><li>最初</li></ol>`
`<li>`	リストの各項目	`<li>これは項目です</li>`

表を作るタグ

タグ	なにをするか	書き方の例
`<table>`	表全体を囲む	`<table></table>`
`<tr>`	表の行を作る	`<tr></tr>`
`<th>`	表の見出しセル	`<th>見出し</th>`
`<td>`	表のデータセル	`<td>データ</td>`
`<thead>`	表の見出し部分をグループ化	`<thead></thead>`
`<tbody>`	表のデータ部分をグループ化	`<tbody></tbody>`

実際のコード例

順番のないリスト

<h3>好きなくだもの</h3>
<ul>
    <li>りんご</li>
    <li>ばなな</li>
    <li>みかん</li>
    <li>ぶどう</li>
</ul>

順番のあるリスト

<h3>料理の手順</h3>
<ol>
    <li>材料を準備する</li>
    <li>野菜を切る</li>
    <li>炒める</li>
    <li>味付けをする</li>
    <li>完成</li>
</ol>

表の例

<h3>成績表</h3>
<table>
    <thead>
        <tr>
            <th>科目</th>
            <th>点数</th>
            <th>評価</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>国語</td>
            <td>85点</td>
            <td>良い</td>
        </tr>
        <tr>
            <td>数学</td>
            <td>92点</td>
            <td>とても良い</td>
        </tr>
        <tr>
            <td>英語</td>
            <td>78点</td>
            <td>良い</td>
        </tr>
    </tbody>
</table>

リストと表を使うときのコツ

リストについて

関連する項目をまとめるときに使う
順番が大切なときは<ol>、そうでないときは<ul>
リストの中にリストを入れることもできる（入れ子構造）

表について

行と列で整理できる情報に使う
<th>で見出しを作ると、どの列が何のデータかわかりやすい
<thead>と<tbody>で構造を分けると、読み取りソフトにも優しい

情報を整理して見せたいときに、リストと表はとても役立ちます。適切に使い分けて、わかりやすいページを作りましょう。

フォームのタグ｜ユーザーからの情報を受け取ろう

フォームの基本タグ

タグ	なにをするか	書き方の例
`<form>`	フォーム全体を囲む	`<form action="送信先" method="post">`
`<label>`	入力欄の説明ラベル	`<label for="name">お名前:</label>`
`<input>`	様々な入力欄	`<input type="text" id="name">`
`<textarea>`	複数行のテキスト入力	`<textarea rows="5" cols="30">`
`<button>`	ボタン	`<button type="submit">送信</button>`
`<select>`	プルダウンメニュー	`<select><option>選択肢</option></select>`

inputタグのtype属性

type属性	なにをするか	書き方の例
`text`	一行のテキスト入力	`<input type="text">`
`email`	メールアドレス入力	`<input type="email">`
`password`	パスワード入力（文字が隠れる）	`<input type="password">`
`number`	数字入力	`<input type="number">`
`tel`	電話番号入力	`<input type="tel">`
`checkbox`	チェックボックス	`<input type="checkbox">`
`radio`	ラジオボタン（1つだけ選択）	`<input type="radio">`
`submit`	送信ボタン	`<input type="submit" value="送信">`

実際のコード例

<h2>お問い合わせフォーム</h2>
<form action="submit.php" method="post">
    
    <!-- お名前 -->
    <label for="name">お名前:</label>
    <input type="text" id="name" name="name" required>
    <br><br>
    
    <!-- メールアドレス -->
    <label for="email">メールアドレス:</label>
    <input type="email" id="email" name="email" required>
    <br><br>
    
    <!-- 年齢 -->
    <label for="age">年齢:</label>
    <input type="number" id="age" name="age" min="0" max="120">
    <br><br>
    
    <!-- 性別 -->
    <p>性別:</p>
    <input type="radio" id="male" name="gender" value="male">
    <label for="male">男性</label>
    
    <input type="radio" id="female" name="gender" value="female">
    <label for="female">女性</label>
    <br><br>
    
    <!-- 趣味 -->
    <p>趣味: (複数選択可)</p>
    <input type="checkbox" id="sports" name="hobby" value="sports">
    <label for="sports">スポーツ</label>
    
    <input type="checkbox" id="music" name="hobby" value="music">
    <label for="music">音楽</label>
    
    <input type="checkbox" id="reading" name="hobby" value="reading">
    <label for="reading">読書</label>
    <br><br>
    
    <!-- 住んでいる地域 -->
    <label for="region">住んでいる地域:</label>
    <select id="region" name="region">
        <option value="">選択してください</option>
        <option value="hokkaido">北海道</option>
        <option value="tohoku">東北</option>
        <option value="kanto">関東</option>
        <option value="chubu">中部</option>
        <option value="kansai">関西</option>
        <option value="chugoku">中国</option>
        <option value="shikoku">四国</option>
        <option value="kyushu">九州</option>
    </select>
    <br><br>
    
    <!-- メッセージ -->
    <label for="message">メッセージ:</label><br>
    <textarea id="message" name="message" rows="5" cols="50" 
              placeholder="ご質問やご意見をお書きください"></textarea>
    <br><br>
    
    <!-- 送信ボタン -->
    <button type="submit">送信する</button>
    <button type="reset">リセット</button>
</form>

フォームを作るときのコツ

使いやすいフォームの特徴

<label>で入力欄の説明をはっきりさせる
required属性で必須項目を指定する
placeholderで入力例を表示する
適切なtype属性を使って入力しやすくする

フォームの属性の説明

action: フォームのデータを送る先
method: データの送り方（通常は”post”）
name: プログラムでデータを処理するときの名前
id: ページ内でその要素を識別するための名前

ユーザーからの情報を受け取るページを作る際に、フォームは欠かせません。

使いやすいフォームを作って、訪問者との接点を作りましょう。

HTMLでよく使う便利なタグ｜さらにページを充実させよう

範囲を分けるタグ

タグ	なにをするか	使う場面	書き方の例
`<div>`	ブロック要素をグループ化	ページの大きな区画を分ける	`<div class="header">`
`<span>`	インライン要素をグループ化	文字の一部だけをグループ化	`<span class="red">赤い文字</span>`
`<header>`	ページやセクションの上部	サイトのロゴやメニュー	`<header>`
`<nav>`	ナビゲーション（案内）	メニューやリンク集	`<nav>`
`<main>`	ページのメイン内容	記事の本文など	`<main>`
`<footer>`	ページやセクションの下部	著作権情報など	`<footer>`

その他の便利なタグ

タグ	なにをするか	書き方の例
`<hr>`	水平線を引く	`<hr>`
`<blockquote>`	引用文を表示	`<blockquote>引用された文章</blockquote>`
`<code>`	プログラムコードを表示	`<code>console.log("Hello");</code>`
`<pre>`	文字のスペースや改行をそのまま表示	`<pre>整列された文字</pre>`

実際のコード例

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>私のブログ</title>
</head>
<body>
    <!-- ページの上部 -->
    <header>
        <h1>私のブログ</h1>
        <nav>
            <ul>
                <li><a href="index.html">ホーム</a></li>
                <li><a href="about.html">私について</a></li>
                <li><a href="contact.html">お問い合わせ</a></li>
            </ul>
        </nav>
    </header>
    
    <!-- メインの内容 -->
    <main>
        <article>
            <h2>今日のできごと</h2>
            <p>今日は<span class="highlight">とても良い天気</span>でした。</p>
            
            <hr>
            
            <h3>プログラミングの勉強</h3>
            <p>HTMLの勉強をしています。以下のコードを書きました：</p>
            <pre><code>&lt;p&gt;こんにちは、世界！&lt;/p&gt;</code></pre>
            
            <blockquote>
                「継続は力なり」という言葉があります。
                毎日少しずつでも続けることが大切ですね。
            </blockquote>
        </article>
    </main>
    
    <!-- ページの下部 -->
    <footer>
        <p>&copy; 2024 私のブログ. All rights reserved.</p>
    </footer>
</body>
</html>

各タグの使い分け

<div>と<span>の違い

<div>: ブロック要素（縦に並ぶ、幅いっぱい）
<span>: インライン要素（横に並ぶ、必要な幅だけ）

意味のあるタグ（セマンティック要素）

<header>, <nav>, <main>, <footer>などは、ページの構造を明確にする
検索エンジンや読み取りソフトが内容を理解しやすくなる

これらのタグを使うことで、ページの構造がはっきりし、見た目も機能も向上します。

よくある間違い

よくある間違いと解決方法

間違い	問題点	正しい書き方
タグを閉じ忘れ	`<p>文章`	`<p>文章</p>`
属性の値にクォートなし	`<img src=photo.jpg>`	`<img src="photo.jpg">`
入れ子の間違い	`<p><strong>文章</p></strong>`	`<p><strong>文章</strong></p>`
alt属性の省略	`<img src="photo.jpg">`	`<img src="photo.jpg" alt="説明">`