HTML5で使うタグ一覧と使い方！すべて覚える必要はないので忘れた時にチェック

ドキュメントタイプ宣言

<!DOCTYPE html>: HTML5であることを示します。

ルート要素

<html> ～ </html>: HTMLであることを示します。

lang属性
言語を指定します。

manifest属性
manifestファイルのURIを指定します。

メタデータ

<head> ～ </head>: HTMLの情報を示します。

<title> ～ </title>: HTMLのタイトルを指定します。

<meta ～ >: HTMLのメタ情報を指定します。

name属性
メタデータ名を指定します。

http-equiv属性
MIMEタイプを指定します。

content属性
メタデータの値を指定します。

charset属性
HTMLの文字コードを指定します。

<base ～ >: 基準となるURLを指定します。

href属性
基準となるURIを指定します。

target属性
リンク先の対象ターゲットを指定します。

<link ～ >: 外部リソースを指定します。

href属性
外部リソースのURLを指定します。

rel属性
外部リソースの位置付けを指定します。

type属性
外部リソースのMIMEタイプを指定します。

media属性
外部リソースの対象メディアを指定します。

hrefflag属性
外部リソースの言語を指定します。

sizes属性
アイコンのサイズを指定します。

<style> ～ </style>: CSSを記述します。

type属性
MIMEタイプを指定します。

media属性
対象メディアを指定します。

スクリプト

<script> ～ </script>: スクリプトを指定します。

src属性
スクリプトのURLを指定します。

type属性
スクリプトのMIMEタイプを指定します。

async属性
非同期での実行を指定します。

defer属性
HTML読み込み後に実行を指定します。

charset属性
スクリプトの文字コードを指定します。

<noscript> ～ </noscript>: スクリプトが動作しない場合の表示内容を示します。

セクション

<body> ～ </body>: HTMLの本体を示します。

<header> ～ </header>: ヘッダー（先頭の項目）を示します。

<footer> ～ </footer>: フッター（後尾の項目）を示します。

<nav> ～ </nav>: ナビゲーションを示します。

<section> ～ </section>: ひとつの項目を示します。

<article> ～ </article>: 完結した記事を示します。

<aside> ～ </aside>: 補足の項目を示します。

<h1> ～ </h1>: 見出しを示します。見出しタグは「h1」～「h6」の6種類あります。

<address> ～ </address>: 連絡先を示します。

コンテンツのグループ化

<p> ～ </p>: ひとつの段落を示します。

<hr>: テーマの区切りを示し、水平線が引かれます。

<pre> ～ </pre>: スペースや改行をそのまま表示します。

<blockquote> ～ </blockquote>: 引用の項目を示します。

cite属性
引用元のURLを指定します。

<ol> ～ </ol>: 順序付きのリストを表示します。

reversed属性
並び順の降順を指定します。

start属性
開始番号を指定します。

<ul> ～ </ul>: 順序なしのリストを表示します。

<li> ～ </li>: リスト項目を示します。

value属性
順序を指定します。

<dl> ～ </dl>: 説明リストを表示します。

<dt> ～ </dt>: 説明する用語などを示します。

<dd> ～ </dd>: 説明文を示します。

<figure> ～ </figure>: 連絡先を示します。

<figcaption> ～ </figcaption>: 図表などの見出しを示します。

<div> ～ </div>: 特定の項目を示します。

<main> ～ </main>: メインの項目を示します。

テキストの意味付け

<a> ～ </a>: リンクを示します。

href属性
リンク先のURLを指定します。

rel属性
リンク先の位置付けを指定します。

target属性
リンク先の対象ターゲットを指定します。

type属性
リンク先のMIMEタイプを指定します。

media属性
リンク先の対象メディアを指定します。

hreflang属性
リンク先の言語を指定します。

ping属性
ping送信するURLを指定します。

download属性
ダウンロードファイルのURLを指定します。

<em> ～ </em>: アクセントを示します。

<strong> ～ </strong>: 重要性を示します。

<small> ～ </small>: 注釈を示します。

<s> ～ </s>: 正確ではなくなった内容を示し、打消し線が引かれます。

<cite> ～ </cite>: 作品の情報を示します。

<q> ～ </q>: 引用文を示します。

cite属性
引用元のURLを指定します。

<dfn> ～ </dfn>: 用語を示します。

title属性
用語の正式名称を指定します。

<abbr> ～ </abbr>: 略語を示します。

title属性
略語の正式名称を指定します。

<time> ～ </time>: 日時を示します。

datetime属性
日時を指定します。

<code> ～ </code>: ソースコードを示します。

<var> ～ </var>: 変数を示します。

<samp> ～ </samp>: プログラムの出力サンプルを示します。

<kbd> ～ </kbd>: ユーザーが入力する内容を示します。

<sub> ～ </sub>: 下付き文字を示します。

<sup> ～ </sup>: 上付き文字を示します。

<i> ～ </i>: 心の声など他と区別されるテキストを示します。

<b> ～ </b>: キーワードなど他と区別されるテキストを示します。

<mark> ～ </mark>: ハイライトを表示します。

<ruby> ～ </ruby>: ふりがなを示します。

<rt> ～ </rt>: ふりがなの文字を示します。

<rp> ～ </rp>: ふりがなを囲む括弧を示します。

<bdo> ～ </bdo>: 文字の表記方向を指定します。

dir属性
表記方向を指定します。

<span> ～ </span>: ひとつの範囲を示します。

lang属性
言語を指定します。

dir属性
表記方向を指定します。

<br>: 改行します。

<wbr>: 改行位置の候補を示します。

編集

<ins> ～ </ins>: 追加された項目を示します。

cite属性
変更の説明をするURLを指定します。

datetime属性
変更した日時を指定します。

<del> ～ </del>: 削除された項目を示します。

cite属性
削除の説明をするURLを指定します。

datetime属性
削除した日時を指定します。

コンテンツの埋め込み

<img ～ >: 画像を表示します。

src属性
画像ファイルのURLを指定します。

alt属性
画像の代替テキストを指定します。

width属性
横幅を指定します。

height属性
高さを指定します。

usemap属性
イメージマップ名を指定します。

ismap属性
サーバー側イメージマップを指定します。

<iframe> ～ </iframe>: インラインフレームを表示します。

src属性
フレーム表示するURLを指定します。

name属性
フレーム名を指定します。

width属性
横幅を指定します。

height属性
高さを指定します。

srcdoc属性
フレーム表示する内容の属性値を指定します。

sandbox属性
フレーム表示する内容の制限を指定します。

<embed> ～ </embed>: プラグインデータを埋め込みます。

src属性
データのURLを指定します。

type属性
データのMIMEタイプを指定します。

width属性
横幅を指定します。

height属性
高さを指定します。

<object> ～ </object>: 外部リソースを埋め込みます。

data属性
外部リソースのURLを指定します。

name属性
外部リソース名を指定します。

type属性
外部リソースのMIMEタイプを指定します。

width属性
横幅を指定します。

height属性
高さを指定します。

usemap属性
イメージマップ名を指定します。

form属性
対応するフォームを指定します。

<param> ～ </param>: パラメータを指定します。

name属性
パラメータ名を指定します。

value属性
パラメータの値を指定します。

<video> ～ </video>: 動画を再生します。

src属性
動画ファイルのURLを指定します。

width属性
横幅を指定します。

height属性
高さを指定します。

poster属性
動画の代替画像を指定します。

preload属性
動画の事前読み込みを指定します。

autoplay属性
自動再生を指定します。

loop属性
ループ再生を指定します。

controls属性
コントロールを表示します。

<audio> ～ </audio>: 音声を再生します。

src属性
音声ファイルのURLを指定します。

preload属性
音声の事前読み込みを指定します。

autoplay属性
自動再生を指定します。

loop属性
ループ再生を指定します。

controls属性
コントロールを表示します。

<source> ～ </source>: 動画や音声の情報を示します。

src属性
ファイルのURLを指定します。

type属性
ファイルのMIMEタイプを指定します。

media属性
ファイルの対象メディアを指定します。

<canvas> ～ </canvas>: 図形などを描きます。

width属性
横幅を指定します。

height属性
高さを指定します。

<map> ～ </map>: イメージマップを表示します。

name属性
イメージマップ名を指定します。

<area> ～ </area>: イメージマップのリンク領域を設定します。

href属性
リンク先のURLを指定します。

rel属性
リンク先の位置付けを指定します。

target属性
リンク先の対象ターゲットを表示します。

type属性
リンク先のMIMEタイプを指定します。

alt属性
リンクの代替テキストを指定します。

media属性
リンク先の対象メディアを指定します。

coords属性
リンク領域の座標を指定します。

shape属性
リンク領域の形状を指定します。

ping属性
ping送信するURLを指定します。

hreflang属性
リンク先の言語を表示します。

テーブル

<table> ～ </table>: 表を示します。

summary属性
表の説明を指定します。

<caption> ～ </caption>: 表の見出しを示します。

<colgroup> ～ </colgroup>: 表の縦列をグループ化します。

span属性
グループ化する縦列の数を指定します。

<col ～ >: 表の列を示します。

span属性
縦列の数を指定します。

<thead> ～ </thead>: 表のヘッダー（先頭の項目）を示します。

<tbody> ～ </tbody>: 表のボディ（メイン項目）を示します。

<tfoot> ～ </tfoot>: 表のフッター（後尾の項目）を示します。

<tr> ～ </tr>: 表の行を示します。

<th> ～ </th>: 表の見出しセルを示します。

colspan属性
横方向にまたがる列の数を指定します。

rowspan属性
縦方向にまたがる行の数を指定します。

headers属性
対応する項目を指定します。

scope属性
対応する行・列の範囲を指定します。

<td> ～ </td>: 表のデータセルを示します。

colspan属性
横方向にまたがる列の数を指定します。

rowspan属性
縦方向にまたがる行の数を指定します。

headers属性
対応する項目を指定します。

フォーム

<form> ～ </form>: 送信フォームを示します。

action属性
送信先URLを指定します。

method属性
送信方法を指定します。

name属性
フォーム名を指定します。

target属性
フォーム送信する対象ターゲットを指定します。

accept-charset属性
送信データの文字コードを指定します。

autocomplete属性
入力候補の自動保管を指定します。

enctype属性
送信データの形式を指定します。

novalidate属性
入力内容の検証を指定します。

<fieldset> ～ </fieldset>: フォーム部品をグループ化します。

form属性
対応するフォームを指定します。

name属性
グループ名を指定します。

disabled属性
フォーム項目の無効化を指定します。

<legend> ～ </legend>: 部品グループの見出しを示します。

<label> ～ </label>: フォーム部品とラベルとの関連を示します。

form属性
対応するフォームを指定します。

for属性
対応するフォーム部品を指定します。

<input ～ >: フォーム部品を表示します。

form属性
対応するフォームを指定します。

name属性
フォーム部品名を指定します。

value属性
値を指定します。

type属性
フォーム部品の種類を指定します。

max属性
入力できる最大値を指定します。

min属性
入力できる最小値を指定します。

maxlength属性
入力可能な最大文字数を指定します。

size属性
表示文字数を指定します。

src属性
画像ファイルのURLを指定します。

alt属性
画像の代替テキストを指定します。

width属性
横幅を指定します。

height属性
高さを指定します。

formaction属性
送信先URLを指定します。

formenctype属性
送信データの形式を指定します。

formmethod属性
送信方法を指定します。

formnovalidate属性
入力内容の検証を指定します。

formtarget属性
フォーム送信の対象ターゲットを指定します。

accept属性
ファイルのMIMEタイプを指定します。

autocomplete属性
入力候補の自動保管を指定します。

autofocus属性
自動フォーカスを指定します。

checked属性
選択された状態を指定します。

disabled属性
操作の無効化を指定します。

list属性
入力候補のデータリストを指定します。

multiple属性
複数の値の入力・選択を指定します。

pattern属性
データの検証に使う書式を指定します。

placeholder属性
初期表示する内容を指定します。

readonly属性
入力内容の変更の禁止を指定します。

required属性
入力必須を指定します。

step属性
入力可能データの変化の値を指定します。

<select> ～ </select>: セレクトボックスを表示します。

form属性
対応するフォームを指定します。

name属性
セレクトボックス名を指定します。

size属性
選択肢の数を指定します。

autofocus属性
自動フォーカスを指定します。

disabled属性
操作の無効化を指定します。

multiple属性
複数選択を指定します。

<datalist> ～ </datalist>: 入力候補のデータリストを示します。

<optgroup> ～ </optgroup>: 選択肢をグループ化します。

label属性
グループ名を指定します。

disabled属性
操作の無効化を指定します。

<option> ～ </option>: 選択肢を指定します。

label属性
選択肢名を指定します。

value属性
選択肢の値を指定します。

selected属性
選択された状態を指定します。

disabled属性
操作の無効化を指定します。

<textarea> ～ </textareagt;: テキスト入力欄を表示します。

form属性
対応するフォームを指定します。

name属性
テキストエリア名を指定します。

cols属性
一行当たりの最大文字数を指定します。

rows属性
表示行数を指定します。

maxlength属性
入力可能な最大文字数を指定します。

autofocus属性
自動フォーカスを指定します。

disabled属性
操作の無効化を指定します。

placeholder属性
初期表示する内容を指定します。

readonly属性
入力内容の変更の禁止を指定します。

required属性
入力必須を指定します。

wrap属性
改行ルールを指定します。

<button> ～ </button>: ボタンを表示します。

form属性
対応するフォームを指定します。

name属性
ボタン名を指定します。

value属性
値を指定します。

type属性
ボタンの種類を指定します。

formaction属性
送信先URLを指定します。

formenctype属性
送信データの形式を指定します。

formmethod属性
送信方法を指定します。

formnovalidate属性
入力内容の検証を指定します。

formtarget属性
フォーム送信の対象ターゲットを指定します。

autofocus属性
自動フォーカスを指定します。

disabled属性
操作の無効化を指定します。

<output> ～ </output>: 計算結果を示します。

form属性
対応するフォームを指定します。

name属性
要素名を指定します。

for属性
対応する属性値を指定します。

<progress> ～ </progress>: 進行状況を示します。

form属性
対応するフォームを指定します。

value属性
作業の進捗を指定します。

max属性
必要とする総作業量を指定します。

<meter> ～ </meter>: 特定範囲の測定値を示します。

value属性
測定された値を指定します。

max属性
上限値を指定します。

min属性
下限値を指定します。

high属性
高いとされる値を指定します。

low属性
低いとされる値を指定します。

optimum属性
最適とされる値を指定します。

ユーザーと双方向な要素

<details> ～ </details>: リクエストに応じて詳細情報を示します。

<summary> ～ </summary>: 詳細情報の要約を示します。

<menu> ～ </menu>: 操作メニューを示します。

type属性
メニューの種類を指定します。

label属性
メニュー名を指定します。

<menuitem ～ >: ポップアップメニューを示します。

type属性
メニューの種類を指定します。

label属性
メニュー名を指定します。

icon属性
アイコンを指定します。

radiogroup属性
ラジオボタンのグループ名を指定します。

checked属性
選択された状態を指定します。

disabled属性
メニュー項目の無効化を指定します。

default属性
デフォルトを指定します。