HTML辞典(抜粋)
出典
https://html-coding.co.jp/annex/dictionary/html/
<!DOCTYPE>とは
「!DOCTYPE」とは文書の解釈に使うDTDを宣言するもので、正確に言えばHTMLのタグではありません。HTML文書を作成するとき、HTMLタグよりも先頭にまず書くべきなのが DOCTYPE 宣言です。
「DTD」とは「Document Type Definition」のことで、「文書型の定義」を意味します。HTMLのバージョンごとに、そのバージョンで使用できる要素(タグ)や属性の名前などの情報が定義されています。
たとえば、「<!DOCTYPE HTML」と記されている場合は、これからDTDを宣言することを示し、その文書タイプが「HTML」であるという意味です。
HTMLはSGML(Standard Generalized Markup Language)にもとづいて作られた言語であり、DOCTYPE宣言やDTDはSGMLに由来するものです。
多くのWebブラウザはDOCTYPE宣言の有無やその内容に応じて、標準準拠モード、おおむね標準準拠モード、互換モードといった異なる方法で文書を表示します。このDOCTYPEによる表示方法の切り替えはDOCTYPEスイッチと呼ばれています。
HTML5からのHTMLは、SGMLにもとづいた言語ではなくなりました。そのためHTML4までとは違って、DTDの指定が必要ありません。ただしDOCTYPE宣言自体は、DOCTYPEスイッチによってブラウザを標準準拠モードで動作させるため、HTML5でも必要とされています。
<html>とは
「HTML」とは、その文書がHTML文書であることを指定するタグです。このタグにより、「ここからHTMLの記述を開始する」または「終了する」という宣言がなされます。
また、HTMLとはマークアップ言語のひとつで、「HyperText Markup Language」の略称です。タグにより見出しや段落、文書内の別の箇所や他の文書へのリンク、画像の表示などを指定することができます。
<head>とは
「HEAD」とは、文書のヘッダ部分を指定するタグです。<head>タグで囲まれた内容はhtmlファイルの情報を宣言するものであり、<html>タグのあと、<body>タグの前に書きます。
<head>タグの中の内容は、<title>タグを除いて普通はブラウザの画面上に表示されません(title要素はブラウザ上部のタイトルバーに表示されます)。ヘッダ部分では<title>タグ、<meta>タグ、<link>タグなど、HTMLファイルのさまざまな情報が指定されます。また、スタイルシート(CSS)やJavaScriptを外部ファイル化した場合に、<head>タグの中に記述して読み込ませることもあります。
<link>とは
「LINK」とは、関連する文書ファイルを指定してその関係を定義するタグです。<link>タグを指定することで、例えば現在のページから見た「目次ページ」や「前のページ」、「次のページ」を示すことができ、上下の階層関係や順序などの関係が明示されます。また、外部スタイルシートの参照も可能になります。
<link>タグは<head>~</head>の間に記述することが必要です。
HTML4.01の時点では公式の標準仕様とは言えませんでしたが、rel="shortcut icon"を指定することで、ファビコン(お気に入りアイコン)の設定をすることもできます。これは殆どのブラウザで動作する、事実上の標準でした。
HTML5では公式の標準仕様としてこのファビコンの指定が取り込まれました。
<body>とは
「BODY」とは文章や画像など、実際にブラウザの画面上に表示される内容を指定するタグです。<body>タグの中に書かれたテキストや画像などがブラウザの画面上に表示されます。
<body>タグは、各部分の色を指定する属性が5つありますが、いずれも非推奨となっています。色を指定する際にはスタイルシートの使用が推奨されていますので、できるだけスタイルシートを使用しましょう。また、背景色や文字色はできるだけ5つセットで指定するようにします。これは5つセットで指定しない場合、ユーザー側で設定している表示色の組み合わせによっては文字が見づらくなってしまう可能性があるからです。
<div>とは
「DIV」とは、単体では特に意味を持たないタグですが、<div>で囲った部分をブロックレベル要素としてグループ化することができるタグです。グループ化することで、align属性により水平方向の位置をまとめて指定したり、指定した範囲にスタイルシートを適用したりすることができます。<div>タグはブロックレベル要素としてグループ化を行いますので、見出しや段落、リストなどとしてみなされ前後に改行が入ります。
<span>とは
「SPAN」とは、単体では特に意味を持たないタグですが、<span>~</span>で囲った部分をインライン要素としてグループ化することができるタグです。グループ化することで、指定した範囲にスタイルシートを適用したりすることができます。<span>はインライン要素で文章の一部として利用されますので前後に改行は入りません。
<form>とは
「FORM」とは、入力・送信フォームを作成する際に使用する要素です。
<form>タグがひとつのフォームとなり、フォームの中に<input>タグ、<select>タグ、<textarea>タグなどのフォーム部品を配置してフォームを作ります。
入力された値はmethod属性で指定した転送方法とenctype属性で指定したデータ形式でサーバへ送信され、action属性で指定したアクションを呼び出します。
アクションにはCGIやPHPプログラムのURLなどを指定してください。
<a>とは
「A」とは、「Anchor(アンカー)」の略で、リンクの出発点や到達点を指定するタグです。
リンクの出発点を示す場合は、href属性でリンク先を指定し、到達点を示す場合はname属性やid属性を使用し、その場所の名前(識別子)を指定します。
HTML4では<a>タグはインライン要素であるため、ブロックレベル要素を含めることができず、ブロック全体をリンクとして振る舞わせるには工夫が必要でした。
HTML5ではインライン要素/ブロックレベル要素といったタグの分類に変更があり、<a>タグの中に<div>タグなどの元ブロックレベル要素を含めてもよいことになりました。
<b>とは
「B」とはフォント(文字)を太字(bold)にするためのタグです。<b>タグで囲まれたテキストは太字になります。似た効果を持つものに<strong>タグがありますが、<strong>タグは単語や文章の「強調」をしたい場合に使用します。
<b>タグは非推奨タグではありませんが、この指定内容はスタイルシートで代替できるので、できるだけスタイルシートで指定しましょう。スタイルシートで指定した場合は<span style="font-weight: bold">~</span>などと記述します。
<h1>~<h6>とは
「H」とは「Heading」の略で、見出しを意味するタグです。文章の章題や節題を記述し、その見出しの大きさに合わせて<h1>タグから<h6>タグまで設定できます。<h1>タグが一番大きな見出し(大見出し)になり、以下数字が小さくなるにしたがって、下位の見出し(小見出し)という意味です。同じ数値のものが複数ある場合、は同じランクとして扱われます。
見出しの数字が小さくなるにしたがって文字が細く小さくなりますが、ブラウザによりその割合は異なります。この大きさを指定するためにはスタイルシートを使用することが必要です。
1つのセクションの中で最初の見出しの後、低いランクの見出しが続く場合には、そのセクションの一部であるサブセクションを開始されたものとみなされます。
<input>とは
「INPUT」とは、<form>タグで作成したフォームの中でテキスト入力欄やボタンなどの部品を作成する要素です。
部品はtype属性の値に指定することが可能で、一行テキストボックス、チェックボックス、ラジオボタン、実行ボタン、リセットボタンなどの部品を作成することができます。
input要素に入力された情報は、データとしてサーバに送信されます。
<button>とは
「BUTTON」とは、<form>タグで作成したフォームの中で汎用的にボタンを作成することができるタグです。
<button>タグで囲んだテキストや画像などがボタン上に表示され、HTMLを指定することもできます。
<input>タグでもボタンを作ることができ、同じ機能を持ちます。ただ、<button>タグで作成したボタンは、ボタン上のテキストを変えたり画像を表示させたりすることができ、テキストと画像を組み合わせる事も可能です。
<ul>とは
「UL」とは「unordered list(順序がないリスト)」の略で、その名前の通り順序がない箇条書きのリストを表示する際に使用するタグです。
順序がある番号付きのリストの場合は、<ol>を使用します。
リストの各項目は<li>で記述し、type属性により、黒丸、白丸、黒い四角を指定することが可能です。
また、<li>にtype属性をつけることで項目ごとに黒丸、白丸、黒い四角のマークを分けることができます。
<li>とは
「LI」とは「list item」の略で、リストの項目を表示するために使用するタグです。
<ul>~</ul> または<ol>~</ol>の間で使用します。
<ul>タグはリスト項目に順序を付けたくない場合に使用します。
リストは箇条書きで表記され、項目の間に順番や序列は発生しません。
逆に順番を明らかにしたい場合は<ol>を使用すると項目が順番付きのリストになります。
<table>とは
「TABLE」とは<tr>、<th>、<td>などと組み合わせて表を作成するためのタグです。表の基本的な構造は<table>~</table>の中に<tr>~</tr>で表の横部分を指定し、その中に<th>~</th>や<td>~</td>で表題や縦軸を指定してセルを定義します。この時ヘッダセルのテキストは、一般的なブラウザでは太字になりセンタリングされます。
<table>および<tr>はしばし、レイアウトのために使用されることがあります。しかし本来の使用方法ではありませんので、レイアウトで同様の効果が欲しい場合はスタイルシートを利用するとよいでしょう。
<tr>とは
「TR」とは「table row」の略で表の行部分(横方向)を指定するタグです。<tr>~</tr>で表の横部分を指定し、その中に<th>~</th>や<td>~</td>で表題や縦軸を指定してセルを定義します。
<th>とは
「TH」とは「table header」の略で、表の見出しやタイトルとなるヘッダセルを作成するタグです。セルの内容がデータに対する見出しの場合はこの<th>要素を使用します。また、ヘッダセルのテキストは、一般的なブラウザでは太字になりセンタリングされます。
表を作成する際には<tr>~</tr>で表の横部分を指定し、その中に<th>~</th>や<td>~</td>で表題や縦軸を指定してセルを定義します。
<td>とは
「TD」とは「table data」の略で、テーブルセルの内容を指定します。セルの内容がデータの場合は、この<td>要素を使用します。
表を作成する際には<tr>~</tr>で表の横部分を指定し、その中に<th>~</th>や<td>~</td>で表題や縦軸を指定してセルを定義します。
<p>とは
「P」とは、段落を指定するためのタグで、「P」とは「Paragraph」の略です。<p>~</p>で囲まれたテキストは1つの段落であることを示します。
HTMLにおける段落は、通常の文章と同じく文章のひとかたまりを表します。
<textarea>とは
「TEXTAREA」とは、複数行の入力が可能な入力欄を作成するためのタグです。
<textarea>~</textarea>内に入力されたテキストは、入力フィールドの初期値として入力欄に表示されます。
入力欄は、<textarea>には必須の属性であるrows属性とcols属性により高さと横幅を指定することができます。
ただし、この属性はフィールドの表示サイズの指定なので、入力ができる文字数や桁数は制限することはできません。
入力された情報はデータとしてサーバへ送信されます。
<address>とは
「ADDRESS」とは、その文書の連絡先や問い合わせ先を示すタグです。文書の末尾に1つだけ使用されることが多いですが、どこに何箇所使用しても構いません。<address>要素の内容としてはページ作者の名前、メールアドレス、住所、電話番号、ファックス番号、フォームへのリンクなどがあり、連絡を取るために必要な情報が配置されます。
なお、<address>タグで囲ったテキストは、Internet Explorerや Netscape Navigatorではイタリック体で表示されます。また、ブロックレベル要素として定義されていますので、ほとんどのブラウザでは囲ったテキストの前後に改行が入ります。
<comment>とは
同じコメントを行うタグとして、翌似たものに<!-- -->があります。「COMMENT」とは、HTMLソースの中にコメントを記述するためのタグです。<comment>タグで囲まれた部分はブラウザには表示されませんので、作者が見るための覚え書きや注釈、ソースコード内の目印、タグの無効化、一時的にコンテンツの一部をを非表示にしたい場合などに使用されます。Internet Explorerの独自機能のために、現在ではほとんど使用されず、ほとんどの場合は<!-- -->が利用されています。
<center>とは
「CENTER」とは、テキストや画像などのコンテンツを、水平方向の中央に表示する際に使用するタグです。
中央寄せにしたい場合、<center>タグで該当箇所を囲います。
なお、現在では<center>タグではなく、スタイルシートを使用することが推奨されています。
その場合には<div>タグなどを使用して<div style="text-align: center">~</div>と記述します。
<label>とは
「LABEL」とは、フォームの中でフォームの項目名と構成部品(チェックボックス、ラジオボタンなど)を関連付けるためのタグです。
関連付けを行うことにより、ブラウザでラベル(もしくはラベルのアクセスキー)をクリックした際に、その構成部品をクリックしたのと同じ動作が可能になります。
<label>タグの指定方法には2つあり、1つは<label>タグのfor属性の値と、フォーム部品のid属性の値を同じにすることで両者の関連付けができます。もう一つは、<label>~</label>内に部品とラベルを配置するという方法です。
ただし、この方法はInternet Explorer6以前のブラウザには対応していないので、できるだけ前者を用いた方がよいでしょう。