HTML/CSS

[HTML5] タグ全部紹介します!

はじめに

今回はHTML5におけるHTMLタグをすべて公開し、解説していこうと思います。
意外と結構多いんですが、わかりやすく簡単に解説していきます!

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

ところで、HTMLタグ全部って何種類あるんですか?

IT博士
IT博士

HTML5ではタグは全部で108種類ありますよ!

意外と多いですね。

えぇー!?

そんなにたくさん覚えられないですよ...

IT博士
IT博士

そうですよね。私も覚えられないです(笑)
でも、実際に作業する際に使用するタグって30~40個くらいなんです。なので全部覚える必要はないですが、知っているに越したことはないですよね♪

HTML5タグ一覧

では早速HTML5で使用するタグを108種類一覧で見てみましょう!
*少し長いですが一緒に頑張りましょう!。

以下の一覧表は3つのブロックに分けました。
大まかに、下に行くほどHTML5の学習をしていないとわかりにくい。もしくは、使用頻度の低そうなものになっています。
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においてHTMLタグを全部紹介しました。
数が多いですが、なんとなくこんな機能のタグあったなぁ。くらいでも覚えておくと全然違うと思うので、ぜひ一度は目を通してみてくださいね!

https://itthestudy.com/html-%E8%A6%8B%E5%87%BA%E3%81%97%E3%82%BF%E3%82%B0h1h6%E3%82%92%E6%AD%A3%E3%81%97%E3%81%8F%E6%89%B1%E3%81%86-%E4%BF%9D%E5%AD%98%E7%89%88/


Copyright© FUNA BLOG , 2020 All Rights Reserved.