要素は、一般に以下のような形をしています。要素名がhtmlならば、html要素と呼びます。
<要素名>対象テキスト
</要素名>
要素名を「<」と「>」で囲んだものを開始タグ、「</」と「>」で囲んだものを終了タグといいます。要素によっては終了タグがなかったり省略しても良いものがあります。
開始ダグの中には、要素名の他に属性と呼ばれる情報を含むものもあります。属性は属性名と属性値を「"」で囲んだものを「=」でつないで書きます。属性を含む要素は以下のような形をしています。
<要素名 属性名1="属性値1" 属性名2="属性値2" … >対象テキスト
</要素名>
要素名と属性名は半角英数字で書きますが、大文字・小文字の区別はなく、どちらでも構いません。将来的にXHTMLへの移行することを考えて小文字で書くことを推奨します。
2つのタグの間で、開始タグと終了タグが交互になるようなものは許されていません。
× <タグA>対象テキスト
<タグB></タグA>対象テキスト
</タグB>
要素は、ブロック要素とインライン要素とその他の三種類に分けられます。
ブロック要素は、前後に改行を伴い、ウィンドウの両端までが範囲となります。インライン要素は、行内で範囲の指定を行うものです。
ブロック要素は中にブロック要素やインライン要素を含むことができますが、インライン要素は中にブロック要素を含むことができず、インライン要素のみ含むことができます。また、ブロック要素の中には、ブロック要素を含んではいけないものもあります。
W3Cから非推奨とされている要素があります。スタイルシートの使い方を覚えたら、非推奨の要素やフレームは使わないようにしましょう。
推奨 | 非推奨 | フレーム | |
ブロック要素 | address, blockquote, div, dl, form, h1〜h6, hr, ol, p, pre, table, ul, fieldset, noscript | dir, center, isindex, menu, xmp | |
インライン要素 | a, acronym, abbr, b, bdo, big, br, button, cite, code, del, dfn, em, img, i, input, ins, kbd, label, map, object, q, samp, script, select, small, strong, sub, sup, span, textarea, tt, var, iframe | basefont, font, s, strike, u | |
その他 | html, head, body, title, meta, li, dd, dt, thead, tfoot, tbody, tr, td, th, caption, colgroup, col, link, base, param, applet, area, option, optgroup, legend | plaintext | frameset, frame, noframes |
HTMLドキュメントは、DTD(Document Type Declaration)とhtml要素からなります。
DTDは、文書が基づいているルールを宣言します。省略しても構いません。3つのルールを紹介します。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
もっとも厳密なルールにそって作られるHTML文書です。非推奨要素や非推奨属性を使用することができません。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
非推奨要素や非推奨属性を使用することができますが、フレームに関する要素を使用することができません。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
非推奨要素や非推奨属性に加えてフレームに関する要素を使用することができます。
以下の2つの要素を含みます。詳しくは、HTMLリファレンス:構造を参照してください。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html><head> <title>○○○○のWebページ
</title></head> <body> <h1>これはサンプルページです。
</h1> </body></html>
HTMLドキュメントがブラウザで解析される際には、スペース、タブ、改行などは基本的に無視されます。 見やすいように適度に改行を入れるのが良いです。上記例では、<html>、<head>などが 一行に書かれていますが、開始タグと終了タグとの組み合わせがわかりやすいように、改行するのが良いでしょう。
HTMLは原則として開始タグと終了タグから構成されるので、タグに囲まれた部分を一つの要素として 考えることができます。上記例ではhtml要素の中にhead要素とbody要素が あることになります。一つ要素ごとにインデントして書くと構造がわかりやすくなります。
上記例をわかりやすいように整形してみます。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>○○○○のWebページ
</title> </head> <body> <h1>サンプルページ
</h1> <p>これはサンプルページです。
</p> </body> </html>
必ずしも全てをインデントする必要はありません。構造を理解しやすいよう、適宜インデントしましょう。
多くの要素で共通して使える属性を共通属性といいます。
id | 要素に固有の識別子をつけます。文書中唯一の識別名称になります。 |
---|---|
class | 要素を分類する識別子をつけます。複数の要素で共有できる名称になります。 |
title | 要素に関する補足となる情報を記述します。 |
style | スタイルシートによるスタイルを指定します。 |
dir | 要素のテキスト等の記述方向を指定します。 |
lang | 要素のテキスト等の基本言語を指定します。 |
Programming Laboratory (Shio seminar)