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 | ヘッダ情報 |
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 | ブロックレベル | 段落の区切り |
テキストの属性
フォーム
タグ | 解説 | |
---|---|---|
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 | 表組みの列 |
インタラクティブ要素
スクリプト
タグ | 解説 |
---|---|
script | JavaScript等のクライアント サイドスクリプトを埋め込む |
noscript | スクリプトが動作しない環境の 内容を表す |
template | スクリプトが利用するHTMLの パーツを表す |
canvas | グラフィックやアニメーションの 描写領域を表す |
slot | Shadowツリーとして埋め込む |
アルファベット順
F
タグ | 解説 |
---|---|
fieldset | 入力コントロールの内容を まとめる |
figcaption | 写真などにキャプションを付与 する |
figure | 写真などのまとまり |
footer | フッター情報 |
form | 表組みの列グループを表す |
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カラーの入力欄 |
M
S