HTMLのタグ一覧

アイキャッチ マークアップ

以前の記事で、divタグについて「適切なタグがない場合のみ使うようにしましょう」と書きました。

しかし、どんなタグがあるのか知らなければ使いようがありません。

本記事で、HTMLのタグをご紹介しましょう。参考になれば幸いです。

ルート要素・メタデータ

html文書のルート要素
headファイルのメタデータの集まり
title文書にタイトルを付ける
base相対リンクの基準となるURLを指定する
link別のファイルと関連付ける
styleスタイルシートを指定する
meta文書に関する様々なメタデータを表す

セクション

body文書の本体
article自己完結したセクション
section一般的なセクション
navナビゲーション
aside補足的なセクション
h1~h6見出し
headerヘッダ
footerフッタ
adress連絡先

コンテンツのグループ化

p段落
hr区切り線
pre整形済みのテキスト
blockquote引用
ol順序つきリスト
ul順序なしリスト
liリストの項目
dl記述リスト
dt記述リストの名前
dd記述リストの値
figure参照される図版
figcaption図版にキャプションを付ける
mainメインコンテンツ
div特定の範囲をまとめる

テキストの意味

aリンク
em強調
strong文章内の重要性の高いテキスト
small細目のような注釈
s文章内の打ち消し線のついたテキスト
cite作品のタイトル・著者名・URL
q引用フレーズ
dfn定義される用語
abbr略語や頭字語
codeソースコード
var変数
sampプログラムの出力サンプル
kbdユーザーが入力する内容
dataコンピュータ向けのデータを指定する
sub文章の下に付くテキスト
sup文章の上に付くテキスト
time日付や時刻
i文章内の慣習上斜体にするテキスト
b文章内の慣習上太字にするテキスト
u文章内の慣習上下線を引くテキスト
markテキストのハイライト表示
rubyルビを振る
rbルビの対象テキスト
rtルビのテキスト
rtcルビテキストのコンテナ
rpルビテキストを括弧で囲む
bdi隔離されたテキスト
bdo書字方向を指定する
span特定の範囲をグループ化する
br改行
wbr改行位置の候補

訂正

ins追加された部分
del削除された部分

コンテンツの埋め込み

img画像
pictureレスポンシブイメージ(画像内容の最適化)
iframeインラインフレーム
embedプラグインデータを埋め込む
object外部リソースを埋め込む
paramパラメータを指定
videoプラグインを使わずに動画を再生する
audioプラグインを使わずに音声を再生する
track動画・音声と同期するテキストトラック
sourceメディアリソースの候補を指定
mapクリックできるイメージマップ
areaイメージマップのリンク領域を設定

table
captionキャプション
colgroup表の列をグループ化する
col表の列
tbody表の行をグループ化する(本体部分)
thead表の行をグループ化する(ヘッダ部分)
tfoot表の行をグループ化する(フッタ部分)
tr表の行
tdデータセル
th見出しセル

フォーム

form入力フォーム
fieldsetフォーム部品をグループ化
legend部品グループにキャプションを付ける
labelフォーム部品とラベルを関連付ける
input入力欄・選択肢・ボタンを作る
selectプルダウンメニュー
optionプルダウンメニューや入力候補の選択肢
optgroupプルダウンメニューの選択肢をグループ化
textarea複数行のテキスト入力欄
buttonボタン
datalist入力候補のリスト
keygen暗号鍵を生成する
output計算結果の出力欄
progress作業の進捗状況
meter特定範囲内の数量や割合

スクリプティング

scriptJavaScriptを埋め込む
noscriptスクリプトが利用できない環境用の内容
templateスクリプトで利用するHTMLコードのテンプレート
canvasスクリプト使ってグラフィックスを描く

インタラクティブ

detailsリクエストに応じて詳細情報を提供する
summary詳細情報のキャプションや要約
menuポップアップメニュー
menuitemポップアップメニューの項目

まとめ

113個のタグをご紹介しました。

divタグを使わないようにするには、「セクション」あるいは「コンテンツのグループ化」でまとめたタグを使うのが良いでしょう。

あなたの毎日がハッピーでありますように。

コメント

  1. […] HTMLのタグ一覧以前の記事で、divタグについて「適切なタグがない場合のみ使うようにしましょう」と書きました。しかし、どんなタグがあるのか知らなければ使いようがありません。本 […]

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