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/

CDN

CDN(Content Delivery Network)は、Webコンテンツをインターネット経由で効率良く配信するための仕組みです。CDNでは、配信元から配布されたコンテンツを、世界中に用意されたサーバにキャッシュしておき、ユーザーから要求があった時、ネットワーク的にもっとも近いサーバからデータを配信するなどの機能を持っています。これにより、サーバーやネットワークの負荷を分散することができます。CDNの仕組みは、アプリケーションや画像や映像、音楽などの音声の配信やオンラインゲームなどでも利用されています。

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

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内での記述方法
<&lt;
>&gt;
&quot;
&&amp;
< <
> >
" "
& &

半角スペース、タブ、改行の扱いについて(空白文字)

構造をわかりやすくするために、HTMLのタグは字下げ(インデント)して書くことができます。字下げは半角スペースで行ってもタブで行ってもかまいません。また、タグの前後には改行を入れることもできます。ただし、コンテンツとして半角スペースやタブ、改行を連続していれても、一般的なブラウザではそれらはまとめて1つの半角スペースに変換されて表示されます。HTMLでは、半角スペース、タブ、改行はまとめて「空白文字」と呼ばれています。

HTMLに空白スペースを入れる方法

  • &ensp; この特殊文字で、 &nbsp;よりも広めの空白をいれることができます。
  • &emsp; この特殊文字で、&nbsp;の2倍の広さの空白をいれることができます。
  • &thinsp; この特殊文字で、&nbsp;よりも更に狭い空白を入れることができます。

preタグを使う方法

文章をpreタグで囲むと、その文章内の空白分がそのままブラウザに表示されます。

<pre>
朝の  コーヒー
夜の    寝酒
</pre>

ファイルの場所の示し方(絶対パスと相対パス)

HTMLで画像を表示させたり動画を再生させる場合は、そのファイルの名前と格納場所を指定します。HTMLにおいてファイルの場所を示す方法は、2種類あります。1つは、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~h6pdivblockquote
addresspreulol
dlformtablehr

インライン要素の代表的な例

aimgspanem
strongbrqcite
codeinputtextareaselect

id属性とclass属性の役割

同じ種類の要素がたくさんある中で、その中の特定の1つを指し示したり、分類する必要が生じることがあります。id属性を使用すると要素に固有の名前を付けることができ、class属性を使用すると分類上の名前をつけることができます。

固有の名前を指定するid属性

id="固有の名前"

id属性は、任意の要素に対して固有の名前をつけることのできる属性です。たとえばページ内の特定の場所(要素)にリンクしたい場合や、複数ある同じ要素の中で1つだけ異なる表示を指定したい場合などに使用します(CSSを使うと、特定のid属性の値が指定されている要素を対象にデザイン指定ができます)。特定の1つの要素を指し示すための名前なので、同じ1つのページ内で同じ名前を使用することはできません。

<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属性などに指定する言語コード。世界の言語をアルファベット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動画コンテンツを埋め込む