HTML文書の基本構造を下記に示します。
<!DOCTYPE html> <html> <head> <title>タイトル</title> </head> <body> 本文 </body> </html>
HTML文書の最初の1行目にはドキュメントタイプ <!DOCTYPE ~> を記述します。<!DOCTYPE html> は、この文書が HTML5 の書式に従って記述されていることを示します。
<html> で始まり </html> で終わるこの書き方を HTML(Hyper-Text Markup Language)と呼びます。
<head>~</head> の部分を ヘッダ部 と呼びます。ヘッダ部にはタイトルなどを記述します。
<title>~</title> で タイトル を書きます。タイトルはブラウザのタイトルバーに表示されるだけではなく、「お気に入り」や「履歴」に表示されたり、検索エンジンの結果として表示されます。
<body>~</body> の部分が 本文 です。この部分がブラウザの表示領域に表示されます。
<html> や <head> などを タグ、html や head などを タグ名 と呼びます。タグ名にはヘッダ(header)→ <head>、改行(break)→ <br> など、英語のスペルを元にした名前が付けられています。
多くのタグは <body>~</body> のように 開始タグ と 終了タグ で囲みます。開始タグのタグ名にスラッシュ(/)をつけたものが終了タグです。たまに、<br> のように、終了タグを持たないものもあります。XHTML では終了タグを持たないものを <br /> の様に記述しますが、HTML では <br> と記述します。
タグ名は大文字でも小文字でも構いませんが、必ず半角文字で記述してください。以前は大文字で記述することが多かったですが、最近では小文字で記述することが多くなっています。< の後に空白があってはなりません。
○ <html> ○ <HTML> × <html> ← 全角文字は駄目 × < html> ← <の後に空白を入れては駄目
開始タグ~終了タグは、他の開始タグ~終了タグの完全に外側か、完全に内側でなくてはなりません。例えば、<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")">