HTML リファレンス

　HTML ( Hypertext Markup Language ・ハイパーテキスト・マークアップ・ランゲージ)とは、 web ページを制作するためのマークアップ言語です。

　HTML だけでは、テキスト、画像や動画といったコンテンツを羅列できるだけですが、web ページの制作はここからが始まりです。

　HTML は、インターネット上で公開された研究レポートを検索するために考案された SGML から発展したマークアップ言語です。
　文章を特定の意味をもったタグで囲むという手法によって、コンピュータが素早く検索できるように考案されました。そのため、何らかの意味をもつタグがHTMLには用意されています。

　文章のみならず、レポートの画像、表、一覧といった機能が加えられていき、web ページを広告として利用されるになって、レイアウトやデザインを重視するようになりました。
　今はデザインやレイアウトは CSS へと、内容の正誤の判断や計算、動きのある表現、ゲームのための JavaScript ・ Web API と機能を増やしながら、より充実した web ページ作成が可能になりました。

　HTML の基本的なことは HTML 入門を参照してください。

HTMLタグの用途別一覧

　HTMLタグについて用途別に紹介します。

基本エレメント

!DOCTYPE>、 <html>、 <head>、 <body>

ヘッダーエレメント

レイアウト

テキスト編集

基本テキスト編集: <p>、<br>、<h1-h6>、<hr>、<ruby>、リンク<a>、画像<img>
数式やプログラムコード: <code>、<del>、<ins>、<kbd>、<pre>、<samp>、<sub>、<sup>、<var>
引用、定義、出典: <abbr>、<address>、<blockquote>、<q>、<cite>、<dfn>

リンク

アンカー: <a>
クリッカブルマップ: <area>、 <map>

機能性タグ（リスト、表、エレメント内のウィンドウ、データ送受信、マルチメディア）

リスト: <ul>、<ol>、<dl>
表: <table>、 <tr>、<td>、 <th>、<colgroup>、 <col>、<caption>、<thead>、 <tbody>、<tfoot>
フレーム: <iframe>
データ（フォーム）の送信: <form>　 <input>、 <select>、 <textarea>、 <button>、 <fieldset>、<legend>、 <label>、 <datalist>、 <option>
マルチメディア: <img>、<picture>、<object>、<video>、<audio>
目盛り、工程表示: <meter>、<progress>

HTML属性

HTML属性
グローバルHTML属性
イベントハンドラー属性

その他

コメントアウト　<-- -->
特殊文字
ブロックレベルエレメントとインラインエレメント
Cookieについて
非推奨エレメントと属性
数値の書式について

基本エレメント

　HTMLソースファイルを作成するのに必要な基本的なエレメントです。

!DOCTYPE: HTMLの形式を宣言。以降の<html>テキストの編集形式を示します
html: 包括された内容がHTMLテキストであることを示します
head: ページのための情報
body: ページ内容を包括するエレメント。表示される内容

ヘッダーエレメント

　<head>内に編集するエレメントです。ページに必要な定義を行います。SEOを重視する商用サイト制作では必要なタグエレメントです。

title: ページタイトルを定義します
meta: ページに必要で表示はしないデータを定義します
link: ページの移動とスタイルシートの読み込みに使います
script,noscript: スクリプトを定義します
style: スタイルを直接記述するのに使います

レイアウト、任意タグ

　汎用タグエレメントで、CSSを利用した見た目を形成することや内容の領域分けに利用されています。
　しかし、必ずしも使わなければならないという訳ではありません。
　商用利用のサイト制作では憶えておいた方がよいタグエレメントです。

header: サイトタイトルを各ページに設けるエレメント
footer: サイトタイトルをフッターとして各ページに設けるエレメント
nav: ページのナビメニューエレメント
main: ページのメインコンテンツエレメント
aside: ページのサブコンテンツエレメント
article: 任意のブロックレベルエレメントで、内容が完結していることを示すエレメント。１ページに複数のコンテンツや内容を包括することができます。１ページで複数ページを表示するブログなどで見られます。
section: 任意のブロックレベルエレメントで、内容ごとに分ける際に使用します。
div: 任意のブロックレベルエレメント
span: 任意のインラインエレメント

テキスト編集

　テキスト編集のためのタグエレメントです。

基本テキスト編集

　テキストの編集で、基本的に必要と思われるタグエレメントです。

p: 段落
br: 改行
h1-h6: 見出し
hr: 横線
ruby: ふりがな、ルビ文字について
a: リンクの作成
img: 画像
picture: 表示幅によって画像を変更

数式、化学式やプログラムコードのエレメント

　数式、化学式やプログラムコードに関連するエレメントには以下があります。

エレメント名	概要
プログラム
code	プログラムコード例などに、インラインエレメント
kbd	キーボード入力例
pre	改行やスペースをソースそのままに表示、ブロックエレメント
samp	プログラムの出力例
数式、化学式
sub	下つき小文字
sup	上つき小文字
プログラム、数式
var	プログラムの引数や数式の変数
その他（記録用）
del	削除済み。関数や引数などの削除があったら
ins	追記。関数や引数などの追加があったら

引用、定義、出典

　引用、定義、出典に関連するエレメントには以下があります。

エレメント名	概要
abbr	略語に用いる
address	連絡先やメールアドレスだが、使わないことが多い
blockquote	引用に用いる。ブロックエレメント
q	引用に用いる。インラインエレメント
cite	出典、参照先があることを明示
dfn	定義された語句であることを明示

リンク

アンカー: <a>
クリッカブルマップ: 　画像内に領域ごとのハイパーリンク領域を設定するエレメントです。
<area>、 <map>

データ送受信、表などの機能性タグ

　リストや表、データ送受信などの機能をもったタグエレメントです。

表（TABLE）

table

表の作成

tr: 表の列エレメントを作成します。これによって列数が決まります。
td: 表のセル
th: 表データの項目名を明示
colgroup: 表の行エレメントをまとめて、スタイルやスクリプトに利用します。
col
caption: 表にキャプション（見出し、説明文）を追加
thead: 表の行にヘッダーを設定します。
tbody: 表にヘッダーまたはフッターを設定する際は必要になります。
tfoot: 表の行にフッターを設定します。

フレーム表示

iframe: ページ内に別のページが表示できます

データの送受信

form

サーバーとのデータ送受信

input: データ入力や送信ボタンに
select: 選択肢のあるデータ入力
textarea: 改行を含むテキスト入力
button: 送信ボタンなどの機能ボタン専用
fieldset: form内容を複数個に分かる場合に
legend: fieldsetのキャプション
label: データ入力部品に名前を付ける

マルチメディア

img: 画像を読み込みます
audio: 他のリソースを読み込みます
picture: 他のリソースを読み込みます
video: 他のリソースを読み込みます
object: 他のリソースを読み込みます

目盛り、工程表示

meter: 数値を目盛り、ゲージで表示できます
progress: 進捗状況を表示

HTML属性

HTMLグローバル属性

イベントハンドラー属性

その他

コメントアウト

特殊文字

ブロックレベルエレメントとインラインエレメント

非推奨タグエレメントとその属性

数値の書式について

Tips

　HTMLタグエレメントには、「開始タグ、終了タグとも省略できない」、「終了タグのみ省略できる」、「開始タグ、終了タグとも省略できる」の3種類があります。htmlエレメント・headエレメント・bodyエレメント・colgroupエレメント・tbodyエレメントは、開始タグ、終了タグともに省略できます。htmlエレメント・headエレメント・bodyエレメントの終了タグが省略してあるのはあまり見かけたことはないです。

注意点

以下の注意点があります。

・WHATWG(Web Hypertext Application Technology Working Group)などの機関によってHTMLの仕様が勧告されていますが、必ずしもその通りの説明であるという保証はありません。各自のブラウザでの動作を確認して下さい。

・HTMLテキストにページを性格付けるようなタグ、<HTML>、<HEAD>、<BODY>では定義すると記述します。

・<P>、<BR>といったHTMLテキストに改行やヘッダー、リンクを加えるようなタグには編集すると記述します。

・<BLOCKQUOTE>、<DEL>、<INS>などのような暗黙の内にテキストに意味を持たせるタグには明示すると記述します。

・HTMLテキストに機能を追加するようなタグ、<FORM>、<TABLE>、<MAP>、<OBJECT>では作成できますと記述します。

・このサイトの例は、javascriptによって実際に作成できるようにしています。

このページはwebページを開発しながら参照することを前提に作成していますので詳細な説明をしていない部分が多いです。