HTML辞典

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

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

< <
> >
" "
& &

カラー見本

詳細はこちらを参照

言語コード

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

主な言語コード

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

その他言語コード

こちらを参照

HTMLタグ目次

カテゴリ別

基本構造

タグ解説
DOCTYPEドキュメントタイプ宣言
htmlルート要素
headヘッダ情報
metaHTML文書に関する情報(メタデータ)
titleHTML文書のタイトル要素
base相対パスの基準URLを指定
link外部リソースを指定
styleスタイル情報を記述
bodyHTML文書の本文

セクション

タグ解説
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ルビを振る
rtルビテキスト
タグ解説
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=text1行のテキスト入力欄
type=search検索キーワードの入力欄
type=tel電話番号の入力欄
type=urlURLの入力欄
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=colorRGBカラーの入力欄
buttonボタン
textareaインライン複数行のテキスト入力欄
selectインラインプルダウンメニュー
optionプルダウンメニューの項目
optgroup選択肢のグループ
datalist入力候補
label入力コントロールにおける
項目名
fieldset入力コントロールの内容を
まとめる
legend入力コントロールの内容グループに見出設定
keygen公開鍵の鍵ペアを生成
output計算の出力結果
progress進捗状況
meter特定範囲にある数値

埋め込み要素

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

テーブル

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

インタラクティブ要素

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

スクリプト

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

アルファベット順

A

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

B

タグ解説
b他と区別したいテキストを示す
base相対パスの基準となるURLを指定
bdi他のテキストとは異なる書字方向で
あることを示す
bdoテキストの書字方向を指定する
blockquote段落単位での引用
bodyHTML文書の本文
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=text1行のテキスト入力欄
type=search検索キーワードの入力欄
type=tel電話番号の入力欄
type=urlURLの入力欄
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=colorRGBカラーの入力欄

K

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

L

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

M

タグ解説
main主なコンテンツ
mapイメージマップを作成
markユーザーの操作によって目立たせる
テキストを示す
menu操作メニュー
metaHTML文書に関する情報
(メタデータ)
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プログラムなどの出力結果であること
を示す
scriptJavaScript等のクライアントサイド
スクリプトを埋め込む
section文書のセクション
selectプルダウンメニュー
slotShadowツリーとして埋め込む
small細目を示す
source要素で複数の外部リソース
を指定
span汎用的な範囲を示す
strongテキストに重要性示す
styleスタイル情報を記述
sub下付き文字を表示する
summarydetails要素の要約を示す
sup上付き文字を表示する

T

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

U

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

V

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