HTML/CSS

HTML5のタグを全部まとめて一覧でご紹介!【詳細リンク付き】

こんにちは、リバティエンジニアのFUNA(フナ)です。

現役でフリーランスのエンジニアとしてアプリケーション開発やWeb制作、SEOやブログ運営をしています。

 

この記事はこんな方におすすめ

  • HTML5のタグが全部知りたい
  • HTML5タグを一覧で見たい

 

今回は、HTML5のHTMLタグをすべて公開し、解説していこうと思います。

各タグを詳しく解説するページも順次作っていきますので、できたものからリンクで飛べるようにしておきます!

 

 

HTML5のタグは全部で何種類あるのか

HTML5で使用できるタグは全部で108種類あります。

 

実際現場で全てのタグを使えなければいけないか。と言われれば答えは「NO」です。

実際に使用するタグはだいたい「30~40個」くらいです。

 

なので、全部覚える必要はないですが、「こんなのあるんだ。」くらいで知っておくといいでしょう。

 

HTML5タグ一覧

早速HTML5で使用するタグを108種類を一覧で見ていきます。

※少し長いですが、一緒に頑張りましょう!

表の見方

以下の一覧表は、3つのブロックに分けました。

下に行くほど「HTML5の学習をしていないとわかりにくい」or「使用頻度の低そうなもの」になっています。

 

htmlHTML自体のタグ
headページ自体のメタ情報をまとめるタグ
titleページ自体の題名のタグ
link外部ファイルとのリンクのタグ
metaページ自体のメタ情報のタグ
style主にCSSをページ自体に書き込むタグ
script主にJavaScriptをページに埋め込むタグ
noscript主にJavaScriptの代わりに表示するコンテンツのタグ
bodyブラウザに表示する内容全体のタグ
h1見出しのタグ1
h2見出しのタグ2
p段落のタグ
hr段落と段落の区切りのタグ
blockquote引用するコンテンツのタグ
ol順番の決まったリストのタグ
ul順番の決まってないリストのタグ
liリストの内容のタグ
dl項目に関する記述リストのタグ
dt項目に関する記述リストの項目のタグ
dd項目に関する記述リストの記述のタグ
div特定の意味を持たないブロックのタグ
aリンクのタグ
strong文章内の重要性の高いテキストのタグ
span文章内の特定の意味を持たないテキストのタグ
br文章内の改行のタグ
img写真や画像のタグ
tableテーブルのタグ
trテーブル内の行のタグ
tdテーブル内の行の内容のタグ
thテーブル内の行の見出しのタグ
formフォームのタグ
labelフォーム内の項目にラベルを付けるタグ
inputフォーム内の入力項目のタグ
selectフォーム内のメニューのタグ
optionフォーム内のメニューの選択肢のタグ
textareaフォーム内の文章の入力項目のタグ

 

baseページ内の相対URLの基準になるURLのタグ
section見出しと内容をまとめるセクションのタグ
navリンクをまとめるセクションのタグ
article単独で扱える記事のようなセクションのタグ
aside本筋から逸れる解説などのセクションのタグ
h3見出しのタグ3
h4見出しのタグ4
hgroup二つ以上の見出しをまとめるタグ
headerコンテンツのヘッダー情報をまとめるタグ
footerコンテンツのフッター情報をまとめるタグ
addressコンテンツの作者の連絡先のタグ
pre書いたままのテキストを表示するタグ
figure図表や画像とその説明をまとめるタグ
figcaption図表や画像につける説明のタグ
em文章内の特に強調するテキストのタグ
small文章内の補足や細目のテキストのタグ
cite文章内の作品のタイトルのタグ
q文章内の引用部分のテキストのタグ
abbr文章内の略称や頭字語のテキストのタグ
time文章内の日時のタグ
code文章内のプログラムなどのコードのタグ
ins後から追記するコンテンツのタグ
del後から削除するコンテンツのタグ
iframeページ内にフレームを埋め込むタグ
embedページ内に主にFlash等を埋め込むタグ
objectページ内に画像や音声、動画を埋め込むタグ
paramobjectタグのコンテンツのパラメータのタグ
videoページ内に動画ファイルを埋め込むタグ
audioページ内に音声ファイルを埋め込むタグ
canvasページ内にcanvasを埋め込むタグ
captionテーブルに付けるキャプションのタグ
tbodyテーブル内のボディ部分のデータをまとめるタグ
theadテーブル内のヘッダー部分の行のタグ
tfootテーブル内のフッター部分の行のタグ
fieldsetフォーム内の内容をまとめるタグ
legendfieldsetタグにつけるタイトルのタグ

 

目が疲れたら休憩してくださいね。

 

h5見出しのタグ5
h6見出しのタグ6
s文章内の打ち消し線のついたテキストのタグ
dfn文章内の定義する用語のテキストのタグ
var文章内の変数のテキストのタグ
samp文章内のプログラムで出力するテキストのタグ
kbd文章内の入力テキストかキーボードのキーのタグ
sub文章内の下に付くテキストのタグ
sup文章内の上に付くテキストのタグ
i文章内の慣習上斜体にするテキストのタグ
b文章内の慣習上太字にするテキストのタグ
u文章内の慣習上下線を引くテキストのタグ
mark文章内の目立たせたテキストのタグ
ruby文章内のルビを付けるテキストのタグ
rtルビとして付くテキストのタグ
rpルビが表示されない場合のカッコのタグ
bdi文章内の書く方向を独立させるテキストのタグ
bdo文章内の書く方向を決めるテキストのタグ
wbr文章内の改行可能な位置のタグ
sourceページ内に埋め込む動画や音声を指定するタグ
track動画や音声と同期するテキストトラックのタグ
mapクリックできるイメージマップのタグ
areamapのクリックする場所を決めるタグ
colgroupcolタグをまとめるタグ
colテーブル内の縦列をまとめるタグ
buttonフォーム内のボタンのタグ
datalistフォーム内の入力項目に選択肢をつけるタグ
optgroupフォーム内の複数のoptionタグをまとめるタグ
keygenフォーム内で暗号になるキーを作るタグ
outputフォーム内の計算結果の出力のタグ
progress処理の進捗状況などのゲージのタグ
meter予め数値の決まったゲージのタグ
detailクリックすると見られる詳細情報のタグ
summarydetailタグにつけるラベルのタグ
command右クリックメニューやキーボード操作の内容のタグ
menuツールバーや右クリックメニューを埋め込むタグ

 

お疲れ様でした!

これでひとまず、どんなタグがあってどのような役割があるのかは確認できると思います。

 

まとめ

今回は、HTML5のタグを全て紹介しました。

数が多いですが、「こんな機能のタグあったなぁ。」くらいでも覚えておくと役に立つので、一度は目を通してみてください。

 


最近の投稿

Copyright© FUNA BLOG , 2021 All Rights Reserved.