HTML5 タグ 108種類 — 使い方 / 使用例 / 実行例

使い方：HTML文書全体を囲むルート要素。

使用例：

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

実行例：

（このページ全体が <html> で囲まれています）

説明：CSS, JS, meta 情報などを入れる領域。

<head>
  <meta charset="UTF-8">
  <title>ページ名</title>
</head>

（このページの <head> にタイトルなどが入っています）

<title>サイト名</title>

ブラウザのタブに表示されるテキストです。

<meta charset="UTF-8">

文字コードやSEOなどの設定に使います。

<body>
  ページに表示される内容
</body>

（このページのすべての表示内容が <body> 内にあります）

<header>ヘッダーです</header>

ヘッダーです

<footer>フッター</footer>

<nav>メニュー</nav>

<main>メイン部分</main>

メイン部分

<section>これはセクションです</section>

これはセクションです

<article>独立した記事</article>

独立した記事

<aside>補足説明</aside>

<h1>タイトル1</h1>
<h2>タイトル2</h2>
<h3>タイトル3</h3>
<h4>タイトル4</h4>
<h5>タイトル5</h5>
<h6>タイトル6</h6>

タイトル1

タイトル2

タイトル3

タイトル4

タイトル5

タイトル6

<p>これは段落です</p>

これは段落です

行1<br>行2

行1
行2

<hr>

<span>インライン要素</span>

インライン要素

<strong>重要な文字</strong>

重要な文字

<em>強調</em>

強調

<mark>ハイライト</mark>

ハイライト

<small>小さい文字</small>

小さい文字

<cite>著者名</cite>

著者名

<blockquote>引用文</blockquote>

引用文

<q>引用</q>

引用

<code>print("hi")</code>

print("hi")

<pre>
改行が
そのまま
表示されます
</pre>

改行が
そのまま
表示されます

<address>東京都〇〇</address>

東京都〇〇

<ins>追加</ins>

追加

<del>削除</del>

削除

<img src="https://raiprogram3588.com/favicon.ico">

<figure>図や表をまとめる</figure>

図や表をまとめる

<figure>
  <img src="https://raiprogram3588.com/favicon.ico">
  <figcaption>説明</figcaption>
</figure>

説明

<audio controls>
  <source src="sample.mp3">
</audio>

（音声プレイヤー）

<video width="200" controls>
  <source src="sample.mp4">
</video>

（動画プレイヤー）

<audio>
  <source src="a.mp3">
</audio>

（メディア要素内で使用）

<video>
  <track kind="captions" src="sample.vtt">
</video>

（字幕ファイルが必要）

<a href="https://example.com">リンク</a>

リンク

<button>クリック</button>

<form>
  <input type="text">
</form>

<input type="text" placeholder="名前">

<textarea>ここに入力</textarea>

<select>
  <option>りんご</option>
  <option>みかん</option>
</select>

<select>
  <option>A</option>
  <option>B</option>
</select>

<label>名前</label>
<input type="text">

名前

<fieldset>
  <legend>情報</legend>
  <input type="text">
</fieldset>

情報

<fieldset>
  <legend>タイトル</legend>
</fieldset>

タイトル

<input list="fruits">
<datalist id="fruits">
  <option value="りんご">
  <option value="みかん">
</datalist>

<progress value="50" max="100"></progress>

<meter value="0.6"></meter>

<iframe src="https://example.com" width="200" height="100"></iframe>

<canvas id="myCanvas" width="100" height="50"></canvas>

<script>alert("Hello");</script>

<noscript>JavaScript無効です</noscript>

<link rel="stylesheet" href="style.css">

（CSSを外部参照します）

<style>
p { color: red; }
</style>

赤文字の段落

<b>太字</b>

太字

<i>斜体</i>

斜体

<u>下線</u>

下線

<s>打消し</s>

~~打消し~~

H<sub>2</sub>O

H₂O

10<sup>2</sup>

10²

<abbr title="Hyper Text Markup Language">HTML</abbr>

HTML

<time datetime="2025-11-30">2025年11月30日</time>

2025年11月30日

<details>
  <summary>タイトル</summary>
  内容
</details>

タイトル

内容

<details>
  <summary>開く</summary>
  詳細
</details>

開く

詳細

<dialog open>ダイアログ</dialog>

<menu>
  <li>項目1</li>
</menu>

項目1

<menu>
  <menuitem label="項目"></menuitem>
</menu>

<ol>
  <li>項目1</li>
  <li>項目2</li>
</ol>

項目1
項目2

<ul>
  <li>項目A</li>
  <li>項目B</li>
</ul>

項目A
項目B

<ul>
  <li>項目</li>
</ul>

項目

<table border="1">
  <tr><td>A</td></tr>
</table>

<table border="1">
  <tr><td>行1</td></tr>
</table>

行1

<table border="1">
  <tr><td>セル1</td></tr>
</table>

セル1

<table border="1">
  <tr><th>見出し</th></tr>
</table>

見出し

<table border="1">
  <thead><tr><th>H</th></tr></thead>
</table>

H

<table border="1">
  <tbody><tr><td>データ</td></tr></tbody>
</table>

データ

<table border="1">
  <tfoot><tr><td>合計</td></tr></tfoot>
</table>

合計

<table border="1">
  <colgroup><col span="2"></colgroup>
</table>

<table border="1">
  <col span="1">
</table>

<table border="1">
  <caption>表タイトル</caption>
</table>

<embed src="sample.pdf" width="100" height="50">

<object data="sample.pdf" width="100" height="50"></object>

<object data="movie.mp4">
  <param name="autoplay" value="true">
</object>

<img src="img.png" usemap="#map">
<map name="map">
  <area shape="rect" coords="0,0,50,50" href="#">
</map>

<map name="map">
  <area shape="circle" coords="25,25,20" href="#">
</map>

<bdi>左から右</bdi>

左から右

<bdo dir="rtl">右から左</bdo>

右から左

改行候補

改行候補

<template>
  <p>テンプレート</p>
</template>

（表示されませんが JSで利用可能）

<slot name="content"></slot>

（Web Components内に内容を差し込む）

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

<svg width="100" height="50">
  <rect width="100" height="50" fill="blue"></rect>
</svg>

<svg width="100" height="50">
  <path d="M10 10 H 90 V 40 H 10 Z" stroke="red" fill="transparent"></path>
</svg>

<svg width="50" height="50">
  <circle cx="25" cy="25" r="20" fill="green"></circle>
</svg>

<svg width="100" height="50">
  <ellipse cx="50" cy="25" rx="40" ry="20" fill="orange"></ellipse>
</svg>

<svg width="100" height="50">
  <line x1="0" y1="0" x2="100" y2="50" stroke="black"></line>
</svg>

<svg width="100" height="50">
  <polyline points="0,0 50,25 100,0" stroke="blue" fill="none"></polyline>
</svg>

<svg width="100" height="50">
  <polygon points="50,0 100,50 0,50" fill="purple"></polygon>
</svg>

<svg width="200" height="50">
  <text x="10" y="30" font-size="20">SVG文字</text>
</svg>

← Tools