あなたは ------ 人目の訪問者です

HTMLタグ・ノウハウ集

よく使うHTMLタグを、実例・コード・ひとことメモつきでまとめた個人用リファレンスです。検索ボックスでタグ名や関連ワードから絞り込めます。

0 / 0 件表示中

基本構造

<!DOCTYPE html>

宣言

HTML5であることを宣言する。ファイルの一番先頭に1回だけ書く。

<!DOCTYPE html>
<html lang="ja">
...
</html>

💡 これがないとブラウザが「互換モード」で解釈し、CSSのレイアウトが崩れることがある。

<meta>

head要素

文字コードやビューポートなど、ページのメタ情報を指定する。

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

💡 viewportを忘れるとスマホでページが縮小表示され、レスポンシブCSSが効かない。

<title>

head要素

ブラウザタブや検索結果に表示されるページタイトル。1ページに1つ。

<title>ページのタイトル</title>

<link>

head要素

外部CSSファイルやfaviconなど、外部リソースを読み込む。

<link rel="stylesheet" href="css/style.css">
<link rel="icon" href="favicon.ico">

コンテナ・属性の基本

<div>

ブロック要素

意味を持たない汎用の「箱」。レイアウトやCSSでのグループ化のために使う、最も基本的なタグ。

これは<div>で囲まれた箱です
<div class="card">
  <p>この中身をまとめて1つの箱として扱える</p>
</div>

💡 意味的なタグ（section/article/nav等）が使える場面ではそちらを優先し、divは「他に適切なタグがない時」に使う。

<span>

インライン要素

意味を持たない汎用のインライン要素。文章の一部分だけにCSSを当てたい時に使う。

これはspan で色を変えた部分です。

<p>これは<span class="highlight">強調したい単語</span>です。</p>

💡 divとの違いは「改行されるかどうか」。divはブロック（前後で改行）、spanはインライン（文章の流れの中に収まる）。

class属性

グローバル属性

要素に「グループ名」を付ける属性。同じclassを複数の要素に付けられ、CSSやJSでまとめて扱える。

<p class="warning">注意文1</p>
<p class="warning">注意文2</p>

<style>
  .warning { color: red; }
</style>

💡 半角スペース区切りで複数指定できる（class="card large"）。

id属性

グローバル属性

ページ内で唯一の名前を付ける属性。1ページ内で同じidは重複させない。ページ内リンクの飛び先やJSからの1要素指定に使う。

<h2 id="contact">お問い合わせ</h2>

<a href="#contact">お問い合わせへ</a>

💡 classとの使い分け：「複数の要素に共通のスタイル」→class、「ページ内で1つだけの特定要素」→id。

コメント <!-- -->

構文

ブラウザには表示されない、コード上のメモ書き。

<!-- ここはヘッダー部分 -->
<header>...</header>

テキスト系

<h1>〜<h6>

ブロック要素

見出し。数字が小さいほど重要度が高い。1ページにh1は基本1つ。

これはh4の見出し例

<h1>ページの主題</h1>
<h2>セクション見出し</h2>

💡 見た目の大きさではなく文書構造として使う。装飾目的でスキップするのはNG。

<p>

ブロック要素

段落。テキストのまとまりを表す最も基本的なタグ。

<p>段落のテキストです。</p>

<strong> / <em>

インライン要素

strongは重要性の強調（太字表示）、emは強勢の強調（斜体表示）。

これはstrongで強調、これはemで強調。

<strong>重要な部分</strong>
<em>強調したい部分</em>

💡 <b>や<i>は見た目だけの変更。意味を持たせたいなら strong/em を使う。

<br> / <hr>

空要素

brは改行、hrは話題の区切りを表す水平線。

1行目
2行目 
1行目<br>2行目
<hr>

💡 brをレイアウト調整（余白づくり）に多用するのはCSS的にNG。marginを使う。

<blockquote>

ブロック要素

他ソースからの引用ブロック。cite属性で出典URLを示せる。

<blockquote cite="https://example.com">
  引用文
</blockquote>

<pre><code>

ブロック要素

改行やスペースをそのまま表示する整形済みテキスト。コード掲載の定番。

<pre><code>
function hello() {
  console.log("hi");
}
</code></pre>

<small> / <mark>

インライン要素

smallは注釈・免責事項などの補足的な小さい文字、markは蛍光ペンのようなハイライト。

通常価格 1,000円 （税込）

<p>通常価格 <mark>1,000円</mark> <small>（税込）</small></p>

<sub> / <sup>

インライン要素

下付き文字・上付き文字。化学式や数式、脚注番号などに使う。

H2O、x2

H<sub>2</sub>O
x<sup>2</sup>

<del> / <ins>

インライン要素

削除された内容（取り消し線）・追加された内容（下線）を示す。価格改定の表示などに便利。

2,000円 1,500円

<del>2,000円</del> <ins>1,500円</ins>

<abbr>

インライン要素

略語を表す。title属性に正式名称を書くと、マウスホバーで表示される。

HTML（カーソルを乗せてみてください）

<abbr title="HyperText Markup Language">HTML</abbr>

文字の装飾（色・サイズ・太さ）

style属性

グローバル属性

要素に直接CSSを書ける属性。色・サイズ・太さなど見た目の変更は基本的にこの中に書く。

style属性で装飾したテキスト

<p style="color: #ff6b6b; font-size: 1.3em;">
  文字
</p>

💡 少量ならstyle属性で手軽に。装飾が増えてきたら<link>で読み込む外部CSSファイルに分離するのが基本。

文字の色を変える

CSSプロパティ

colorプロパティで文字色を指定する。色名・#rrggbb・rgb()などで指定できる。

red #3b82f6 rgb(34,197,94) 

<span style="color: red;">赤い文字</span>
<span style="color: #3b82f6;">青い文字</span>

文字の大きさを変える

CSSプロパティ

font-sizeプロパティで文字サイズを指定する。px（固定）やem（相対）などの単位を使う。

小さい文字 大きい文字 
<p style="font-size: 24px;">24pxの文字</p>
<p style="font-size: 1.5em;">親の1.5倍の文字</p>

<b> / font-weight

インライン要素

太字にする方法は2通り。<b>タグは見た目だけの太字、font-weightはCSSでの指定。

bタグで太字　font-weightで太字

<b>太字</b>
<span style="font-weight: bold;">太字</span>

💡 「重要」という意味を持たせたいなら<strong>（テキスト系カテゴリ参照）、単に見た目だけ太くしたいなら<b>やCSSを使う。

<i> / font-style

インライン要素

斜体にする方法も2通り。<i>タグは見た目だけの斜体、font-styleはCSSでの指定。

iタグで斜体　font-styleで斜体

<i>斜体</i>
<span style="font-style: italic;">斜体</span>

💡 「強勢」という意味を持たせたいなら<em>（テキスト系カテゴリ参照）、単に見た目だけ斜めにしたいなら<i>やCSSを使う。

リスト

<ul><li>

ブロック要素

順序を問わない箇条書きリスト。

  • りんご
  • みかん
<ul>
  <li>りんご</li>
  <li>みかん</li>
</ul>

<ol><li>

ブロック要素

順序が意味を持つ番号付きリスト。startやtype属性で番号を調整できる。

<ol start="1">
  <li>手順1</li>
  <li>手順2</li>
</ol>

<dl><dt><dd>

ブロック要素

用語（dt）とその説明（dd）を対にした定義リスト。用語集などに便利。

<dl>
  <dt>HTML</dt>
  <dd>ページの構造を作る言語</dd>
</dl>

画像・メディア

<img>

空要素

画像を埋め込む。alt属性は必須（アクセシビリティ・SEO対策）。

サンプル画像 
<img src="photo.jpg" alt="説明文" width="200">

💡 装飾目的だけの画像はalt=""（空）にして読み上げをスキップさせる。

<figure><figcaption>

ブロック要素

画像や図とそのキャプションをセットで意味づける。

<figure>
  <img src="chart.png" alt="売上グラフ">
  <figcaption>2026年の売上推移</figcaption>
</figure>

<video>

ブロック要素

動画を埋め込む。controlsで再生UIを表示。

<video src="movie.mp4" controls width="320"></video>

<audio>

ブロック要素

音声ファイルを埋め込む。

<audio src="sound.mp3" controls></audio>

<picture>

ブロック要素

画面幅や対応フォーマットに応じて、複数の画像候補から最適なものをブラウザに選ばせる。

<picture>
  <source media="(max-width: 600px)" srcset="small.jpg">
  <img src="large.jpg" alt="説明">
</picture>

<iframe>

ブロック要素

別のページ（YouTube動画やGoogleマップなど）をページ内に埋め込む。

<iframe src="https://example.com/embed" width="560" height="315" loading="lazy"></iframe>

⚠️ 信頼できないサイトを埋め込むとセキュリティリスクになる。埋め込み元は必ず確認する。

テーブル

<table>

ブロック要素

表組み。見出しセルはth、データセルはtd。

名前点数
太郎80
 
<table>
  <thead>
    <tr><th>名前</th><th>点数</th></tr>
  </thead>
  <tbody>
    <tr><td>太郎</td><td>80</td></tr>
  </tbody>
</table>

colspan / rowspan

属性

セルを横方向・縦方向に結合する。

<td colspan="2">横に2セル分結合</td>
<td rowspan="2">縦に2セル分結合</td>

フォーム

<form>

ブロック要素

ユーザー入力を送信するためのコンテナ。

<form action="/submit" method="post">
  ...
</form>

<input>

空要素

type属性で入力形式を切り替える。スマホでは適切なキーボードが自動選択される。

<input type="email" name="email" required>
<input type="number" min="0" max="10">

<label>

アクセシビリティ

for属性を入力欄のidと一致させると、ラベルクリックでも入力欄にフォーカスできる。

<label for="name">お名前</label>
<input id="name" type="text">

💡 labelを省略するとスクリーンリーダー利用者が入力欄の目的を理解できない。

<textarea> / <select> / <button>

フォーム部品

複数行入力・選択肢・送信ボタン。

<textarea rows="4"></textarea>
<select>
  <option value="a">A</option>
</select>
<button type="submit">送信</button>

💡 buttonはtype省略時submit扱い。フォーム外で使うならtype="button"を明示。

チェックボックス / ラジオボタン

input要素

type="checkbox"は複数選択可、type="radio"は同じname内で1つだけ選択可。

<label><input type="checkbox" name="agree"> 同意する</label>

<label><input type="radio" name="plan" value="a"> プランA</label>
<label><input type="radio" name="plan" value="b"> プランB</label>

💡 ラジオボタンは同じグループ内でnameを必ず揃える。揃っていないと個別に選択できてしまう。

その他のinput type

input要素

用途に応じたUIをブラウザが自動で提供してくれる。日付選択・スライダー・色選択・ファイル選択・パスワードなど。

<input type="date">
<input type="range" min="0" max="100">
<input type="color">
<input type="file">
<input type="password">

<fieldset><legend>

ブロック要素

関連する入力項目をグループ化し、legendでグループの見出しを付ける。

<fieldset>
  <legend>お届け先情報</legend>
  <label>郵便番号 <input type="text"></label>
</fieldset>

<progress> / <meter>

ブロック要素

progressは作業の進捗、meterは決まった範囲内の測定値（残り容量など）を表す。

<progress value="70" max="100"></progress>
<meter value="0.6" min="0" max="1"></meter>

セマンティック要素

<header> / <footer>

セマンティック

ページやセクションの冒頭・末尾の情報を表す。

<header><h1>サイト名</h1></header>
<footer>&copy; 2026</footer>

<main>

セマンティック

ページの主要コンテンツ。1ページに1つだけ使う。

<main>
  <!-- ページの主内容 -->
</main>

<section> / <article>

セマンティック

sectionは意味のある区切り、articleは単体で完結する独立コンテンツ（ブログ記事など）。

<article>
  <h2>記事タイトル</h2>
  <p>本文...</p>
</article>

<aside>

セマンティック

本文からは独立した補足情報（サイドバー、広告、関連リンクなど）。

<aside>
  <p>関連リンク</p>
</aside>

インタラクティブ要素

<details><summary>

JS不要

JavaScriptなしで開閉できるアコーディオンUIを作れる。

クリックして開く

中身のテキスト

<details>
  <summary>クリックして開く</summary>
  <p>中身のテキスト</p>
</details>

<dialog>

JS連携

モーダルダイアログをネイティブに実現。showModal()で表示。

<dialog id="d">内容</dialog>
<script>
  document.getElementById('d').showModal();
</script>

<template>

JS連携

パース済みだが描画されないHTML片。JSで複製して動的に挿入する用途。

<template id="row">
  <li class="item"></li>
</template>

ノウハウ・Tips

viewportメタタグは必須

Tips

スマホで正しく表示するにはwidth=device-widthが必須。忘れるとPC向けレイアウトのまま縮小表示される。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

faviconの設定

Tips

ファイルを用意しなくても、SVGをdata URIで直接埋め込める（このサイトのタブアイコンも同じ手法）。

<link rel="icon" href="favicon.ico">

OGPの基本タグ

Tips

SNSでシェアされたときのカード表示をコントロールする。

<meta property="og:title" content="ページタイトル">
<meta property="og:description" content="説明文">
<meta property="og:image" content="https://example.com/ogp.png">

画像の出し分け（srcset）

Tips

画面幅や解像度に応じて最適な画像を読み込ませ、転送量を節約する。

<img src="s.jpg"
     srcset="s.jpg 480w, m.jpg 800w, l.jpg 1200w"
     sizes="(max-width: 600px) 100vw, 800px"
     alt="説明">

data-*属性

Tips

要素に独自データを持たせる標準的な方法。JSからはdatasetで読める。

<li data-id="42" data-status="done">タスク</li>

<script>
  el.dataset.id;      // "42"
  el.dataset.status;  // "done"
</script>

アクセシビリティの基本

Tips

アイコンだけのボタンにはaria-labelで読み上げテキストを補う。

<button aria-label="閉じる">✕</button>

文字実体参照（エスケープ）

Tips

HTMLとして特別な意味を持つ文字（< > &）や、半角スペースを保持したい時は、専用の記法に置き換える。

&lt;   → <
&gt;   → >
&amp;  → &
&nbsp; → 半角スペース（詰められない空白）

⚠️ ユーザー入力をそのままHTMLに埋め込むと、この変換漏れがXSS（クロスサイトスクリプティング）の原因になる。

classとidの使い分け

Tips

迷ったら「複数の要素に同じスタイルを当てたい」→class、「ページ内でその1箇所だけを指し示したい」→idで判断する。

<!-- 複数のカードに共通スタイル -->
<div class="card">...</div>
<div class="card">...</div>

<!-- ページ内で唯一のヘッダー -->
<div id="site-header">...</div>