HTML辞典

この記事は約23分で読めます。
スポンサーリンク

ドキュメントタイプを宣言

htmlファイル(テキストファイル)の先頭でHTMLを示すテキストを設置する

HTML5

<!DOCTYPE html>
<!doctype html>

HTML4.01

HTML 4.01厳密型DTD(strict)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01移行型DTD(Transitional)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 フレーム設定型DTD(Frameset)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

HTML5コンテンツモデル

コメント

HTMLソースコード内に、ホームページのコンテンツとして表示されることがないメモやコーディングに関するコメントを記述することができる。任意の文字を入れることができますが、連続したハイフン(–や——など)は記述できません。

一般的には、「開始タグ」や「終了タグ」が遠い場合、開始と終了をコーディング時にわかりやすくするために記述したり、タブ(インデックス)をタグを入れ子にしてる場合、囲っているタグを見失うことが多々あるので、目印に記述するケースが多いかと思います。また、不要なタグや一時的に無効にしたいタグをコメントアウトとして、非表示用途に使用することが多い。

<!-- コメント分 -->
<!DOCTYPE html>
<html lang="ja">
<head>
<title>サンプルページ</title>
</head>
<body>
<!-- 1行コメント -->
<!-- 
複数行コメント 
-->
<!-- モーダル開始 -->
<div>
    <div>・・・</div>
</div>
<!-- モーダル終了 -->
</body>
</html>

CDATAセクション

CDATAセクションに記述された文字参照、タグ、コメントは処理されずすべて文字列として扱われます。

<![CDATA[・・・]]>
<script type="text/javascript">
/*<![CDATA[*/
  console.log("Hello!!");
/*]]>*/
</script>

特殊な文字を表示させる

HTMLでは、<と>はタグを表すために使用されますので、そのまま書くとタグの一部だと解釈されてしまい表示されません。そのような特別な役割を持った文字を普通の文字として表示させたい場合には、「&〇〇;」という書式を使用します。また、必ず小文字で書くようにしてください。

&lt; <
&gt; >
&quot; "
&amp; &

カラー見本

言語コード

lang属性などに指定する言語コード。世界の言語をアルファベット2文字で記号化したもの。ISO639という文書で定義されています。

主な言語コード

言語コード言語
ja日本語
en英語
zh中国語
ko韓国語
esスペイン語
deドイツ語
frフランス語

その他言語コード

ISO 639-1コード一覧 - Wikipedia

HTMLタグ目次

カテゴリ別

基本構造

タグ 頻度 解説
DOCTYPE ドキュメントタイプ宣言
html ルート要素
head ヘッダ情報
meta

HTML文書に関する情報(メタデータ)

title HTML文書のタイトル要素
base

相対パスの基準URLを指定

link

外部リソースを指定

style スタイル情報を記述
body HTML文書の本文

クシ

タグ 頻度 解説
main 主なコンテンツ
article 独立した記事セクション
section 文書のセクション
h1~h6 ブロックレベル セクションの見出し
header ヘッダー情報
footer フッター情報
nav ナビゲーション
aside 補足情報
address 連絡先の情報

段落箇条書き

タグ 頻度 解説
p ブロックレベル 段落
blockquote ブロックレベル 段落単位での引用
ol ブロックレベル 序列をリスト
ul ブロックレベル 順不同リスト
li リストの項目
dl ブロックレベル 定義リスト
dt 定義リストの語句
dd 定義リストの説明文
figure 写真などのまとまり
figcaption 写真などにキャプションを付与する
pre ブロックレベル 整形済みテキスト
div ブロックレベル

特別に機能がない汎用的な範囲(要素をグル

ープ化)

hr ブロックレベル 段落の区切り

テキストの属性

タグ 頻度 解説
a インライン リンク
em テキストに強勢付ける
strong インライン テキストに重要性示す
b 他と区別したいテキストを示す
i 通常のテキストとは少し異なるテキストを示す
u スペルミスや外国固有代名詞などを示す
mark ユーザーの操作によって目立たせるテキストを示す
small 細目を示す
s 無効になった内容を示す
cite インライン 文献や作品のタイトルを示す
q インライン 短い引用文であることを示す
dfn 定義語を示す
abbr 略語や頭文字を示す
ruby ルビを振る
rb ルビを振る対象テキストを示す
rt ルビテキスト
rp ルビテキスト
rtc ルビテキストの集まり
time 日付や時刻を正確に示す
data コンピュータが理解できるデータを示す
sub 下付き文字を表示する
sup 上付き文字を表示する
span 汎用的な範囲を示す
br インライン 改行を示す
wbr 改行が可能な位置を指定する
ins 追加されたことを示す
del 削除された箇所を示す
bdi 他のテキストとは異なる書字方向であることを示す
bdo テキストの書字方向を指定する
code インライン プログラム等のコードであることを示す
var 変数であることを示す
samp プログラムなどの出力結果であることを示す
kbd ユーザがコンピュータへ入力する内容であることを示す

フォーム

タグ 頻度 解説
form ブロックレベル フォーム
input インライン 入力コントロール
type=submit 送信ボタン
type=image 画像形式の送信ボタン
type=reset 入力内容のリセットボタン
type=hidden 閲覧者に表示しないデータ
type=text 1行のテキスト入力欄
type=search 検索キーワードの入力欄
type=tel 電話番号の入力欄
type=url URLの入力欄
type=email メールアドレスの入力欄
type=password パスワードの入力欄
type=datetime 日時の入力欄
type=month 月の入力欄
type=week 週の入力欄
type=date 日付の入力欄
type=time 時刻の入力欄
type=number 数値の入力欄
type=range 大まかな数値の入力欄
type=checkbox チェックボックス
type=radio ラジオボタン
type=file 送信するファイルの選択欄
type=button スクリプト言語を起動するボタン
type=color RGBカラーの入力欄
button ボタン
textarea インライン 複数行のテキスト入力欄
select インライン プルダウンメニュー
option プルダウンメニューの項目
optgroup 選択肢のグループ
datalist 入力候補
label 入力コントロールにおける
項目名
fieldset 入力コントロールの内容を
まとめる
legend 入力コントロールの内容グループに見出しを付ける
keygen 公開鍵の鍵ペアを生成
output 計算の出力結果
progress 進捗状況
meter 特定範囲にある数値

埋め込み要素

タグ 頻度 解説
img 画像ファイルを表示
picture レスポンス・イメージを指定
source video要素、audio要素、picture
要素で複数の外部リソース
を指定
map イメージマップを作成
area ホットスポット領域を指定
iframe インラインフレームを表示
embed 外部アプリケーションやインタ
ラクティブコンテンツを埋め込む
audio 音声コンテンツを埋め込む
video 動画コンテンツを埋め込む
track video要素やaudio要素のトラック
情報を指定
svg SVG画像をHTML文書に埋め込む
object 外部のリソースを埋め込む
param 外部リソースが利用するパラメータ

テーブル

タグ 頻度 解説
table 表組み
caption 表組みのタイトル
tr 表組みの行
td 表組みのセル
th 表組みの見出しセル
thead 表組みのヘッダー部分の行グループ
tbody 表組みの本体部分の行グループ
tfoot 表組みのフッター部分の行グループ
colgroup 表組みの列グループ
col 表組みの列

インタラクティブ要素

タグ 頻度 解説
details 使用可能なウィジット
summary details要素の要約を示す
dialog ダイアログを示す
menu 操作メニュー
menuitem 操作メニューの項目

スクリプト

タグ頻度解説
scriptJavaScript等のクライアント
サイドスクリプトを埋め込む
noscriptスクリプトが動作しない環境の
内容を表す
templateスクリプトが利用するHTMLの
パーツを表す
canvasグラフィックやアニメーションの
描写領域を表す
slotShadowツリーとして埋め込む

アルファベット順

A

タグ 解説
a リンク
abbr 略称を表す
address 連絡先情報
area ホットスポット領域を指定
asld 補足情報
audio 音声コンテンツを埋め込む

B

タグ 解説
b 他と区別したいテキストを示す
base 相対パスの基準となるURLを指定
bdi 他のテキストとは異なる書字方向で
あることを示す
bdo テキストの書字方向を指定する
blockquote 段落単位での引用
body HTML文書の本文
br 改行を示す
button ボタン

C

タグ 解説
canvas グラフィック描写領域
caption 表組みのタイトル設定
cite 作品のタイトル設定
col コンピュータ言語のコード
colgroup 表組みの列グループを表す

D

タグ 解説
data コンピュータが理解できるデータを
示す
datalist 入力候補
dd 定義リストの説明文
del 削除された箇所を示す
details 使用可能なウィジット
dfn 定義語を示す
dialog ダイアログを示す
div 特別に機能がない汎用的な範囲
(要素を
グループ
化)
dl 定義リスト
dt 定義リストの語句

E

タグ 解説
em 強調したいテキストを表す
embed 外部アプリケーションやインタラク
ティブコンテンツを埋め込む

F

タグ 解説
fieldset 入力コントロールの内容を
まとめる
figcaption 写真などにキャプションを付与
する
figure 写真などのまとまり
footer フッター情報
form 表組みの列グループを表す

H

タグ 解説
h1~h6 コンピュータが理解できるデータを
示す
head ヘッダ情報
header ヘッダー情報
hr 段落の区切り
html ルート要素

I

タグ 解説
i 通常のテキストとは少し異なる
テキストを示す
iframe インラインフレームを表示
img 画像を埋め込む
input 入力コントロール
 type=submit 送信ボタン
 type=image 画像形式の送信ボタン
 type=reset 入力内容のリセットボタン
 type=hidden 閲覧者に表示しないデータ
 type=text 1行のテキスト入力欄
 type=search 検索キーワードの入力欄
 type=tel 電話番号の入力欄
 type=url URLの入力欄
 type=email メールアドレスの入力欄
 type=password パスワードの入力欄
 type=datetime 日時の入力欄
 type=month 月の入力欄
 type=week 週の入力欄
 type=date 日付の入力欄
 type=time 時刻の入力欄
 type=number 数値の入力欄
 type=range 大まかな数値の入力欄
 type=checkbox チェックボックス
 type=radio ラジオボタン
 type=file 送信するファイルの選択欄
 type=button スクリプト言語を起動する
ボタン
 type=color RGBカラーの入力欄

K

タグ 解説
kbd 入力テキストを表す

L

タグ 解説
label 入力コントロールにおける
項目名
legend 入力コントロールの内容グル
ープに見出しを付ける
li リストの項目
link 指定した外部のリソースを参照

M

タグ 解説
main 主なコンテンツ
map イメージマップを作成
mark ユーザーの操作によって目立たせる
テキストを示す
menu 操作メニュー
meta HTML文書に関する情報
(メタデータ)
meter 特定範囲にある数値

N

タグ 解説
nav ナビゲーション
noscript スクリプトが動作しない環境の内容
を表す

H

タグ 解説
h1~h6 コンピュータが理解できるデータを
示す
head ヘッダ情報
header ヘッダー情報
hr 段落の区切り
html ルート要素

P

タグ 解説
p 段落
param 外部リソースが利用するパラメータ
picture レスポンス・イメージを指定
pre 整形済みテキスト
progress 進捗状況

Q

タグ 解説
q 短い引用文であることを示す

R

タグ 解説
rb ルビを振る対象テキストを示す
rp ルビテキスト
rtc ルビテキストの集まり
ruby ルビを振る

S

タグ 解説
s 無効になった内容を示す
samp プログラムなどの出力結果であること
を示す
script JavaScript等のクライアントサイド
スクリプトを埋め込む
section 文書のセクション
select プルダウンメニュー
slot Shadowツリーとして埋め込む
small 細目を示す
source 要素で複数の外部リソース
を指定
span 汎用的な範囲を示す
strong テキストに重要性示す
style スタイル情報を記述
sub 下付き文字を表示する
summary details要素の要約を示す
sup 上付き文字を表示する

T

タグ 解説
table 表組み
tbody 表組みの本体部分の行グループ
td 表組みのセル
template スクリプトが利用するHTMLの
パーツを表す
textarea 複数行のテキスト入力欄
tfoot 表組みのフッター部分の行グループ
th 表組みの見出しセル
thead 表組みのヘッダー部分の行グループ
time 日付や時刻を正確に示す
title HTML文書のタイトル要素
tr 表組みの行
track video要素やaudio要素のトラック
情報を指定

U

タグ 解説
u スペルミスや外国固有代名詞などを
示す
ul 順不同リスト

V

タグ 解説
var 変数であることを示す
video 動画コンテンツを埋め込む

W

タグ 解説
wbr 改行が可能な位置を指定する
タイトルとURLをコピーしました