HTML

HTML&HTML5タグ一覧

簡単な説明とブラウザの対応状況 (2020年7月時点)を掲載した、HTMLとHTML5のタグ一覧です。

HTML4.○○ ⇒ HTML5.○○ とバージョンアップごとにタグが増えたり意味が変わったり、、、
ブロックレベルとインラインレベルも、コンテンツモデルに衣替えして「これOKになったんかい?!!」とか、使い方が変わったのもあるし ><

そこて、慣れで使っていたり都度調べていたタグを見直そうと、一覧にしてみました^^
(今さらww です、、、^^;;;

このページの目次
  1. HTML&HTML5タグリスト
    1. 構造
    2. 構造

HTML&HTML5タグリスト

構造

タグ用途・意味備考
htmlHTMLのルートHTML文書の宣言
headHTML最初の要素文書自身に関する情報 (メタデータ) を格納。
bodyheadに続く本体主にページ上に掲載される内容。
headerヘッダー導入部 (ナビゲーション,見出し,ロゴ,他を含む)
navナビゲーション主要なナビゲーションに対してのみ使用すべき
mainメインコンテンツ各ページで共通している内容は含めるべきではない
article独立した記事main の子要素
sectionセクションarticle子要素。主題としてのhタグ配置を推奨
aside直接関わらない記事無くても記事に影響しないサイドバー,バナー等 (mainの直接子要素不可 / mainに入れる場合は、記事の補足要素として article の子にする)
footerフッター著作者に関する情報,関連文書へのリンク,著作権等
h1-h6見出し記事及びセクションの主題。h1~h6の階層にする
主な目的タグ用途・意味備考
headtitleHTMLタイトル空文字 (空白文字のみを含む) は不可
headmetaメタデータhead子要素
headbase相対URLの基準href 又は target 必須,(最近はあまり使われていない)
headstyleスタイルシート5.2よりbody内も可になったが位置に関わらずbody最初から適用される
headlink他ファイルの関連付URL を hrefに指定し,rel にそのファイルが何かを指定する
主な目的タグ用途・意味備考
汎用タグdivブロックレベル要素 
汎用タグp段落Flow,Phrasing,Palpable,Form-associated他
汎用タグiframe別の文書を表示 
汎用タグspanインラインレベル特定の意味を持たない
汎用タグaリンク通常はフレージングのみ内包可。但し親がSectioningの場合はフローを内包できる
汎用タグhr段落の区切りXML以外での閉じ / は非推奨
汎用タグbr改行XML以外での閉じ / は非推奨
汎用タグwbr改行文字列が表示領域の幅に収まらない場合に限り,その位置で改行する
汎用タグpre整形済みブロック内容が整形されたとおりの状態で表示される
主な目的タグ用途・意味備考
リストol順序性があるリストをマークアップ[CM:0個以上の li] リスト内の各項目は li を使用
リストul順序性のないリストをマークアップ[CM:0個以上の li] リスト内の各項目は li を使用
リストliリスト項目olまたはulの子要素
定義リストdl定義リストブロック子要素にdt ,ddを持つ
定義リストdt説明を要する用語dl 要素の子要素
定義リストdddt に対応する説明等dl 要素の子要素
主な目的タグ用途・意味備考
引用blockquote段落として引用 
引用q文章の一部に引用引用文をインライン (HTML5.1では文章内) として扱いたいときに使用
引用cite創造的な作品の参照本,論文,絵画,歌,映画,ゲーム.ウェブページ,ツイートなどの創造的作品のタイトル(必須)とリンク。個人名不可!!
主な目的タグ用途・意味備考
Tabletable表の全体表の全ての親要素
Tablecaption表のタイトルtable の最初の子要素として配置
Tablecolgroup表の縦列をグループ化table の子要素,captionより後,かつ thead,tbody,tfoot,または trよりも前に配置
Tablecol1列以上の縦列colgroup子要素
Tablethead表のヘッダー[CM:0個以上の tr] 列見出しなど表のヘッダーとなる横列をグループ化
Tabletbody表の本体[CM:0個以上の tr] ヘッダーやフッターでない部分の横列をグループ化
Tabletfoot表のフッター[CM:0個以上の tr] 合計など表のフッターとなる横列をグループ化
Tabletrthead,tbody,tfoot最初の子要素[CM:0個以上の td または th] 横列の親要素
Tableth列または行見出しtr子要素
Tabletdデータ(内容)tr子要素
主な目的タグ用途・意味備考
図表figure図表ブロック図表(img等)とfigcaption(キャプション)を内包
図表figcaption図表キャプションfigure の最初または最後の子要素
フォームformフォーム 
フォームfieldsetフォームの部品をグループにまとめるformの子要素
フォームlegendfieldsetのタイトルfieldsetの子要素
フォームlabelフォーム部品のラベル 
フォームinputフォーム部品[type=’○○’] で属性で用途を決める
フォームoutput計算結果主にform子要素
フォームtextarea複数行のテキスト入力フィールドform子要素
フォームdatalist選択肢フィールド[CM:0個以上の option] inputの部品としてoption を取りまとめる
フォームselect選択肢フィールド[CM:0個以上の optionとoptgroup] 選択肢の中から該当する項目を選ぶform部品
フォームoptgroupoptionをグループ化[CM:0個以上の option] selectの子要素
フォームoptionselect又は datalistの選択肢select または datalistまたは optgroup の子要素
フォームbuttonボタンform部品または単独使用も可
主な目的タグ用途・意味備考
メディアpicture複数の候補画像[CM:0個以上の sourceと1つの img] source(media)条件に最初に条件に合致した画像を表示
メディアimg画像(代替テキスト)XML以外での閉じ / は非推奨
メディアvideo動画[CM:0個以上の (source+)track+Transparent] 字幕付き音声ファイルを再生用も可能
メディアaudio音声データ 
メディアsource候補picture,audio,videoの子要素
メディアtrack動画または音声の外部テキストトラックaudio,videoの子要素
主な目的タグ用途・意味備考
組み込みscriptスクリプトスクリプトの内容,又は,jsファイルの読み込み
組み込みnoscriptスクリプトの代替 
組み込みobject外部リソースを組み込む[CM:0個以上の paramとTransparent
組み込みparamパラメータを渡すobject子要素
組み込みembedプラグイン等を組み込む代替コンテンツは指定できない
ImageMapmapImageMap各領域とリンク先は area で個別に指定(html5では a は使用不可)
ImageMapareaImageMap上の領域 
詳細情報details詳細情報表示・非表示を切り替えられる
詳細情報summary見出し,キャプションdetailsの最初の子要素
日付と時刻time日付や時刻[CM:日時形式] datetime不使用時は機械可読形式にする
日付と時刻datetime日付や時刻の属性timeの属性] 機械可読形式にした日付や時刻のデータ
用語を明確化strong重要・重大・深刻装飾ではない
用語を明確化em強調strongより弱い強調
用語を明確化mark注目部分 
用語を明確化b用語である事を示す重要さを示すものではないが,単なる装飾でもない
用語を明確化s正しい情報ではなくなった部分単なる取り消し線ではない
用語を明確化i文中の異なる性質・状態装飾要素ではない
用語を明確化del削除された部分削除部分を明示的に示したい場合
用語を明確化ins追加追加部分を明示的に示したい場合
用語を明確化small補足情報・注記Copyright ,免責事項,警告,帰属,法的規制などを表記する際に使用
用語を明確化dfn定義の対象dfn で示された用語は、用語定義文と併せて表示する
用語を明確化abbr略語
配置文字sub下付き文字下付き文字で表記することが習慣となっている部分をマークアップする
配置文字sup上付き文字上付き文字で表記することが習慣となっている部分をマークアップする
配置文字rubyルビに関する親要素[CM:1つ以上の rt と文字列等] ルビに関連するテキストや要素全体を括る
配置文字rtルビ (ふりがな)[ruby子要素] ルビ自体にかける
アドレスaddress連絡先・問合せ先HPurl,Mail,住所,電話番号,FAX等 連絡をとるために必要な情報
その他codeコード又はコードの一部改行を含む場合は,preの子要素として利用
その他var変数を示す数式やプログラムの中の変数や、文章中に変数名が出てくる場合など
その他data機械可読形式データデータは,value 属性の値として指定
その他sampサンプル(引用)コンピュータやプログラムによって出力されたもの
その他kbdユーザによって入力される部分一般的にキーボードからの入力内容を示すが,音声など他の入力も使用可
特殊タグuテキスト以外のものによる注釈中国語で固有名詞を示す場合,スペル間違の箇所を示す場合などにほぼ限定されている

構造



主な目的 タグ 用途・意味 備考                
構造 html HTMLのルート HTML文書の宣言                
構造 head HTML最初の要素 文書自身に関する情報 (メタデータ) を格納。                
構造 body headに続く本体 主にページ上に掲載される内容。                
構造 header ヘッダー 導入部 (ナビゲーション,見出し,ロゴ,他を含む)                
構造 nav ナビゲーション 主要なナビゲーションに対してのみ使用すべき                
構造 main メインコンテンツ 各ページで共通している内容は含めるべきではない                
構造 article 独立した記事 main の子要素                
構造 section セクション article子要素。主題としてのhタグ配置を推奨                
構造 aside 直接関わらない記事 無くても記事に影響しないサイドバー,バナー等 (mainの直接子要素不可 / mainに入れる場合は、記事の補足要素として article の子にする)                
構造 footer フッター 著作者に関する情報,関連文書へのリンク,著作権等                
構造 h1-h6 見出し 記事及びセクションの主題。h1~h6の階層にする                
head title HTMLタイトル 空文字 (空白文字のみを含む) は不可                
head meta メタデータ head子要素                
head base 相対URLの基準 href 又は target 必須,(最近はあまり使われていない)                
head style スタイルシート 5.2よりbody内も可になったが位置に関わらずbody最初から適用される                
head link 他ファイルの関連付 URL を hrefに指定し,rel にそのファイルが何かを指定する                
汎用タグ div ブロックレベル要素                  
汎用タグ p 段落 Flow,Phrasing,Palpable,Form-associated他                
汎用タグ iframe 別の文書を表示                  
汎用タグ span インラインレベル 特定の意味を持たない                
汎用タグ a リンク 通常はフレージングのみ内包可。但し親がSectioningの場合はフローを内包できる                
汎用タグ hr 段落の区切り XML以外での閉じ / は非推奨                
汎用タグ br 改行 XML以外での閉じ / は非推奨                
汎用タグ wbr 改行 文字列が表示領域の幅に収まらない場合に限り,その位置で改行する                
汎用タグ pre 整形済みブロック 内容が整形されたとおりの状態で表示される                
リスト ol 順序性があるリストをマークアップ [CM:0個以上の li] リスト内の各項目は li を使用                
リスト ul 順序性のないリストをマークアップ [CM:0個以上の li] リスト内の各項目は li を使用                
リスト li リスト項目 olまたはulの子要素                
定義リスト dl 定義リストブロック 子要素にdt ,ddを持つ                
定義リスト dt 説明を要する用語 dl 要素の子要素                
定義リスト dd dt に対応する説明等 dl 要素の子要素                
引用 blockquote 段落として引用                  
引用 q 文章の一部に引用 引用文をインライン (HTML5.1では文章内) として扱いたいときに使用                
引用 cite 創造的な作品の参照 本,論文,絵画,歌,映画,ゲーム.ウェブページ,ツイートなどの創造的作品のタイトル(必須)とリンク。個人名不可!!                
Table table 表の全体 表の全ての親要素                
Table caption 表のタイトル table の最初の子要素として配置                
Table colgroup 表の縦列をグループ化 table の子要素,captionより後,かつ thead,tbody,tfoot,または trよりも前に配置                
Table col 1列以上の縦列 colgroup子要素                
Table thead 表のヘッダー [CM:0個以上の tr] 列見出しなど表のヘッダーとなる横列をグループ化                
Table tbody 表の本体 [CM:0個以上の tr] ヘッダーやフッターでない部分の横列をグループ化                
Table tfoot 表のフッター [CM:0個以上の tr] 合計など表のフッターとなる横列をグループ化                
Table tr thead,tbody,tfoot最初の子要素 [CM:0個以上の td または th] 横列の親要素                
Table th 列または行見出し tr子要素                
Table td データ(内容) tr子要素                
図表 figure 図表ブロック 図表(img等)とfigcaption(キャプション)を内包                
図表 figcaption 図表キャプション figure の最初または最後の子要素                
フォーム form フォーム                  
フォーム fieldset フォームの部品をグループにまとめる formの子要素                
フォーム legend fieldsetのタイトル fieldsetの子要素                
フォーム label フォーム部品のラベル                  
フォーム input フォーム部品 [type=’○○’] で属性で用途を決める                
フォーム output 計算結果 主にform子要素                
フォーム textarea 複数行のテキスト入力フィールド form子要素                
フォーム datalist 選択肢フィールド [CM:0個以上の option] inputの部品としてoption を取りまとめる                
フォーム select 選択肢フィールド [CM:0個以上の optionとoptgroup] 選択肢の中から該当する項目を選ぶform部品                
フォーム optgroup optionをグループ化 [CM:0個以上の option] selectの子要素                
フォーム option select又は datalistの選択肢 select または datalistまたは optgroup の子要素                
フォーム button ボタン form部品または単独使用も可                
メディア picture 複数の候補画像 [CM:0個以上の sourceと1つの img] source(media)条件に最初に条件に合致した画像を表示                
メディア img 画像(代替テキスト) XML以外での閉じ / は非推奨                
メディア video 動画 [CM:0個以上の (source+)track+Transparent] 字幕付き音声ファイルを再生用も可能                
メディア audio 音声データ                  
メディア source 候補 picture,audio,videoの子要素                
メディア track 動画または音声の外部テキストトラック audio,videoの子要素                
組み込み script スクリプト スクリプトの内容,又は,jsファイルの読み込み                
組み込み noscript スクリプトの代替                  
組み込み object 外部リソースを組み込む [CM:0個以上の paramとTransparent                
組み込み param パラメータを渡す object子要素                
組み込み embed プラグイン等を組み込む 代替コンテンツは指定できない                
ImageMap map ImageMap 各領域とリンク先は area で個別に指定(html5では a は使用不可)                
ImageMap area ImageMap上の領域                  
詳細情報 details 詳細情報 表示・非表示を切り替えられる                
詳細情報 summary 見出し,キャプション detailsの最初の子要素                
日付と時刻 time 日付や時刻 [CM:日時形式] datetime不使用時は機械可読形式にする                
日付と時刻 datetime 日付や時刻の属性 timeの属性] 機械可読形式にした日付や時刻のデータ                
用語を明確化 strong 重要・重大・深刻 装飾ではない                
用語を明確化 em 強調 strongより弱い強調                
用語を明確化 mark 注目部分                  
用語を明確化 b 用語である事を示す 重要さを示すものではないが,単なる装飾でもない                
用語を明確化 s 正しい情報ではなくなった部分 単なる取り消し線ではない                
用語を明確化 i 文中の異なる性質・状態 装飾要素ではない                
用語を明確化 del 削除された部分 削除部分を明示的に示したい場合                
用語を明確化 ins 追加 追加部分を明示的に示したい場合                
用語を明確化 small 補足情報・注記 Copyright ,免責事項,警告,帰属,法的規制などを表記する際に使用                
用語を明確化 dfn 定義の対象 dfn で示された用語は、用語定義文と併せて表示する                
用語を明確化 abbr 略語              
配置文字 sub 下付き文字 下付き文字で表記することが習慣となっている部分をマークアップする                
配置文字 sup 上付き文字 上付き文字で表記することが習慣となっている部分をマークアップする                
配置文字 ruby ルビに関する親要素 [CM:1つ以上の rt と文字列等] ルビに関連するテキストや要素全体を括る                
配置文字 rt ルビ (ふりがな) [ruby子要素] ルビ自体にかける                
アドレス address 連絡先・問合せ先 HPurl,Mail,住所,電話番号,FAX等 連絡をとるために必要な情報                
その他 code コード又はコードの一部 改行を含む場合は,preの子要素として利用                
その他 var 変数を示す 数式やプログラムの中の変数や、文章中に変数名が出てくる場合など                
その他 data 機械可読形式データ データは,value 属性の値として指定                
その他 samp サンプル(引用) コンピュータやプログラムによって出力されたもの                
その他 kbd ユーザによって入力される部分 一般的にキーボードからの入力内容を示すが,音声など他の入力も使用可                
特殊タグ u テキスト以外のものによる注釈 中国語で固有名詞を示す場合,スペル間違の箇所を示す場合などにほぼ限定されている                

※ ブラウザは2020年7月時点の最新バージョンを対象にしています。
他バージョン、他のブラウザ等より詳しい対応状況を確認したい場合は Can I use 等のチェックサイトでお調べ下さいm(__)m