Tech：HTML

HTML リファレンス

ここのHTMLリファレンスは初心者向けではありません。また、全部の項目は網羅していません。

HTMLファイルに最低限必要なもの

HTML を構成する上で、最低限必要なタグは <html>, <head>, <title>, <body>です。<head>タグ内にページの情報を記述し、<body>タグ内にブラウザで表示する内容を記述します。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD  HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/transitional.dtd">
<html>
<head>
<title>タイトル</title>
</head>
<body>
<!-- ファイルの内容（コメント） -->
</body>
</html>

最も利用されるタグ

目的概要とタグ

パラグラフ（段落）
文章に段落を持たせるために <p></p> タグで文章を括る。
<p>このページは、過去の不思議な体験を綴っています。<p>

ヘッド（表題）表題にするには <h1></h1>タグで括る。h1〜h6 まであり、h１が一番大きい。ページの構成としては、h1 は各ページにひとつのみが好ましい。

リスト
リストの項目を<li></li>タグで括り、項目のまとまりを <ul></ul>タグで括る。<ol>タグで括るとリストがナンバリングされる。
<ul> <li>遠くの方で光っては消え光っては消え</li> <li>千鳥足のネコ</li> <li>いつのまにか元の場所</li> </ul>

リンク
クリックしたときに別のページに遷移するには、<a href=""></a>タグでクリックしたい文字/画像を括り、遷移先を href 属性に指定する。
<a href="http://www.example.com/next.html">次へ</a>

画像
<img src="" alt="" />タグを使い、src属性に画像のURLを、alt属性に画像が見れない時の代替えの概要を指定する。他にも画像の幅や高さなどを指定する属性など数多くある。
<img src="http://www.example.com/images/dog.jpg" width="100" height="100" alt="犬" />

テーブル
テーブルを組む。多くの設定が可能なのでここでは大枠のタグの例のみ記述。以下は、4行3列のテーブル。
<table> <tr><th>タイトル</th><th>概要</th><th>例題</th></tr> <tr><td>行 1, 列 1</td><td>行 1, 列 2</td><td>行 1, 列 3</td></tr> <tr><td>行 2, 列 1</td><td>行 2, 列 2</td><td>行 2, 列 3</td></tr> <tr><td>行 3, 列 1</td><td>行 3, 列 2</td><td>行 3, 列 3</td></tr> </table>

入力フォーム入力フォームを実現するには <form></form>タグを利用する。詳細は入門書を参考に...

目的	概要とタグ
パラグラフ（段落）	文章に段落を持たせるために <p></p> タグで文章を括る。 `<p>このページは、過去の不思議な体験を綴っています。<p>`
ヘッド（表題）	表題にするには <h1></h1>タグで括る。h1〜h6 まであり、h１が一番大きい。ページの構成としては、h1 は各ページにひとつのみが好ましい。
リスト	リストの項目を<li></li>タグで括り、項目のまとまりを <ul></ul>タグで括る。<ol>タグで括るとリストがナンバリングされる。 `<ul> <li>遠くの方で光っては消え光っては消え</li> <li>千鳥足のネコ</li> <li>いつのまにか元の場所</li> </ul>`
リンク	クリックしたときに別のページに遷移するには、<a href=""></a>タグでクリックしたい文字/画像を括り、遷移先を href 属性に指定する。 `<a href="http://www.example.com/next.html">次へ</a>`
画像	<img src="" alt="" />タグを使い、src属性に画像のURLを、alt属性に画像が見れない時の代替えの概要を指定する。他にも画像の幅や高さなどを指定する属性など数多くある。 `<img src="http://www.example.com/images/dog.jpg" width="100" height="100" alt="犬" />`
テーブル	テーブルを組む。多くの設定が可能なのでここでは大枠のタグの例のみ記述。以下は、4行3列のテーブル。 `<table> <tr><th>タイトル</th><th>概要</th><th>例題</th></tr> <tr><td>行 1, 列 1</td><td>行 1, 列 2</td><td>行 1, 列 3</td></tr> <tr><td>行 2, 列 1</td><td>行 2, 列 2</td><td>行 2, 列 3</td></tr> <tr><td>行 3, 列 1</td><td>行 3, 列 2</td><td>行 3, 列 3</td></tr> </table>`
入力フォーム	入力フォームを実現するには <form></form>タグを利用する。詳細は入門書を参考に...

div と span タグ

CSS(Cascading Styles Sheets) を利用してレイアウトを整えるのが当たり前になってきていることで重要になってきた div と span タグ。このタグは、ある要素にスタイルを指定するために class や id 属性を持たせるのに使われます。この二つのタグの違いは、div はブロック単位で要素に属性を持たせたい時に利用し、span はインライン上の要素に属性を持たせたいときに利用します。

<div id="animal">
  <p>あの<span class="cat">猫</span>の<span class="words">にくきゅう</span>が柔らかくて</p>
</div>

ドキュメントタイプ

ドキュメントタイプの記述は、HTMLファイルの一番初めの開始タグの前に記述します。<!DOCTYPE HTML PUBLIC "...">という記述となり、一般に公開されたHTML-DTDを使うという意味になります。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
     "http://www.w3.org/TR/html4/loose.dtd">

引用符の中に書き込まれている部分の DTD HTML 4.01 Transitional といった記述は、サイトの製作者がドキュメントタイプ「HTML」を使用し、言語のバージョンは 4.01、そしてその中の Transitional という種類を使うという意味になります。EN というのは、英語でタグの要素と属性の名前を定義していることを示します。テキストの内容に使用する言語のことではありません。HTML要素および属性は英語で作られているので常に EN を使用します。スラッシュ（/）は上の例と同じように記載します。なお、ドキュメントタイプの記述にはWebアドレスを載せます。このアドレスの記述は強制ではないので省略してもかまいません。

バリエーション概要

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd"> 指定されたバージョン純正のHTMLに属している要素と属性のみ利用。このバリエーションでは <body>と </body>の間にただテキストだけを記述することは許されていません。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd"> 過去に許されていた要素と属性を利用。このバリエーションでは入れ子式に書かれる要素の規則がゆるい。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
    "http://www.w3.org/TR/html4/frameset.dtd"> HTMLファイルでフレームを使用する場合に利用。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 決められたルールそった厳密な書式。上記 HTMLのXHTMLに相当するドキュメントタイプ

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> HTMLからの移行期に標準的に使用されている。上記 HTMLのXHTMLに相当するドキュメントタイプ

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> フレームを使ってのサイトを構成する場合に使用。上記 HTMLのXHTMLに相当するドキュメントタイプ

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> XHTML1.1のためのドキュメントタイプ

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 2.0//EN"> HTML2.0 を利用

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> HTML3.2 を利用

バリエーション	概要
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">	指定されたバージョン純正のHTMLに属している要素と属性のみ利用。このバリエーションでは <body>と </body>の間にただテキストだけを記述することは許されていません。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">	過去に許されていた要素と属性を利用。このバリエーションでは入れ子式に書かれる要素の規則がゆるい。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">	HTMLファイルでフレームを使用する場合に利用。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">	決められたルールそった厳密な書式。上記 HTMLのXHTMLに相当するドキュメントタイプ
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">	HTMLからの移行期に標準的に使用されている。上記 HTMLのXHTMLに相当するドキュメントタイプ
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">	フレームを使ってのサイトを構成する場合に使用。上記 HTMLのXHTMLに相当するドキュメントタイプ
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">	XHTML1.1のためのドキュメントタイプ
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 2.0//EN">	HTML2.0 を利用
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">	HTML3.2 を利用

メタ・タグ（ヘッダ情報）

メタ・タグを使用することで、Webサーバー、Web ブラウザー、ロボットにさまざまな有用な指示を与えることができます。ファイルの著者とページの内容を記述することができます。メタ・タグは meta という名前のスタンドアローン・タグに記述します。それぞれのメタ・タグには普通の2つの属性があります。1つは nameまたは http-equivで、もう1つは contentです。この2つの属性は「属性＝値」という形で表します。nameと http-equivの違いは、nameが特に詳しい属性を挙げず一般的な定義であるのに対し、http-equivではWebサーバーが読み込むべき属性であると明確に定義してあるということです。

属性概要

<meta name="author" content="名前"> 著者・著作権所有者を記述。

<meta name="description" content="テキスト"> テキストにファイルの内容の簡単な紹介を記述。

<meta name="keywords" content="キーワード1, キーワード2"> 内容を示すキーワードを記述。語数は自由。言葉の間をカンマで区切る。

<meta name="date" content="yyyy-MM-ddThh:mm:ss+hh:mm"> yyyy年、MM月、dd日、hh時、mm分、ss秒、+/-：グリニッジ標準時からのずれを時間と分で示します。

<meta name="robots" content="指示">
検索ロボットに対する指示
index = 検索のインデックスに読み込む
noindex = 読み込み禁止
follow = リンクされたファイルも読み込む
nofollow = リンクされたファイルは読み込まない

<meta http-equiv="content-type" content="Mime-Type; charset=文字セット"> 文字セットを記述。
text/htmlのような Mime-Type、ISO-8859-1や Shift_JISのような文字セットを指定。

<meta http-equiv="Content-Style-Type" content="Mime-Type"> スタイル言語を記述。
text/css のような Mime-Typeを指定。

<meta http-equiv="Content-Script-Type" content="Mime-Type"> スクリプト言語を記述。
text/javascript のような Mime-Typeを指定。

<meta http-equiv="expires" content="0"> 一定の時期を過ぎたら元のアドレスからロードするように指示。0 とすると常に元のアドレスからロードする (プロキシー・サーバーを無視)。

<meta http-equiv="refresh" content="0; URL=アドレス"> 指定した時間が過ぎたのち、どのアドレスから自動的にロードするか指示。0 とすると即座に指示のあったアドレスからロードを開始(待機する時間は秒数で入力)。

<base href="アドレス"> Webアドレスやターゲットを記述。
これはページ内の相対的なアドレスに対する基本のアドレスとなります。

属性	概要
<meta name="author" content="名前">	著者・著作権所有者を記述。
<meta name="description" content="テキスト">	テキストにファイルの内容の簡単な紹介を記述。
<meta name="keywords" content="キーワード1, キーワード2">	内容を示すキーワードを記述。語数は自由。言葉の間をカンマで区切る。
<meta name="date" content="yyyy-MM-ddThh:mm:ss+hh:mm">	yyyy年、MM月、dd日、hh時、mm分、ss秒、+/-：グリニッジ標準時からのずれを時間と分で示します。
<meta name="robots" content="指示">	検索ロボットに対する指示 index = 検索のインデックスに読み込む noindex = 読み込み禁止 follow = リンクされたファイルも読み込む nofollow = リンクされたファイルは読み込まない
<meta http-equiv="content-type" content="Mime-Type; charset=文字セット">	文字セットを記述。 text/htmlのような Mime-Type、ISO-8859-1や Shift_JISのような文字セットを指定。
<meta http-equiv="Content-Style-Type" content="Mime-Type">	スタイル言語を記述。 text/css のような Mime-Typeを指定。
<meta http-equiv="Content-Script-Type" content="Mime-Type">	スクリプト言語を記述。 text/javascript のような Mime-Typeを指定。
<meta http-equiv="expires" content="0">	一定の時期を過ぎたら元のアドレスからロードするように指示。0 とすると常に元のアドレスからロードする (プロキシー・サーバーを無視)。
<meta http-equiv="refresh" content="0; URL=アドレス">	指定した時間が過ぎたのち、どのアドレスから自動的にロードするか指示。0 とすると即座に指示のあったアドレスからロードを開始(待機する時間は秒数で入力)。
<base href="アドレス">	Webアドレスやターゲットを記述。これはページ内の相対的なアドレスに対する基本のアドレスとなります。

HTMLタグの属性メモ

HTML タグで利用する属性の意味をメモしてあります。しかし、自分でページを作る場合、どれも利用しない方がよいものばかりです。

タグ/属性概要

align="位置" タグ内の文字列や画像、表などの横に対する位置を指示する属性。
left = 左揃え
center = センタリング
right = 右揃え
justify = 両端揃え

valign="位置" タグ内の文字列や画像、表などの高さに対する位置を指示する属性。
top = 上揃え
middle = 中央揃え
bottom = 下揃え
baseline = テキストのベースラインに揃える

<pre width="幅">テキスト</pre> スペースや改行を原稿どおりに指定の幅で表示するタグ。

target="リンク" リンク先のページのロード場所を指示する属性。
_blank = 新しいウインドウで開く
_self = カレントのフレームやウインドウで開く
_top = フレームなどを排除しウインドウ全体で開く
_parent = 上位のフレーム内で開く

<a href="mailto:name@example.com">テキスト</a> E-mail 送信のためのタグ。デフォルト値を設定可能。
subject = サブジェクト
cc = CC
bcc = BCC
body = 本文

タグ/属性	概要
align="位置"	タグ内の文字列や画像、表などの横に対する位置を指示する属性。 left = 左揃え center = センタリング right = 右揃え justify = 両端揃え
valign="位置"	タグ内の文字列や画像、表などの高さに対する位置を指示する属性。 top = 上揃え middle = 中央揃え bottom = 下揃え baseline = テキストのベースラインに揃える
<pre width="幅">テキスト</pre>	スペースや改行を原稿どおりに指定の幅で表示するタグ。
target="リンク"	リンク先のページのロード場所を指示する属性。 _blank = 新しいウインドウで開く _self = カレントのフレームやウインドウで開く _top = フレームなどを排除しウインドウ全体で開く _parent = 上位のフレーム内で開く
<a href="mailto:name@example.com">テキスト</a>	E-mail 送信のためのタグ。デフォルト値を設定可能。 subject = サブジェクト cc = CC bcc = BCC body = 本文

使わない方が良いタグ

最近では、CSS (Cascading Styles Sheets) を利用することが当たり前のようになったことと、意味が曖昧だということで、利用するのはあまり好ましくないタグがあります。

悪いタグ/属性代替と理由

b 強調する意味が強いなら strong
基本は CSS を利用する font-weight: bold

i 強調する意味が強いなら em
基本は CSS を利用する　font-style: italic

big ヘッド（表題）の意味として利用するなら h1, h2, h3, ...
それ以外では CSS の font-size を用いる

small CSS の font-size を用いる

hr CSS の border-top や border-bottom を用いるか、画像を利用する

center CSS の text-align を用いる

layer ブラウザによって利用できないことが多いので CSSの div タグで実現する方がよい。

font フォントのサイズや色を変えたりするには CSS を利用したほうが汎用的（後々の変更が容易）

frame ほとんどのページは、単一ページで実現できると思うので極力使わない方がよい。製品のマニュアルのようなページを作る場合には便利な場合もある。

bgcolor, background, align これらレイアウトに関する属性は、CSSを利用したほうが汎用的

悪いタグ/属性	代替と理由
b	強調する意味が強いなら strong 基本は CSS を利用する font-weight: bold
i	強調する意味が強いなら em 基本は CSS を利用する　font-style: italic
big	ヘッド（表題）の意味として利用するなら h1, h2, h3, ... それ以外では CSS の font-size を用いる
small	CSS の font-size を用いる
hr	CSS の border-top や border-bottom を用いるか、画像を利用する
center	CSS の text-align を用いる
layer	ブラウザによって利用できないことが多いので CSSの div タグで実現する方がよい。
font	フォントのサイズや色を変えたりするには CSS を利用したほうが汎用的（後々の変更が容易）
frame	ほとんどのページは、単一ページで実現できると思うので極力使わない方がよい。製品のマニュアルのようなページを作る場合には便利な場合もある。
bgcolor, background, align	これらレイアウトに関する属性は、CSSを利用したほうが汎用的