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

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">

テキスト系

<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>

リスト

<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>

テーブル

<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"を明示。

セマンティック要素

<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>