HTML入門
W3CとWHATWG
DOMやHTMLに関連する正式な仕様は、W3C（ダブリュスリーシー）という団体によって勧告されてきました。しかし、2004年にW3Cとの方向性の違いからWHATWG（ワットダブルジー）という団体が新たに立ち上がり、それ以降、W3CとWHATWGで重複して仕様を管理、変更する形でDOMとHTMLの使用が管理されてきました。しかし、2019年に個々に管理されてきた仕様を、WHATWGの仕様に一本化することで両者間の合意がなれています。WHATWGはHTML/DOMの他にもブラウザの関連技術に関する仕様を策定しており、最新の仕様書は以下のWebサイトから確認できます。
WHATWG -Standards（https://spec.whatwg.org/）
ドキュメントタイプを宣言
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では、<と>はタグを表すために使用されますので、そのまま書くとタグの一部だと解釈されてしまい表示されません。そのような特別な役割を持った文字を普通の文字として表示させたい場合には、「&〇〇;」という書式を使用します。また、必ず小文字で書くようにしてください。
| 表示される文字 | HTML内での記述方法 |
|---|---|
| < | < |
| > | > |
| “ | " |
| & | & |
< <
> >
" "
& &半角スペース、タブ、改行の扱いについて（空白文字）
構造をわかりやすくするために、HTMLのタグは字下げ（インデント）して書くことができます。字下げは半角スペースで行ってもタブで行ってもかまいません。また、タグの前後には改行を入れることもできます。ただし、コンテンツとして半角スペースやタブ、改行を連続していれても、一般的なブラウザではそれらはまとめて１つの半角スペースに変換されて表示されます。HTMLでは、半角スペース、タブ、改行はまとめて「空白文字」と呼ばれています。
HTMLに空白スペースを入れる方法
 この特殊文字で、 よりも広めの空白をいれることができます。 この特殊文字で、 の２倍の広さの空白をいれることができます。 この特殊文字で、 よりも更に狭い空白を入れることができます。
preタグを使う方法
文章をpreタグで囲むと、その文章内の空白分がそのままブラウザに表示されます。
<pre>
朝の コーヒー
夜の 寝酒
</pre>ファイルの場所の示し方（絶対パスと相対パス）
HTMLで画像を表示させたり動画を再生させる場合は、そのファイルの名前と格納場所を指定します。HTMLにおいてファイルの場所を示す方法は、2種類あります。１つは、https://wawa/book.jpgのように、インターネット上のアドレス（URL）で示す方法。この方式を絶対パスといいます。
2つ目は、同じディスク内にあるファイルを相対的な位置関係で示す、相対パスという書式。相対パスを記述しているHTML文書の位置を基準にして、そこから下の階層のフォルダにあるファイルを示す場合は、フォルダ名とファイル名を/で区切って指定します。imgesフォルダの中に、headerフォルダの中にあるsample.jpgであれば、以下のようになります。
images/header/sample.jpg上の階層をあらわす場合は、1つ上の階層ごとに../を付けます。たとえば、2つ上の階層のフォルダのindex.htmlでは、以下のようになります。
../../idnex.htmlカラー見本
ブロックレベル要素とインライン要素
CSSの表示指定の中には、ブロックレベル要素だけに指定できるものや、インライン要素だけに指定できるものがあります。ここでは、ブロックレベル要素とインライン要素の関係を解説しています。
HTMLの要素は、大きくブロックレベル要素とインライン要素に分けられます。ブロックレベル要素は、それ自身がひとまわりのまとまった単位のデータで、見出しや段落などが該当します。一般に初期状態では、その前後は改行された状態となり、表示領域はブラウザの横幅いっぱいまで広がります。インライン要素は、基本的には文書の一部分を構成するような要素です。したがってブロックレベル要素のように前後が改行された状態にはなりません。幅は基本的にはコンテンツそのものの幅となり、状況によってはその途中から次の行へ送られたりといった状態にもなります。
CSSの表示指定の中には、ブロックレベル要素にしか指定できないものが結構あります。
ブロックレベル要素の代表的な例
| h1～h6 | p | div | blockquote |
| address | pre | ul | ol |
| dl | form | table | hr |
インライン要素の代表的な例
| a | img | span | em |
| strong | br | q | cite |
| code | input | textarea | select |
iｄ属性とclass属性の役割
同じ種類の要素がたくさんある中で、その中の特定の1つを指し示したり、分類する必要が生じることがあります。id属性を使用すると要素に固有の名前を付けることができ、class属性を使用すると分類上の名前をつけることができます。
固有の名前を指定するid属性
id="固有の名前"id属性は、任意の要素に対して固有の名前をつけることのできる属性です。たとえばページ内の特定の場所（要素）にリンクしたい場合や、複数ある同じ要素の中で1つだけ異なる表示を指定したい場合などに使用します（CSSを使うと、特定のid属性の値が指定されている要素を対象にデザイン指定ができます）。特定の１つの要素を指し示すための名前なので、同じ１つのページ内で同じ名前を使用することはできません。
<h1 id="page-top">絶品グルメの旅</h1>id属性の会いたいとして指定する名前には、必ず1文字以上を指定する必要があります。id属性はスペース区切りで複数の指定はできません。
分類上の名前を指定するclass属性
class="分類上の名前"class属性は、任意の要素に対して分類上の名前を付ける属性です。分類上の名前なので、その種類に分類される複数の要素に同じ名前を指定することができます。
<h1 id="color-red">絶品グルメの旅</h1>class属性の値には、複数の名前を半角スペースで区切って入れることができます。その個数に制限はありません。指定する順序も自由でデザインに影響することはありません。
<h1 id="color-red under">絶品グルメの旅</h1>id属性とclass属性の使い分け
複数に同じ名前を使用する場合は、class属性を使用します。一か所以外に使用する予定がない場合は、id属性を使用します。
言語コード
lang属性などに指定する言語コード。世界の言語をアルファベット２文字で記号化したもの。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 | １行のテキスト入力欄 | |
| 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 | １行のテキスト入力欄 |
| 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