2026年5月1日
この一覧の使い方
「こういうことがしたい」からHTMLタグを探せる逆引き一覧です。
- 対象読者：HTMLを学び始めた中高生、授業の課題でWebページを作る人
- 使い方：やりたいことのカテゴリから該当するタグを探す
- 印刷OK：下部の印刷ボタンで印刷用レイアウトになります
各タグの詳しい使い方はHTMLコースで学べます。
文字を表示したい
| やりたいこと | タグ | コード例 | 表示結果の説明 |
|---|---|---|---|
| 大きな見出しを付けたい | <h1>〜<h6> | <h1>タイトル</h1> | h1が最大、h6が最小の見出し |
| 段落を作りたい | <p> | <p>本文テキスト</p> | 前後に余白が入る段落 |
| 太字にしたい | <strong> | <strong>重要</strong> | 太字で強調表示 |
| 斜体にしたい | <em> | <em>強調</em> | 斜体で強調表示 |
| 改行したい | <br> | 行1<br>行2 | その位置で改行される |
| 取り消し線を引きたい | <del> | <del>古い情報</del> | 横線が引かれた文字 |
| 下線を引きたい | <u> | <u>注目</u> | 下線付きの文字 |
| 小さい文字にしたい | <small> | <small>注釈</small> | 一回り小さい文字 |
| 上付き文字にしたい | <sup> | x<sup>2</sup> | x²のように上に表示 |
| 下付き文字にしたい | <sub> | H<sub>2</sub>O | H₂Oのように下に表示 |
| 引用文を表示したい | <blockquote> | <blockquote>名言</blockquote> | 字下げされた引用ブロック |
| コードを表示したい | <code> | <code>let x = 1;</code> | 等幅フォントでコード表示 |
| 整形済みテキストを表示したい | <pre> | <pre> 空白保持</pre> | 空白・改行がそのまま表示 |
| ハイライトしたい | <mark> | <mark>重要箇所</mark> | 黄色い蛍光ペンのような強調 |
リンク・画像を入れたい
| やりたいこと | タグ | コード例 | 表示結果の説明 |
|---|---|---|---|
| 他のページへリンクしたい | <a> | <a href="url">リンク</a> | クリックで別ページに移動 |
| 新しいタブで開くリンク | <a target="_blank"> | <a href="url" target="_blank">外部</a> | 新しいタブでページが開く |
| ページ内リンクを作りたい | <a href="#id"> | <a href="#section1">移動</a> | 同じページ内の指定位置へスクロール |
| 画像を表示したい | <img> | <img src="photo.jpg" alt="説明"> | 画像が表示される |
| 画像にリンクを付けたい | <a><img> | <a href="url"><img src="img.jpg" alt=""></a> | 画像クリックでリンク先へ |
| レスポンシブ画像を使いたい | <picture> | <picture><source><img></picture> | 画面サイズに応じた画像切替 |
| 動画を埋め込みたい | <video> | <video src="movie.mp4" controls></video> | 再生コントロール付き動画 |
| 音声を埋め込みたい | <audio> | <audio src="sound.mp3" controls></audio> | 再生コントロール付き音声 |
| YouTubeを埋め込みたい | <iframe> | <iframe src="https://youtube.com/embed/..."></iframe> | 外部コンテンツの埋め込み |
| 画像に説明文を付けたい | <figure> + <figcaption> | <figure><img ...><figcaption>説明</figcaption></figure> | 画像とキャプションのセット |
リストや表を作りたい
| やりたいこと | タグ | コード例 | 表示結果の説明 |
|---|---|---|---|
| 箇条書きリストを作りたい | <ul> + <li> | <ul><li>項目1</li></ul> | ●付きの箇条書き |
| 番号付きリストを作りたい | <ol> + <li> | <ol><li>手順1</li></ol> | 1. 2. 3. の番号付きリスト |
| 用語と説明のリスト | <dl> + <dt> + <dd> | <dl><dt>用語</dt><dd>説明</dd></dl> | 用語-説明のペア表示 |
| 表（テーブル）を作りたい | <table> | <table><tr><td>データ</td></tr></table> | 行と列のある表 |
| 表のヘッダー行を作りたい | <thead> + <th> | <thead><tr><th>見出し</th></tr></thead> | 太字の見出し行 |
| 表のセルを結合したい | colspan / rowspan | <td colspan="2">結合</td> | 横方向・縦方向にセル結合 |
| 表にキャプションを付けたい | <caption> | <table><caption>表題</caption>...</table> | 表の上にタイトル表示 |
| リストを入れ子にしたい | <ul>の中に<ul> | <ul><li>親<ul><li>子</li></ul></li></ul> | 階層構造のリスト |
| 表のボディ部分を明示したい | <tbody> | <tbody><tr><td>...</td></tr></tbody> | 表のデータ部分をグループ化 |
| 表のフッター行を作りたい | <tfoot> | <tfoot><tr><td>合計</td></tr></tfoot> | 表の最下部に合計行など |
フォーム（入力欄）を作りたい
| やりたいこと | タグ | コード例 | 表示結果の説明 |
|---|---|---|---|
| テキスト入力欄を作りたい | <input type="text"> | <input type="text" placeholder="名前"> | 1行のテキスト入力欄 |
| パスワード入力欄を作りたい | <input type="password"> | <input type="password"> | 入力が●で隠れる欄 |
| メールアドレス入力欄 | <input type="email"> | <input type="email"> | メール形式を検証する入力欄 |
| 数値入力欄を作りたい | <input type="number"> | <input type="number" min="0" max="100"> | 数値のみ入力可能な欄 |
| 複数行テキスト入力欄 | <textarea> | <textarea rows="5"></textarea> | 複数行入力できるエリア |
| チェックボックスを作りたい | <input type="checkbox"> | <input type="checkbox"> 同意する | チェックを入れる四角いボックス |
| ラジオボタンを作りたい | <input type="radio"> | <input type="radio" name="q1"> 選択肢A | 1つだけ選べる丸いボタン |
| プルダウンメニューを作りたい | <select> + <option> | <select><option>選択肢</option></select> | ドロップダウンで選択 |
| 送信ボタンを作りたい | <button> | <button type="submit">送信</button> | クリックできるボタン |
| 入力欄にラベルを付けたい | <label> | <label for="name">名前</label> | 入力欄の説明テキスト |
| フォーム全体を囲みたい | <form> | <form action="/send" method="post">...</form> | 入力データの送信先を指定 |
| 入力グループを作りたい | <fieldset> + <legend> | <fieldset><legend>個人情報</legend>...</fieldset> | 枠線付きのグループ |
| 日付入力欄を作りたい | <input type="date"> | <input type="date"> | カレンダーから日付選択 |
| ファイルアップロード欄 | <input type="file"> | <input type="file" accept="image/*"> | ファイル選択ダイアログ |
| スライダーを作りたい | <input type="range"> | <input type="range" min="0" max="100"> | ドラッグで値を選ぶバー |
ページの構造を整えたい（セマンティック）
| やりたいこと | タグ | コード例 | 表示結果の説明 |
|---|---|---|---|
| ヘッダー領域を作りたい | <header> | <header>サイト名・ナビ</header> | ページ上部のヘッダー領域 |
| フッター領域を作りたい | <footer> | <footer>著作権表示</footer> | ページ下部のフッター領域 |
| ナビゲーションを作りたい | <nav> | <nav><a href="/">ホーム</a></nav> | ナビゲーションリンクの領域 |
| メインコンテンツを示したい | <main> | <main>記事本文</main> | ページの主要コンテンツ |
| 記事セクションを作りたい | <article> | <article>ブログ記事</article> | 独立した記事コンテンツ |
| セクションを区切りたい | <section> | <section><h2>章</h2>...</section> | テーマごとのセクション |
| サイドバーを作りたい | <aside> | <aside>関連リンク</aside> | 補足情報のサイドバー |
| 汎用ブロックで囲みたい | <div> | <div class="box">内容</div> | 意味なしのブロック要素（CSS用） |
| テキスト内で範囲を指定したい | <span> | <span class="red">赤字</span> | 意味なしのインライン要素（CSS用） |
| 水平線を引きたい | <hr> | <hr> | 横方向の区切り線 |
その他の便利タグ
| やりたいこと | タグ | コード例 | 表示結果の説明 |
|---|---|---|---|
| ページタイトルを設定したい | <title> | <title>ページ名</title> | ブラウザタブに表示される名前 |
| CSSを読み込みたい | <link> | <link rel="stylesheet" href="style.css"> | 外部CSSファイルの読み込み |
| JavaScriptを読み込みたい | <script> | <script src="app.js"></script> | 外部JSファイルの読み込み |
| ページの説明を設定したい | <meta name="description"> | <meta name="description" content="説明文"> | 検索結果に表示される説明 |
| 文字コードを指定したい | <meta charset> | <meta charset="UTF-8"> | 文字化け防止の設定 |
| 開閉できるセクションを作りたい | <details> + <summary> | <details><summary>詳細</summary>内容</details> | クリックで開閉するアコーディオン |
| 進捗バーを表示したい | <progress> | <progress value="70" max="100"></progress> | 進捗を示すバー |
| 略語の正式名を示したい | <abbr> | <abbr title="HyperText Markup Language">HTML</abbr> | マウスオーバーで正式名表示 |
| 日時を機械可読にしたい | <time> | <time datetime="2026-05-01">5月1日</time> | 日時の意味を明示 |
| ルビ（ふりがな）を付けたい | <ruby> + <rt> | <ruby>漢字<rt>かんじ</rt></ruby> | 文字の上にふりがな表示 |
| HTMLの基本構造を書きたい | <!DOCTYPE html> | <!DOCTYPE html><html><head>...</head><body>...</body></html> | HTML文書の宣言と基本構造 |
| コメントを書きたい | <!-- --> | <!-- メモ --> | 画面に表示されないメモ |
PDF版ダウンロード
この一覧を印刷して手元に置けます。下のボタンを押すと印刷用レイアウトで表示されます。
この一覧を紹介する
授業やブログで紹介いただける場合は、以下をご利用ください。
📋 URLをコピー
💬 引用BOX
「こういうことがしたい」から逆引きでHTMLタグを探せる一覧表。中高生向けにわかりやすく解説。
出典: https://start-web-programming.com/blog/html-tags-reverse-lookup/
よくある質問
この一覧は何に使えますか？
HTMLでWebページを作るとき、「こういうことがしたいけど、どのタグを使えばいいかわからない」という場面で逆引きできます。授業の課題やポートフォリオ制作に便利です。
HTMLを全く知らなくても使えますか？
はい。各タグにコード例と表示結果の説明を付けているので、初めてHTMLに触れる方でも理解できます。まずはHTMLコースで基礎を学ぶとさらに効果的です。
印刷して授業で配布してもいいですか？
はい、ご自由にお使いください。印刷ボタンを押すと印刷用レイアウトで出力されます。教育目的での利用・配布は自由です。出典URLを記載いただけると嬉しいです。
全部覚える必要がありますか？
いいえ。よく使うタグは20〜30個程度です。この一覧を手元に置いて、必要なときに調べる使い方がおすすめです。使っているうちに自然と覚えます。