ドキュメントタイプを宣言
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属性などに指定する言語コード。世界の言語をアルファベット２文字で記号化したもの。ISO639という文書で定義されています。
主な言語コード
| 言語コード | 言語 |
|---|---|
| ja | 日本語 |
| en | 英語 |
| zh | 中国語 |
| ko | 韓国語 |
| es | スペイン語 |
| de | ドイツ語 |
| fr | フランス語 |
その他言語コード
ISO 639-1コード一覧 - Wikipedia
ja.wikipedia.org
HTMLタグ目次
カテゴリ別
基本構造
段落・箇条書き
テキストの属性
| タグ | 頻度 | 解説 | |
|---|---|---|---|
| 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 | １行のテキスト入力欄 | ||
| 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 | 外部リソースが利用するパラメータ |
テーブル
アルファベット順
B
| タグ | 解説 |
|---|---|
| b | 他と区別したいテキストを示す |
| base | 相対パスの基準となるURLを指定 |
| bdi | 他のテキストとは異なる書字方向で あることを示す |
| bdo | テキストの書字方向を指定する |
| blockquote | 段落単位での引用 |
| body | HTML文書の本文 |
| br | 改行を示す |
| button | ボタン |
C
| タグ | 解説 |
|---|---|
| canvas | グラフィック描写領域 |
| caption | 表組みのタイトル設定 |
| cite | 作品のタイトル設定 |
| col | コンピュータ言語のコード |
| colgroup | 表組みの列グループを表す |
D
E
| タグ | 解説 |
|---|---|
| em | 強調したいテキストを表す |
| embed | 外部アプリケーションやインタラク ティブコンテンツを埋め込む |
F
| タグ | 解説 |
|---|---|
| fieldset | 入力コントロールの内容を まとめる |
| figcaption | 写真などにキャプションを付与 する |
| figure | 写真などのまとまり |
| footer | フッター情報 |
| form | 表組みの列グループを表す |
I
| タグ | 解説 |
|---|---|
| i | 通常のテキストとは少し異なる テキストを示す |
| iframe | インラインフレームを表示 |
| img | 画像を埋め込む |
| input | 入力コントロール |
| type=submit | 送信ボタン |
| type=image | 画像形式の送信ボタン |
| type=reset | 入力内容のリセットボタン |
| type=hidden | 閲覧者に表示しないデータ |
| type=text | １行のテキスト入力欄 |
| 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
H
| タグ | 解説 |
|---|---|
| h1～h6 | コンピュータが理解できるデータを 示す |
| head | ヘッダ情報 |
| header | ヘッダー情報 |
| hr | 段落の区切り |
| html | ルート要素 |
Q
| タグ | 解説 |
|---|---|
| q | 短い引用文であることを示す |