HTML（エイチ・ティー・エム・エル）とは、HyperText Markup Language（ハイパーテキスト・マークアップ・ランゲージ）の略称です。
ハイパーテキストを記述するための言語ということになります。
ハイパーテキストとは、ホームページの基本的な特徴であるリンク（ハイパーリンク）を備えた文書（テキスト）のことです。文書のある部分から別の文書への関連性を表示して、なおかつその文書を引き出して参照することができます。
HTMLでは、サーバにある多くの文書がリンクによって結びつき、また検索結果として表示されるリンクによって関連性の高い文書やサービスにたどり着けるようになっています。
HTMLは文字データであるテキストで記述され、テキストファイルとして保存されます。このとき、拡張子を通常のテキストファイルと見分けるために「.html」や「.htm」とします。これをHTMLファイルと呼びます。
HTMLファイルには、テキストと共にタグ（要素）を記入することで文書の構造を表したり、文字を修飾したり、表を作ったり、写真を挿入することができます。HTMLファイルを専用のブラウザで開くことによって、多種多様なタグの効果を画面上に表現します。
タグの基本構造を見ながら、タグの記述方法を見ていきましょう。
タグはタグ名を「<」と「>」で挟んだものです。「<」は「小なり」、「>」は「大なり」という数学記号です。
下記「タグ名」とは仮の表記であり、実際のタグ名ではありませんので、事例として見てください。
<タグ名>
このようにタグは、テキスト文書の一部でしかありません。そのため、簡易なテキストエディタで記述することができます。
タグ名については、その目的に応じて多数の物があり、アルファベットで表記されます。
タグには２つのパターンがあります。
範囲を示すために始めの位置と終わの位置を示す場合と、挿入位置を示す場合です。
範囲を示してタグを使う場合、先に記述するタグを開始タグ、後に記述するタグを終了タグと呼びます。
開始タグから終了タグまでの間にあるテキストに意味を与えます。
例えば、リンクの範囲であったり、段落の範囲を表します。
<タグ名>テキスト部分</タグ名>
上記の例ではテキスト部分を挟むように開始タグと終了タグが記述されています。
終了タグには、タグ名の頭に「/」が付けられており、前後で同じタグ名があることで１つの組となっています。
では、実際に段落を表すタグを見てみましょう。
<p>画面に表示されるテキスト</p>
上記の<p>タグでは、１つの段落のテキスト範囲を示しています。このタグがあると、ブラウザ上ではテキストの前後で文章が改行され、段落が分かりやすく行間も１行空くようになっています。
上記のようにタグが見えるのは、HTMLのテキスト状態であり、これをソースと呼びます。
下記は表示例です。ブラウザではタグは見えなくなって機能を表します。
画面に表示されるテキスト
このようにブラウザでは上下に段落を分ける改行と空行が表されます。
次に、範囲のないタグの事例も見てみましょう。
文書を途中で改行するタグです。
画面に表示されるテキストを<br>途中で改行します。
<br>タグがあるとブラウザでは次のように表示されます。
画面に表示されるテキストを
途中で改行します。
<br>タグがあったその位置で改行が起こっています。
タグにはそれぞれの役割があるのですが、タグの種類によっては複雑な指示が必要になります。
例えば、リンクの場合、リンクの先がどこにあるのか示す必要があります。また、画像を表示したい場合、画像がどこにあるのか、画像の大きさはどうするのかという追加の指示が必要になるのです。
そのような補足事項が属性です。属性は属性名と属性値が一組になっています。例えば、画像の横幅を決めたいとき、横幅を表す属性名（width）と属性値（幅の数値）が必要になります。
属性はタグの「<」と「>」の中に、タグ名に続けて半角スペースを空けて記述します。また更に半角スペースを空けて複数の属性を記述することができます。
属性名を先に書き、「=」の後に「"」または「'」で両端を囲って属性値を記述します。終了タグ内に属性は書きません。
終了タグなし：<タグ名 属性名="属性値"> 終了タグあり：<タグ名 属性名="属性値">～</タグ名>
複数の属性：<タグ名 属性名="属性値" 属性名="属性値">～</タグ名>
では、実際にリンクをするときの例を見てみましょう。まずはソースです。
<a href="index.html">リンク</a>
タグ名は「a」で、これをアンカータグと呼びます。属性はリンク先を示し、属性名は「href」、属性値は「index.html」です。これにより、「index.html」にリンクしていることが分かるだけでなく、実際にリンクとして機能するとそのページに移動することができるのです。
これをブラウザで見ると次のようになります。
上記のリンクの上にマウスを動かすと、マウスカーソルが手の形になりリンクしていることが分かります。また、クリックすると前のページに戻るようにリンクしています。リンク先に移動した場合は、ブラウザの戻るボタンで戻ってきてください。
次に画像のタグの場合を見てみましょう。ソースは次のようになります。
<img src="filename.jpg" width="200" height="100">
タグ名は「img」で、イメージタグと呼びます。属性は３つあります。画像ファイルのファイル名（パス名を含む場合もあります）を示す属性が「src」、画像を表示する幅が「width」、画像を表示する高さが「height」です。
HTML文書では、タグを複数使います。タグの範囲の中に別のタグが入ることもあります。
その時に注意しなければいけないのが、正しい入れ子構造になっていることです。
開始タグと終了タグで範囲を示していますので、１つの範囲の中に別の範囲を示すことはできますが、はみ出すことはできません。
あるタグの内側（開始タグと終了タグの間）にあるタグは、必ずその中で開始タグと終了タグが揃ってなければいけないのです。
<p>正しく<a href="index.html">範囲を</a>示します</p>
正しく範囲を示します
上記の様子が入れ子になっている状態です。
<p>タグの中にリンクを示す<a>タグが入っており、適正に</p>より前で</a>が記述されています。
下記は正しく入れ子になっていません。
<p>正しく<a href="index.html">範囲を</p>示します</a>
正しく範囲を
示します
間違いがあってもブラウザはできるだけ正しく見せようとしてくれますが、表示の位置が崩れたり、文字が抜けたりする原因となります。
もちろん、開始タグと終了タグの数が合わない場合も不具合となりますので、必ず正しい範囲を確認しながら記述してください。
属性値では「"」や「'」の囲い文字が使われています。
この囲い文字はどちらを使ってもかまわないのですが、必ず両端に同じ文字を使いましょう。
また、囲い文字も入れ子になる場合がありますが、内側に使う囲い文字には同じ文字が使えません。同じ文字にしてしまうと、そこまでで範囲が終わりだと判断されるからです。
通常のタグの使い方で入れ子にはなりませんが、スクリプトと組み合わせるときに必要になります。
下記はタグの属性値内にスクリプトを使っている場合です。
<a href="javascript:click('abc')">abc</a>
下記はスクリプト内で、タグを出力する場合です。
document.write("<img src='filename.jpg'>");
どちらの場合にしても、全て同じ囲い文字だったら範囲の位置が変わってしまいます。二つ目の囲い文字がある位置が終わりの位置になってしまうからです。
HTMLには、まず基本的な構造となるタグが３つあります。
HTMLファイルであることを明示する<html>タグ。
文書の内部情報を記録する<head>タグ。
文書の表示内容を記載する<body>タグ。
<html> <head> （文書の内部情報）
</head> <body>
（文書の表示内容）
</body>
</html>
最低限、この３つのタグがHTMLファイルに必要です。
<html>タグは全体を囲んで、これがHTMLファイルであることを明示しています。
<head>タグ内には、直接画面に表示する内容ではなく、ブラウザが内部で処理をするのに必要な情報を記述します。
<body>タグ内には、ブラウザの画面にページとして表示したい内容を記述します。これをコンテンツと呼びます。
厳格なHTMLの規格（ルール）では、<HTML>タグの前に規格の種類を表すDTDという記述も必要になりますが、これは最後に置いておきます。
<head>には２つの重要な情報を記述します。
１つはテキストのエンコード方式、もう１つはタイトルです。
テキストエンコードは非常に重要です。世界には多くの言語がありますが、それぞれの地域で異なる文字コード体系が利用されてきました。また、日本国内だけでも、その成り立ちから複数の文字コードが存在します。
テキストファイルを作成するとき、自動的に決められていたり、任意に選択して保存することで文字コードが決定されます。このテキストファイルを読み取って、文字コードを適用して文字を表示させるのがエンコードです。
ブラウザは、HTMLファイルを読み込んだときに自動的にエンコードを判別します。そして、その判別に間違ったり判別できない場合に文字化けという現象が起こります。文字化けが起こると、テキストを正しく読むことができません。これは、コンピュータが
日本語のエンコードの種類だけでもJISコード、シフトJISコード、EUCなどがあります。また、世界各国の文字を１つの規格にまとめたものがUNICODEで、その中にUFT-8など複数の規格があります。
Windowsのメモ帳では、標準のANSIで保存するとShift-JISコードで保存されます。文字コードを切り替えてUTF-8にすることもできます。
文字コードが複数あるため、文字化けを防ぐために<meta>タグを使ってエンコードの種類をHTMLファイルに記述しておきます。こうしておけば、ブラウザは自己判断をせず、記述通りのエンコードを実行します。ただし、この記述が間違っている場合、当然文字化けが発生します。
<meta>タグには終了タグはありません。
下記はShift-JISコードの場合です。
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
下記はUTF-8の場合です。
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
この他、<meta>タグでは検索用のキーワードや、作成者の情報など記述することができます。
タイトルはブラウザのウインドウやタグに表記されるページの名称です。
記述には<title>タグを使います
<title>タイトル名</title>
上記の他に重要なタグとしてCSSを記述するための<style>タグがあります。また、CSSを外部のファイルから読み込む場合には<link>タグを使用します。
<style type="text/css">
/* CSSの設定 */
</style>
<link href="filename.css" rel="stylesheet" type="text/css">
<body>タグ内には、WEBページとして見せる内容を記述します。それがコンテンツです。
コンテンツには文章だけでなく、画像も含まれます。またそれらをデザインするためにも様々なタグが使用されます。これら<body>内で使用するタグは目的に応じて多数ありますので、その効果や意味を覚えて使い分ける必要があります。
<body>タグ自身にも複数の属性が用意されています。テキストの色、背景の色、背景の画像、リンクの色などです。
<body text="#000000" bgcolor="#ffffff" background="image.gif" link="#ff0000"></body>
近年はCSSを使うように規格が改まっていますので、その場合は<body>タグの中に上記のような属性は記入せず、<style>タグ内に記述します。
<style type="text/css">
body {
color: #000;
background-color: #fff;
background-image: url(image.gif);
}
a {
color: #f00;
}
</style>
<body>
1行目にDTDを宣言します。細かなバージョンによってDTDの記述に違いがあります。下記はHTML4.0.1のものです。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>タイトル名</title> </head> <body> （文書の表示内容） </body> </html>
参照：Wikipedia - HyperText Markup Language
HTML5は、2014年から正式規格となる予定です。
DTDやエンコードの記述が簡便化されています。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>タイトル名</title>
</head>
<body>
（文書の表示内容）
</body>
</html>
XHTMLは、XMLファイルを扱えるようにしたHTMLの規格です。
XMLのルールに基づいてたタグ表記になっており、終了タグのない場合にタグの最後に「/」を入れなければなりません。
ここでは、記述方法の似た別の規格もあるという程度で覚えておくと良いでしょう。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>タイトル名</title>
<link href="../basic.css" rel="stylesheet" type="text/css" />
</head>
<body>
（文書の表示内容）
</body>
</html>