タグに関する基礎知識

トップ > Webページ作成入門 > タグに関する基礎知識

目次

HTML文書のひな型

HTML文書の基本構造を下記に示します。

test.html
<!DOCTYPE html>
<html>
  <head>
    <title>タイトル</title>
  </head>
  <body>
    本文
  </body>
</html>

ドキュメントタイプ

HTML文書の最初の1行目にはドキュメントタイプ <!DOCTYPE ~> を記述します。<!DOCTYPE html> は、この文書が HTML5 の書式に従って記述されていることを示します。

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> のように、終了タグを持たないものもあります。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

ダブルクォーテーション(")の中でダブルクォーテーション(")、シングルクォーテーション(')の中でシングルクォーテーション(')を使用するには、ダブルクォーテーション(")を &quot; または &#34;、シングルクォーテーション(')を &#39; と表記します。

○ <input type=button onclick="alert(&quot;XXX&quot;)">

Copyright (C) 1997-2016 杜甫々
初版:1997年3月30日、最終更新:2016年5月1日
http://www.tohoho-web.com/wwwbeg2.htm