minto.tech スマホ（Android/iPhone）・PC（Mac/Windows）の便利情報をお届け！ 月間アクセス160万PV！スマートフォン、タブレット、パソコン、地デジに関する素朴な疑問や、困ったこと、ノウハウ、コツなどが満載のお助け記事サイトはこちら！
※本ページにはプロモーション(広告)が含まれています
HTMLタグはマークアップ言語と呼ばれるもので、「Hypertext Markup Language」の略語です。ほとんどのウェブサイトはこのHTMLと、デザインを担うCSSによって作成されております。
HTMLを使いこなすことによって、ページがどのページであるのかといったヘッダー情報やサイトのコンテンツを豊富な表現で作ることが可能です。
こちらの記事では基本的なHTMLのタグについて網羅的にご紹介していきます。これからHTMLを学びたい方や、サイト作成中でHTMLのタグ一覧表が欲しい方はこちらの記事を参考にして頂ければと思います。
この記事のまとめ:
この記事のまとめ:
【目的別】HTMLタグ一覧
HTMLとはウェブサイトを作成するためのマークアップ言語です。HTMLには各機能を備えたタグというものが用意されており、タグを使ってコードを書いていくことによってリンクを貼ったり表を作ったりすることができます。
実際にデザインをするためにはCSSなどの別の言語を使う必要がありますが、このHTMLとCSSを使えば静的なウェブサイトを作ることができます。
まずはHTMLタグの種類について、どのようなものがあるのか確認していきましょう。
リンク
リンクタグは、リンクを貼るためのタグになります。リンクタグは別ページへのリンクを貼ったり、head間で使用して別ファイルとの関係性を示すことができます。
| <a> | リンクを貼るためのタグ。<a href=”サイトURL”>サイト名</a>のような形で使う |
| <map> | イメージマップを作成して一つの画像に複数リンクを貼るためのタグ |
| <link> | head間で使用するタグ。文章ファイルと関連する別ファイルを指定し、その関係性をrelによって定義する |
| <base> | head間で使用する。相対パスを記述する場合の基準となるURLを指定する |
| <area> | map間で使用する。イメージマップ内でリンク領域とリンク先を指定する |
テキスト内容
テキスト内容タグはテキストの内容が意味するものを伝えるためのタグになります。太字にして強調するためのタグや、別サイトからの引用であることを示すタグがあります。
| <strong> | テキストを強調して表示するためのタグ。下部のemタグと比較してより強い強調を意味する |
| <em> | テキストを強調して表示するためのタグ。strongタグと比較すると弱い強調を意味する |
| <blockquote> | 引用箇所であることを示すタグ。範囲内で改行することもできる |
| <q> | 引用箇所であることを示すタグ。範囲内で改行することはできない |
| <cite> | 引用箇所であることを示すタグ。書名や著作者に対して使用する |
| <def> | 言葉を定義したことを示すタグ。 |
| <del> | 削除した文章であることを明示するタグ。打ち消し線が表示される |
| <ins> | 追加した文章であることを明示するタグ。下線が表示される |
| <address> | 連絡先を示すタグ。タグ内で住所やメールアドレス、電話番号を記載する |
| <var> | テキストが変数名であることを示すタグ |
| <abbr> | テキスト内容が頭文字以外を使った略語であることを示すタグ |
| <acronym> | テキスト内容が頭文字を使った略語であることを示すタグ |
| <samp> | テキスト内容がプログラム実行後のサンプル結果であることを示すタグ |
| <kbd> | テキスト内容がキーボードなどから入力される内容であることを示すタグ |
テキスト表現
テキスト表現タグは、フォントの指定やカラー、大きさ、太さ、書体などを指定することのできるタグです。打ち消し線を引くなどは、CSSで表現するよりもHTMLで示した方が簡単ですので覚えておくと便利です。
| <font> | フォントの種類や文字の大きさ、カラーを指定するタグ |
| <basefont> | 基準となるフォントの種類や文字の大きさ、カラーを指定するタグ |
| <big> | テキストを少し大きくするタグ |
| <small> | テキストを少し小さくするタグ |
| <b> | テキストを太字にするタグ |
| <i> | テキストを斜め（イタリック体）にするタグ |
| <u> | テキストに下線を引くタグ |
| <s>,<strike> | 打ち消し線を表示するタグ。どちらも同じ用途で使われるが、strikeの方が多くのブラウザでサポートされている |
| <sub> | 下付き文字(下に半個分下がった文字)にするタグ |
| <sup> | 上付き文字(上に半個分上がった文字)にするタグ |
| <tt> | 文字の幅を均等にするタグ |
| <ruby> | ルビ振りの範囲を示すタグ |
| <rb> | ルビを振る対象の文字を指定するタグ |
| <rp> | ルビの内容を囲む記号を示すタグ |
| <rt> | ルビの内容を示すタグ |
| <br> | 改行するタグ |
次ページ：画像動画関連
画像動画関連
画像動画関連タグは、サイトに画像や動画を表示したり外部の動画などをサイトに埋め込むためのタグです。画像動画関連タグを利用することによってサイトにテキスト以外の要素を表示させることができるようになり、見栄えが格段に良くなります。
| <img> | 画像を表示させるためのタグ |
| <embed> | 動画や音声を埋め込むためのタグ |
| <embed> | embedで埋め込みがブラウザにサポートされていない場合に表示させる内容 |
| <obj> | 画像や動画などデータ形式に関わらずサイトに埋め込むためのタグ |
| <bgsound> | サイトでバックサウンド(BGM)を流すためのタグ |
表・テーブル
表・テーブル関連タグはサイト上に表テーブルを利用するためのタグです。文章内で表を使いたい場合や、サイト全体のレイアウトにも利用することができます。
| <table> | テーブルを作成するタグ |
| <tr> | テーブルの行を作成するタグ |
| <th> | テーブルの見出しを作成するタグ |
| <td> | テーブルの内容を作成するタグ |
| <thead> | テーブルの見出し行であることを明示するタグ |
| <tbody> | テーブルの内容行であることを明示するタグ |
| <caption> | テーブルの見出しタイトルをつけるためのタグ |
| <col> | テーブルの縦の行の幅や使用する列数、横方向などを指定するタグ |
| <center> | 文字を中央表示するタグ |
| <hr> | 横罫線を作成するタグ |
リスト
リスト関連タグはサイト内で箇条書き表示をするときに使用するタグです。番号順で数字が並ぶリストと順序のないリストの二種類のリストを作成することができます。
| <ol> | order listの略で、数字の順番表示のある箇条書きを作成するタグ |
| <ul> | unordered listの略で、数字の順番のない箇条書きを作成するタグ |
| <li> | リストの内容を作成するタグ |
| <dl> | 何かの定義や属性情報を説明する箇条書きである事を示すタグ |
| <dt> | 定義する対象を示すタグ |
| <dd> | 定義内容を示すタグ |
文書構造
文書構造タグは、文書のメタ情報や本体範囲を示したり、見出しやタイトル、段落を作成することのできるタグです。HTMLの中では最も使われることの多い基本的なタグとなりますので、これらはしっかりと覚えておくようにしましょう。
| <!DOCTYPE> | ドキュメントタイプを指定するタグ |
| <HTML> | HTML文書であることを明示するタグ |
| <head> | ヘッダー情報を記す範囲を示すタグ |
| <meta> | ヘッダー情報の範囲の中で文書のメタ情報を示すタグ |
| <title> | 文書・ページのタイトルを示すタグ |
| <body> | 文書の本体情報を記す範囲を示すタグ |
| <h1>~<h6> | 文章中の見出しをつけるタグ |
| <p> | 文書内で段落を作成するタグ |
よくある質問と回答：
Q1: HTMLだけでウェブサイトは作れますか？ A1: HTMLだけでも基本的な構造は作れますが、見栄えの良いサイトを作るにはCSSが必要です。
Q2: HTMLの勉強方法を教えてください。 A2: この記事のタグ一覧を参考に、実際にコードを書きながら学習することをお勧めします。
Q3: 最も重要なHTMLタグは何ですか？ A3: 文書構造タグ（DOCTYPE、HTML、head、body）は、すべてのHTMLファイルで必要な基本タグです。
HTMLの最新トレンドと実践的な使い方（2024年版）
セマンティックHTML5の重要性
最近のWeb開発では、検索エンジンの理解度向上のため、より意味のある構造化が重要になっています。
<!-- 従来の書き方 -->
<div class="header">
<div class="nav">...</div>
</div>
<!-- セマンティックな書き方 -->
<header>
<nav>...</nav>
</header>
アクセシビリティを考慮したマークアップ
<!-- アクセシビリティに配慮した例 -->
<button aria-label="メニューを開く" role="button">
<span class="icon">≡</span>
</button>
<img src="graph.png" alt="2023年度の売上グラフ" />
レスポンシブ対応のHTML要素
<picture>
<source media="(min-width: 768px)" srcset="large.jpg">
<source media="(min-width: 320px)" srcset="medium.jpg">
<img src="small.jpg" alt="レスポンシブ画像">
</picture>HTML5の新しい入力タイプ
<form>
<input type="date" name="birthday">
<input type="email" name="email">
<input type="tel" name="phone">
<input type="color" name="favorite-color">
</form>メタタグの最適化
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="ページの簡潔な説明">
<meta property="og:title" content="SNSでシェアされる際のタイトル">
<meta property="og:image" content="シェア時の画像URL">
</head>実装時の注意点
- HTML5のバリデーションを定期的に確認する
- 適切なドキュメントアウトラインを意識する
- 見出しタグ（h1-h6）の階層構造を守る
- imgタグには必ずalt属性を設定する
パフォーマンス最適化
<!-- 遅延読み込みの実装 -->
<img loading="lazy" src="image.jpg" alt="遅延読み込み画像">
<!-- プリロード -->
<link rel="preload" href="important-style.css" as="style">
よくある間違いと修正方法
- インライン要素内にブロック要素を配置
- HTML構造の過度な入れ子
- 見出しレベルのスキップ
- フォーム要素のラベル欠落
HTML5で作る最新のインタラクティブコンテンツ
Canvas要素による動的表現
<canvas id="myChart" width="400" height="400"></canvas>- グラフ描画
- アニメーション実装
- ゲーム開発への活用例
インタラクティブフォームの実装
<form id="modern-form">
<!-- 入力候補を提示 -->
<input type="text" list="suggestions">
<datalist id="suggestions">
<option value="選択肢1">
<option value="選択肢2">
</datalist>
<!-- 入力値の検証 -->
<input type="text" pattern="[A-Za-z]{3}" required>
<!-- カスタム範囲選択 -->
<input type="range" min="0" max="100" step="10">
<!-- プログレスバー -->
<progress value="70" max="100">70%</progress>
</form>
検索エンジン最適化のためのHTML構造
構造化データの実装
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "記事タイトル",
"author": {
"@type": "Person",
"name": "著者名"
},
"datePublished": "2024-01-01"
}
</script>ローカルSEO対策
<div itemscope itemtype="http://schema.org/LocalBusiness">
<h1 itemprop="name">ビジネス名</h1>
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress">住所</span>
<span itemprop="telephone">電話番号</span>
</div>
</div>セキュリティ対策とプライバシー保護
セキュアなフォーム実装
<!-- CSRFトークンの実装 -->
<form method="POST">
<input type="hidden" name="csrf_token" value="token123">
<!-- 機密情報の入力 -->
<input type="password" autocomplete="new-password">
<!-- クロスサイトスクリプティング対策 -->
<input type="text" pattern="[^<>]*">
</form>
プライバシーポリシー対応
<!-- Cookieの同意バナー -->
<div class="cookie-consent">
<p>当サイトではCookieを使用しています</p>
<button type="button">同意する</button>
</div>パフォーマンスチューニング
リソース最適化
<!-- 重要なCSSの即時読み込み -->
<link rel="stylesheet" href="critical.css">
<!-- 非重要なCSSの遅延読み込み -->
<link rel="stylesheet" href="non-critical.css" media="print" onload="this.media='all'">
<!-- 画像の最適化 -->
<picture>
<source type="image/webp" srcset="image.webp">
<source type="image/jpeg" srcset="image.jpg">
<img src="fallback.jpg" alt="最適化された画像">
</picture>
マイクロインタラクションの実装
アニメーション要素
<!-- スムーズスクロール -->
<a href="#section" scroll-behavior="smooth">セクションへ</a>
<!-- アニメーション付きの開閉 -->
<details>
<summary>詳細を表示</summary>
<p>詳細なコンテンツ</p>
</details>
アクセシビリティの高度な実装
ARIA属性の活用
<!-- カスタムコンポーネント -->
<div role="tablist">
<button role="tab" aria-selected="true" aria-controls="panel1">
タブ1
</button>
<div role="tabpanel" id="panel1" aria-labelledby="tab1">
コンテンツ1
</div>
</div>
<!-- スクリーンリーダー専用情報 -->
<span class="sr-only">スクリーンリーダーのみに読み上げる情報</span>
レスポンシブデザインの応用
アダプティブロード
<!-- ビューポートサイズに応じた最適な画像読み込み -->
<img
sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 800px"
srcset="small.jpg 300w, medium.jpg 600w, large.jpg 900w"
src="fallback.jpg"
alt="レスポンシブ画像">開発効率を上げるためのベストプラクティス
コメントとドキュメント
<!-- コンポーネントの開始 -->
<div class="component">
<!-- @todo: アクセシビリティ対応を追加 -->
<!-- @note: IE11では非対応 -->
コンポーネントの内容
</div>
<!-- コンポーネントの終了 -->デバッグとテスト
<!-- 開発環境でのデバッグ情報 -->
<div data-testid="debug-info" hidden>
<pre>
ブラウザ情報:
ビューポートサイズ:
読み込み時間:
</pre>
</div>まとめ
HTML言語はサイトを作成する上で欠かすことのできない重要な言語です。
他の開発言語と比較して覚えることも少なく、すぐにマスターすることができますので、これから自分でサイトを作成したいと考えている方は是非こちらの一覧をそのまま覚えていくと良いでしょう。
また、サイトはCSSというデザインを指定する言語と合わせて作られていることがほとんどで、そちらも合わせて勉強すると自由にサイトを作っていくことができるようになります。
