HTML文書の基本構造を下記に示します。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>タイトル</title>
</head>
<body>
本文
</body>
</html>
HTML文書の最初の1行目にはドキュメントタイプ <!DOCTYPE ～> を記述します。<!DOCTYPE html> は、この文書が HTML の書式に従って記述されていることを示します。
<html> で始まり </html> で終わるこの書き方を HTML（Hyper-Text Markup Language）と呼びます。
<head>～</head> の部分を ヘッダ部 と呼びます。ヘッダ部にはタイトルなどを記述します。
<title>～</title> で タイトル を書きます。タイトルはブラウザのタイトルバーに表示されるだけではなく、「お気に入り」や「履歴」に表示されたり、検索エンジンの結果として表示されます。
<body>～</body> の部分が 本文 です。この部分がブラウザの表示領域に表示されます。
<html> や <head> などを タグ、html や head などを タグ名 と呼びます。タグ名にはヘッダ(header)→ <head>、改行(break) → <br> など、英語のスペルを元にした名前が付けられています。
多くのタグは <body>～</body> のように 開始タグ と 終了タグ で囲みます。開始タグのタグ名にスラッシュ(/) をつけたものが終了タグです。たまに、<br> のように、終了タグを持たないものもあります。
タグ名は大文字でも小文字でも構いませんが、必ず半角文字で記述してください。以前は大文字で記述することが多かったですが、最近では小文字で記述することが多くなっています。< の後に空白があってはなりません。
○ <html> ○ <HTML> × ＜ｈｔｍｌ＞ ← 全角文字は駄目 × < html> ← <の後に空白を入れては駄目
<html>～</html> を html要素、<head>～</head> を head要素、<body>～</body> を body要素と呼びます。言い換えると、要素(element) の開始と終了を示すのが タグ です。
開始タグ～終了タグは、他の開始タグ～終了タグの完全に外側か、完全に内側でなくてはなりません。例えば、<b>～</b> の箇所に <s>～</s> を記述する場合、次のようになります。
○ <s>～<b>～</b>～</s> ← 完全に外側なのでOK ○ <b>～<s>～</s>～</b> ← 完全に内側なのでOK × <b>～<s>～</b>～</s> ← 包含関係が崩れているのでNG
タグには <ul type="disc"> の type="disc" のように 属性 を伴うものがあります。属性は多くの場合 属性名＝属性値 という形式で記述します。たまに 属性名 だけ指定すればよい場合もあります。（正確には、checked=checked の属性名が省略されているそうなのですが・・・）
○ <ul type="disc">～</ul> ○ <input type="checkbox" checked>
属性名も大文字・小文字どちらでも構いませんが、必ず半角文字にしてください。属性名の前には必ず、ひとつ以上の半角スペースか、タブ文字か、改行が必要です。属性を複数指定することも可能です。
○ <input type="text"> ○ <input TYPE="text"> ○ <input type="text" size="7">
属性値も多くの場合大文字・小文字どちらでも構いませんが、まれに大文字・小文字を区別する場合（target="_top"など）があります。
○ <input type="text"> ○ <input type="TEXT"> × <a href="xx.html" target="_TOP">～</a>
属性値に、空白文字、小なり記号(<)、大なり記号(>)、クォーテーション(')、ダブルクォーテーション(")、バッククォート(`)、イコール(=)を含む場合は、属性値を "..." か '...' で囲む必要があります。どの記号を囲む必要があるか覚えられない場合は、「記号はクォーテーションで囲む」もしくは「属性値は常にクォーテーションで囲む」と覚えておいた方が無難でしょう。
○ <input value=abc> ← 特定記号を含んでいないのでOK × <input value=hello, world> ← 空白文字を含んでいるのでNG ○ <input value="hello, world"> ← "..." で囲んだのでOK × <input value=o'clock> ← 特定記号を含んでいるのでNG ○ <input value="o'clock"> ← "..." で囲んだのでOK
ダブルクォーテーション(")の中ではシングルクォーテーション(')を、シングルクォーテーション(')の中ではダブルクォーテーション(")を用いることができます。
○ <input type=button onclick="alert('XXX')">
○ <input type=button onclick='alert("XXX")'>
× <input type=button onclick="alert("XXX")"> ← "..." の中に " は記述できないのでNG
ダブルクォーテーション(")の中でダブルクォーテーション(")、シングルクォーテーション(')の中でシングルクォーテーション(')を使用するには、ダブルクォーテーション(")を " または "、シングルクォーテーション(')を ' と表記します。
○ <input type=button onclick="alert("XXX")">