HTML5の全タグ要素・属性・値 一覧【目的別】

プログラミング
2019.06.05

この記事では、HTML5の全タグ要素・属性・値 一覧を目的別に表示しています。※HTML5の記述方法については「」をご覧下さい。

Contents

ドキュメントタイプ宣言 Document type definition

要素 要素の要約
<!DOCTYPE html> ドキュメントタイプを宣言

根本となる要素 The root element

要素 属性 値 要素と属性と値の要約
<html> — — HTML文書であることを提示  
lang 言語コード（ja/en/..etc） 言語を指定
manifest manifestファイルのURI manifestファイルのURIを指定

文書のメタデータ Document metadata

要素 属性 値 要素と属性の要約
<head> — — 文書のヘッダ情報を示す。言い換えれば、文書のメタデータを集めて示す。
<title> — — htmlファイルのタイトルを記述します。
<base> — — 相対パスの基準URIを指定
href（必須属性） URI 基準となるURIを指定
target リンク先 リンク先ターゲットを指定する
<link> — — リンクする外部リソースを指定
rel（必須属性） — 現在のファイルとリンク先の外部ファイルとの関係性を表すキーワードを指定する
alternate 現在文書の代替表現を指定する。
author 現在文書の作者へのリンクを指定する。
help ヘルプへのリンクを指定する。
icon 現在文書を表すアイコンをインポートします。
license 現在文書の著作権ライセンスに関する文書へのリンクを指定します。
next 現在文書の一つ後の文書へのリンクを指定します。
pingback 現在文書のpingbackサーバのアドレスを指定します。
prefetch 先読みするべき外部リソースを指定します。
prev 現在文書の一つ前の文書へのリンクを指定します。
search 現在文書の関連ページを検索するためのリソースへのリンクを指定します。
sidebar ブラウザのサイドバーに表示する外部リソースを指定します。
stylesheet スタイルシートをインポートします。
tag 現在文書に付けるタグを指定します。
href（必須属性） 外部リソースのURL リンクする外部リソースのURLを示す。
media 外部リソースのメディア リンクする外部リソースの対象メディアを指定する
hrefflag リンクする外部リソースの言語 リンクする外部リソースの言語を指定する
type 外部リソースのMIMEタイプ リンクする外部リソースのMIMEタイプ
sizes アイコンのサイズ アイコンのサイズ
<meta> — — その文書に関する情報（メタデータ）を指定する際に使用します。
name メタデータの名前 メタデータの名前を指定
http-equiv プラグマ指示子 プラグマ指示子を指定
content メタデータの値 メタデータの値などを指定
charset 文字エンコーディング HTML文書の文字エンコーディングを指定
<style> — — スタイルシートを記述する際に使用します
media all すべてのメディア（初期値）
screen 一般的なディスプレイ
print 通常のプリンタ
projection プロジェクタ
tv テレビ
handheld ハンドヘルドデバイス
tty 固定文字サイズの端末
embossed 点字プリンタ
braille 点字の触角デバイス
speech 読み上げブラウザ
type スタイリング言語 スタイリング言語（スタイルシートのMIMEタイプ）を指定

スクリプト Scripting

要素 属性 値 要素と属性と値の要約
<script> — — 文書にJavaScriptなどのスクリプトや、データブロックを組み込む際に使用します。
src URL 外部スクリプトファイルのURLを指定
async — 利用可能な時点でスクリプトを実行する。値は要らず単独で機能する。
defer — HTML文書を読み込んだ時点でスクリプトを実行する。値は要らず単独で機能する。
type スクリプトのMIMEタイプ スクリプトのMIMEタイプを指定（初期値は”text/javascript”）
charset 外部スクリプトファイルの文字エンコーディング 外部スクリプトファイルの文字エンコーディングを指定
<noscript> — — スクリプトが動作しない環境用の表示内容を指定する際に使用します。

セクション Sections

要素 属性 値 要素と属性の要約
<body> — — 文書の本体を表す際に使用します。文書の本体とはブラウザ上に表示されるメインコンテンツのことです。
<section> — — ウェブページ内のその部分が、一つのセクションであることを示す際に使用します。
<nav> — — ナビゲーションであることを示す際に使用します。 ナビゲーションとは、ウェブサイト内の他のページへのリンクや、ページ内リンクなどのことです。
<article> — — 内容が単体で完結するセクションであることを示す際に使用します。 例えば、フォーラムでの投稿、雑誌や新聞の記事、ブログのエントリ、コメントなどです。
<aside> — — その部分がウェブページ内における余談・補足情報のセクションであることを示す際に使用します。
<h1>～<h6> — — 見出しを付ける際に使用します。数値が小さいほど高いランクの見出しとなります。
<hgroup> — — セクションの見出しを表します。 小見出しや副題など、見出しが複数の階層にある場合、見出しセットをグループ化してまとめるために使用します。
<header> — — イントロダクションやナビゲーショングループであることを示す際に使用します。
<footer> — — 直近のセクションのフッタであることを示す際に使用します。
<address> — — 連絡先・問合せ先を表す際に使用します。

コンテンツの分類 Grouping content

要素 属性 値 要素と属性と値の要約
<p> — — ひとつの段落（パラグラフ）であることを表す際に使用します。
<hr> — — 段落レベルのテーマの区切り、セクション内における話題の区切りを表す際に使用します。
<pre> — — 半角スペースや改行をそのまま表示する際に使用します。
<blockquote> — — 他の情報源からの引用・転載セクションであることを表す際に使用します。
cite URL 引用元のURLを指定する
<ol> — — 順序のあるリストを表示する際に使用します。
reversed — リストの並び順を降順（大きい順）にする。値は要らず単独で機能する。
start 整数 リストの開始番号を整数で指定
<ul> — — 順序のないリストを表示する際に使用します。
<li> — — リストの項目を記述する際に使用します。
value（親要素がol要素のみ有効） 整数 リスト項目の順序を整数で指定（親要素がol要素の場合にのみ有効となる属性、初期値なし）
<dl> — — 定義・説明リストを表す際に使用します。
<dt> — — 定義・説明される言葉を表す際に使用します。
<dd> — — 定義用語や言葉の説明をする際に使用します。
<figure> — — 図表であることを示す際に使用します。
<figcaption> — — 図表のキャプションを示す際に使用します。
<div> — — ひとかたまりの範囲として定義する際に使用します。
<main> — — メインコンテンツであることを示す。

テキストの意味 Text-level semantics

要素 属性 値 要素と属性と値の要約
<a> — — ハイパーリンクを指定
href URL ハイパーリンク先のURLを指定
target — ハイパーリンク先を開く際のターゲットを指定
_self 現在のウィンドウでリンク先を開く
_parent 現在のウィンドウの親ウィンドウでリンク先を開く
_top 現在のウィンドウの最上位階層のウィンドウでリンク先を開く
_blank 新しいタブやウィンドウでリンク先を開く
任意のターゲット名 任意の名前を付けたウィンドウでリンク先を開く
rel — ハイパーリンク先との関係性を表す
alternate 現在のドキュメントの代替ドキュメントへのリンクであることを示す
author 現在のドキュメントや記事の著者へのリンクであることを示す
bookmark ブックマークのためのパーマリンク（固定リンク）であることを示す
help ヘルプ・ドキュメントへのリンクであることを示す
license 著作権情報へのリンクであることを示す
next 一連のドキュメントにおける次のドキュメントへのリンクであることを示す
nofollow リンク先ドキュメントをフォローしない
noreferrer リンク先へHTTPリファラを送らない
prefetch リンク先ドキュメントを先制キャッシュ
prev 一連のドキュメントにおける前のドキュメントへのリンクであることを示す
search 現在のドキュメントとその関連ページを検索するために使用可能なリソースへのリンクであることを示す
tag 現在のドキュメントのタグであることを示す
media メディア ハイパーリンク先のメディアを指定
hreflang 言語 ハイパーリンク先の言語を指定
type MIMEタイプ ハイパーリンク先のMIMEタイプを指定（MIMEタイプとは、”タイプ名/サブタイプ名”でファイル形式を指定する文字列のこと、例えば、リンク先がHTMLファイルならtype=”text/html”となる）
ping URL ユーザーがハイパーリンクをたどった際にpingを送信する先のURLを指定。値にはスペースで区切って複数のURLのリストを指定することができる。pingの送信先では一般的にユーザーのアクセス記録・集計・解析などが行われる
download URL リンク先URLへの移動ではなく、リンク先ファイルをダウンロードするようブラウザに示す
<em> — — 強勢する（アクセントを付ける）箇所を表す際に使用します。
<strong> — — 強い重要性を表す際に使用します。
<small> — — 免責・警告・法的規制・著作権・ライセンス要件などの注釈や細目を表す際に使用します。
<s> — — すでに正確ではなくなった、すでに関係なくなった内容を表す際に使用します。
<cite> — — 作品のタイトルを表す際に使用します。
<q> — — 他の情報源からの引用句・引用文であることを表す際に使用します。
cite URL 引用元のURLを指定
<dfn> — — 用語が使用されていることを示す際に使用します。
title 名称 定義される用語の正式な名称を指定
<abbr> — — 略語や頭字語であることを表す際に使用します。
title 正式な名称 略称や頭字語の正式な内容を指定
<time> — — 日付や時刻を表記する際に、グレゴリオ暦による日付や24時間表記の時刻で正確に示す際に使用します。
datetime 日付や時刻 日付や時刻を指定する
<code> — — プログラムなどのコードであることを示す際に使用します。
<var> — — 変数であることを示す際に使用します。
<samp> — — プログラムやコンピュータシステムによる出力結果のサンプルであることを示す際に使用します。
<kbd> — — ユーザーが入力する内容であることを示す際に使用します。
<sub> — — 下付き文字を表す際に使用します。
<sup> — — 上付き文字を表す際に使用します。
<i> — — 声や心の中で思ったことなど、他と区別したいテキストを表す際に使用します。
<b> — — 文書内のキーワードや製品名など、他と区別したいテキストを表す際に使用します。
<mark> — — 文書内の該当テキストをハイライトして目立たせる際に使用します。
<ruby> — — ルビをふる際に使用します。
<rt> — — ルビのテキストを指定します。
<rp> — — ルビのテキストを囲む括弧等の記号を指定します。
<bdo> — — 文字表記の方向を指定する際に使用します。
dir — 文字表記の方向を指定
ltr 左から右に表示する。
rtl 右から左に表示する。
<span> — — ひとつの範囲として定義する際に使用します。
lang 言語コード 言語を指定。日本語ならja、英語ならen。
dir — 文字表記の方向を指定
ltr 左から右に表示する。
rtl 右から左に表示する。
<br> — — 改行する際に使用します。
<wbr> — — 改行しても良い位置を示す際に使用します。

挿入と削除 Edits

要素 属性 値 要素と属性と値の要約
<ins> — — 追加された部分であることを示す際に使用します。
cite URL 変更について説明するURLを指定
datetime 日時 変更した日時をグローバル日時で指定
<del> — — 削除された部分であることを示す際に使用します。
cite URl 変更について説明するURLを指定
datetime 日時 変更した日時をグローバル日時で指定

コンテンツの埋め込み Embedded content

要素 属性 値 要素と属性と値の要約
<img> — — 画像を表示する
src（必須属性） URL 画像ファイルを指定
alt 関連テキスト 画像表示非対応環境向けのテキストを指定
usemap URL イメージマップ名を指定
ismap URL サーバサイド・イメージマップを指定
width 幅 イメージの幅を指定
height 高さ イメージの高さを指定
<iframe> — — インラインフレームを作成
src URL フレーム表示する文書のURLを指定
srcdoc 内容 フレーム表示する内容を属性値として指定
name 名前 フレーム名を指定
sandbox 制限値 フレーム内のコンテンツの表示に制限を追加
width 幅 フレームの横幅を指定
height 高さ フレームの高さを指定
<embed> — — 外部アプリケーションやインタラクティブなコンテンツを埋め込む
src URL データのURLを指定
type MIMEタイプ MIMEタイプを指定
width 幅 幅を指定
height 高さ 高さを指定
<object> — — 文書に外部リソースを埋め込む
data URL 外部リソースのURLを指定
type MIMEタイプ 外部リソースのMIMEタイプを指定
name 名前 外部リソースの名前を指定
usemap マップ名 イメージマップを利用する場合に、利用するイメージマップ名を指定
form ID名 フォーム要素と関連付ける場合に指定
width 幅 外部リソースの幅を指定
height 高さ 外部リソースの高さを指定
<param> — — プラグインデータを埋め込んだ際に呼び出されるプラグインのパラメータを指定
name（必須属性） 名前 パラメータの名前を指定
value（必須属性） 値 パラメータの値を指定
<video> — — 動画を再生する際に使用します。
src URL 動画ファイルを指定する
poster URL 動画のヒントとなる画像を表示する
preload — 動画をあらかじめ読み込む
none ユーザーが再生操作を行うまで，ダウンロードは開始しません。
metadata スクリプトで使用するメタデータのみ前もってダウンロードします。
auto ユーザーの再生操作に先立ってあらかじめダウンロードします。
空文字 auto として処理される。
autoplay — 動画を自動再生する。単独で機能する。
loop — ループ再生を指定する。単独で機能する。
controls — インターフェースを表示する。単独で機能する。
width 幅 幅を指定する
height 高さ 高さを指定する
<audio> — — 音声を再生
src URL 音声ファイルを指定
preload — 音声を予め読み込む
none ユーザーが再生操作を行うまで，ダウンロードは開始しません。
metadata スクリプトで使用するメタデータのみ前もってダウンロードします。
auto ユーザーの再生操作に先立ってあらかじめダウンロードします。
空文字 auto として処理される。
autoplay — 音声を自動再生する単独で機能する。
loop — ループ再生を指定する。単独で機能する。
controls — インターフェースを表示する。単独で機能する。
<source> — — 動画や音声などのメディアファイルのURLや種類を指定する際に、などのメディア要素の中で子要素として使用します。
src（必須属性） URL メディアファイルのURLを指定する
type MIMEタイプ メディアファイルのMIMEタイプやコーデックを指定する
media — どのメディア向けであるかを指定
all すべて（初期値）
screen スクリーンを指定
tv テレビを指定
print 印刷を指定
aural 音声を指定
<canvas> — — 図形を描画
width 幅 幅を指定（初期値は300）
height 高さ 高さを指定（初期値は150）
<map> — — イメージマップを作成
name 名前 イメージマップの名前を指定
<area> — — イメージマップのハイパーリンク領域を設定
alt テキスト ハイパーリンクのテキストを指定
coords 座標 ハイパーリンク領域の座標を指定
shape — ハイパーリンク領域の形状を指定
default 画像全体を指定（初期値）
circle 正円を指定
poly 多角形を指定
rect 四角形を指定
href URL ハイパーリンク先のURLを指定
target ターゲット ハイパーリンク先を開くターゲットを指定
ping URL ハイパーリンクの追跡済みを通知するURLを指定
rel 関係名 ハイパーリンク先との関係を指定
media URL ハイパーリンク先のメディアを指定
hreflang 言語 ハイパーリンク先の言語を指定
type MIMEタイプ ハイパーリンク先のMIMEタイプを指定

テーブル（表）Tabular data

要素 属性 値 要素と属性と値の要約
<table> — — テーブル（表）を作成する際に使用します。
summary（廃止） 説明 表の説明・要約を指定
<caption> — — テーブル（表）にキャプションをつける際に使用します。
<colgroup> — — 表の縦列（カラム）をグループ化する際に使用します。
span 数字 グループ化する縦列の数を指定
<col> — — 表の縦列に属性やスタイルを指定する際に使用します。
span 数字 縦列の数を指定
<tbody> — — テーブル（表）のボディ部分を定義する際に使用します。
<thead> — — テーブル（表）のヘッダ行を定義する際に使用します。
<tfoot> — — テーブル（表）のフッタ部分を定義する際に使用します。
<tr> — — テーブル（表）の横一行を定義する際に使用します。
<td> — — テーブル（表）のデータセル（table data cell）を作成する際に使用します。
colspan 数字 セルが横方向にまたがる縦列の数を指定
rowspan 数字 セルが縦方向にまたがる横行の数を指定
headers ID セルがどの見出しセルと対応しているかをth要素のid属性の値で指定
<th> — — テーブル（表）の見出しセル（table header cell）を作成する際に使用します。
colspan 数字 セルが横方向にまたがる縦列の数を指定
rowspan 数字 セルが縦方向にまたがる横行の数を指定
headers ID セルがどの見出しセルと対応しているかをth要素のid属性の値で指定
scope — 見出しセルが行・列のどの範囲に対応しているかを指定
auto 文脈によって自動的に判断される（初期値）
row scope=”row”を指定すると、その見出しセルは同じ横行の後続のいくつかのセルに適用されることを表す
col scope=”col”を指定すると、その見出しセルは同じ縦列の後続のいくつかのセルに適用されることを表す
rowgroup scope=”rowgroup”を指定すると、その見出しセルは同じ横行の後続のすべてのセルに適用されることを表す
colgroup scope=”colgroup”を指定すると、その見出しセルは同じ縦行の後続のすべてのセルに適用されることを表す

フォーム Forms

要素 属性 値 要素と属性と値の要約
<form> — — 入力・送信フォームを作る際に使用します。
accept-charset 文字エンコーディング 送信するデータの文字エンコーディングを指定
action URL 送信先URLを指定
autocompleate on/off オートコンプリートのオン/オフを指定
enctype データ形式 送信するデータの形式を指定
method get/post 送信方法（HTTPメソッド）を指定
name 名前 フォームの名前を指定
novalidate — 入力されたデータの妥当性を確認しない。単独で機能する。
target ターゲット名 フォーム送信するターゲット先を指定
<fieldset> — — フォームの入力項目をグループ化する際に使用します。
disabled — グループ内のフォーム部品を無効にする。単独で機能する。
form ID どのフォームと関連付けるかを
のid名で指定
name 名前 名前を付ける
<legend> — — フォームの入力項目グループにキャプション（タイトルや説明）を付ける際に使用します。
<label> — — フォーム部品と項目名（ラベル）を関連付ける際に使用します。
form ID form要素とラベルを関連付ける
for ID フォーム部品とラベルを関連付ける
<input> — — フォームを構成する様々な入力部品を作成
accept タイプ type=”file”の場合に、どのタイプのファイルがサーバ側で受け取ることができるかを指定
alt 名前 type=”image”の場合に、画像の代替テキストを指定
autocomplete — 入力候補を提示して入力内容を自動補完 ※単独で機能
autofocus — 自動フォーカスを指定する。単独で機能する。
checked — ラジオボタンやチェックボックスをあらかじめチェック済みにする。単独で機能する。
disabled — 操作を無効にする。単独で機能する。
form ID どのフォームと関連付けるかを<form>
のid名で指定する。
formaction URL 送信先URLを指定
formenctype データ形式 送信するデータの形式を指定
formmethod 送信方法 送信方法（HTTPメソッド）を指定
formnovalidate — 入力されたデータの妥当性を確認しない ※単独で機能
formtarget ターゲット フォーム送信するターゲット先を指定
height 高さ type=”image”の場合に、画像の高さを指定
list ID ユーザーに入力候補として提案するデータリストの要素を、その要素のid属性の値で指定
max 数字 入力できる最大値を指定
maxlength 数字 入力可能な最大文字数を指定
min 数字 入力できる最小値を指定
multiple — 複数の値を入力・選択可能にする ※単独で機能
name 名前 フォーム部品に名前を追加
pattern パターン 正規表現で入力値のパターンを指定
placeholder 名前 入力欄に初期表示する内容を指定
readonly — ユーザーによるテキスト編集を不可にして読み取り専用にする ※単独で機能
required — 入力必須にする ※単独で機能
size 数字 表示文字数を指定
src URL type=”image”の場合に、画像ファイルのURLを指定
step 値 入力欄で刻むステップ値を指定
type — フォーム部品の種類を指定
hidden 画面上は表示されない隠しデータを指定
text 一行テキストボックスを作成
search 検索テキストの入力欄を作成
tel 電話番号の入力欄を作成
url URLの入力欄を作成
email メールアドレスの入力欄を作成
password パスワード入力欄を作成
datetime UTC（協定世界時）による日時の入力欄を作成
date 日付の入力欄を作成
month 月の入力欄を作成
week 週の入力欄を作成
time 時間の入力欄を作成
datetime-local UTC（協定世界時）によらないローカル日時の入力欄を作成
number 数値の入力欄を作成
range レンジの入力欄を作成
color 色の入力欄を作成
checkbox チェックボックスを作成
radio ラジオボタンを作成
file サーバーへファイルを送信
submit 送信ボタンを作成
image 画像ボタンを作成
reset リセットボタンを作成
button 汎用ボタンを作成
value 値 値を指定
width 幅 type=”image”の場合に、画像の幅を指定
<button> — — ボタンを作成
autofocus — 自動フォーカスを指定する。単独で機能する。
disabled — 操作を無効にする。単独で機能する
form ID どのフォームと関連付けるかを<form>
のid名で指定
formaction URL 送信先URLを指定
formenctype データ形式 送信するデータの形式を指定
formmethod get or post 送信方法（HTTPメソッド）を指定
formnovalidate — 入力されたデータの妥当性を確認しない 単独で機能する
formtarget ターゲット フォーム送信するターゲット先を指定
name 名前 ボタンの名前を指定
type — ボタンの種類を指定
submit 初期値
reset リセット
button 機能のないボタン
value 値 値を指定
<select> — — セレクトボックスを作成する
autofocus — 自動フォーカスを指定する 単独で機能する
disabled — 操作を無効にする 単独で機能する
form ID どのフォームと関連付けるかを<form>
のid名で指定
multiple — 選択肢を複数選択できるようにする 単独で機能する
name 名前 セレクトボックスの名前を指定
size 自然数 表示する選択肢の数を指定
<datalist> — — フォームの入力欄などで入力候補となるデータリストを定義します。
<optgroup> — — 選択肢をグループ化
label（必須属性） 名前 選択肢グループにラベル（項目名）を付ける
disabled — 操作を無効 単独で機能
<option> — — セレクトボックスや入力候補リストの選択肢を指定
disabled — 操作を無効 単独で機能
label 名前 選択肢にラベル（項目名）を付ける
selected — 選択肢をあらかじめ選択済みにする 単独で機能
value 値 選択肢の値を指定
<textarea> — — 複数行のテキスト入力欄を作成
autofocus   自動フォーカスを指定
cols   一行当たりの最大文字数の目安を指定
disabled   操作を無効
form   どのフォームと関連付けるかを<form>
のid名で指定
maxlength   入力可能な最大文字数を指定
name   入力フィールドの名前を指定
placeholder   ユーザー入力に関するヒントを短めのテキストで指定
readonly   ユーザーによるテキスト編集を不可にして読み取り専用にする
required   入力必須を指定
rows   表示行数を指定
wrap   入力テキストの改行ルールを指定
<keygen> — — フォーム送信時にキーを発行する
autofocus   オートフォーカス
challenge   送信されるキーと一緒にパッケージする値を指定
disabled   キーを操作不能にする
form   <form>要素と関連付ける
keytype   暗号化の種類を指定
name   キーに名前を付ける
<output> — — 計算結果を示す
for   計算結果の値とそれが何を表しているのかを、ID名で明確に関連付ける
form   どのform要素と関連しているのかを明確に示す
name   要素に名前を付ける
<progress> — — タスク完了までの進行状況を示す
value   タスクがどれだけ完了したかを指定
max   タスク全体でどれだけ作業が必要かを指定
form   どのform要素と関連しているのかを明確に示す
<meter> — — 規定範囲内の測定値を表す
value（必須属性）   測定された実際の値
min   下限の値
max   上限の値
low   「低い」とされる境界
high   「高い」とされる境界
optimum   「最適」とされる値

ユーザーによる操作 Interactive elements

要素 属性 値 要素と属性と値の要約
<details> — — 備考や操作手段などの詳細情報を示す
<summary> — — <details>の内容の要約を示す
<command> — — 操作メニューの各コマンドを指定
label（必須属性） 名前 コマンドにラベル（項目名）を付ける
type — コマンドの種類を指定
command 通常のコマンド（初期値）
checkbox 選択式
radio 択一式
icon URL コマンドを表す画像を指定
disabled — コマンドを使用不能の状態にする
checked — コマンドを選択した状態にする
radiogroup 名前 コマンドグループに名前を付ける
title 名前 コマンドのヒントを提供する
<menu> — — 操作メニューを作成
type — メニューの種類を指定
context コンテキストを指定
toolbar ツールバーを指定
label 名前 メニューにラベル（項目名）を付ける

以上、HTML5の全タグ要素一覧でした。HTML5のタグ、要素は非常に多いですが、繰り返し使用することで自然と覚えていけると思います！最後までご覧頂きありがとうございました！

参考元：W3C

タイトルとURLをコピーしました