HTMLの基礎

要素

要素は、一般に以下のような形をしています。要素名がhtmlならば、html要素と呼びます。

<要素名>対象テキスト</要素名>

要素名を「<」と「>」で囲んだものを開始タグ、「</」と「>」で囲んだものを終了タグといいます。要素によっては終了タグがなかったり省略しても良いものがあります。

開始ダグの中には、要素名の他に属性と呼ばれる情報を含むものもあります。属性は属性名と属性値を「"」で囲んだものを「=」でつないで書きます。属性を含む要素は以下のような形をしています。

<要素名 属性名1="属性値1" 属性名2="属性値2" … >対象テキスト</要素名>

要素名と属性名は半角英数字で書きますが、大文字・小文字の区別はなく、どちらでも構いません。将来的にXHTMLへの移行することを考えて小文字で書くことを推奨します。

2つのタグの間で、開始タグと終了タグが交互になるようなものは許されていません。

例 禁止されているHTMLタグの例

× <タグ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ドキュメントの構造

HTMLドキュメントは、DTD(Document Type Declaration)とhtml要素からなります。

DTD(Document Type Declaration)

DTDは、文書が基づいているルールを宣言します。省略しても構いません。3つのルールを紹介します。

HTML 4.01 厳密型DTD (非推奨要素・属性、フレームを含まない)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

もっとも厳密なルールにそって作られるHTML文書です。非推奨要素や非推奨属性を使用することができません。

HTML 4.01 移行型DTD (非推奨要素・属性を含む)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

非推奨要素や非推奨属性を使用することができますが、フレームに関する要素を使用することができません。

HTML 4.01 フレーム型DTD (非推奨要素・属性、フレームを含む)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

非推奨要素や非推奨属性に加えてフレームに関する要素を使用することができます。

html要素

以下の2つの要素を含みます。詳しくは、HTMLリファレンス:構造を参照してください。

  • ヘッダ部分(head要素):文書に関連する情報
  • ボディ部分(body要素またはframeset要素):文書本体

HTMLドキュメントの作成

  1. テキストエディタを起動します。
    • Windows標準のメモ帳を使用する場合には、「スタート」メニュー→「プログラム」→「アクセサリ」→「メモ帳」でメモ帳を起動します。
    • フリーソフトの「NoEditor」の使用をお勧めします。
  2. 以下を入力してください。
  3. <!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>
    
  4. 「ファイル」メニューで「名前をつけて保存」を選択します。
  5. マイドキュメントなどの保存する場所を指定します。
  6. 保存するテキストの種類を「すべてのファイル」に指定します。
  7. ファイル名の拡張子を.htm(例えば index.htmなど)にして「保存」ボタンを押します。
  8. 4.で指定したフォルダを開き、保存したHTMLファイルをダブルクリックしてブラウザで開いて確認します。

HTMLドキュメントの整形

HTMLドキュメントがブラウザで解析される際には、スペース、タブ、改行などは基本的に無視されます。 見やすいように適度に改行を入れるのが良いです。上記例では、<html><head>などが 一行に書かれていますが、開始タグと終了タグとの組み合わせがわかりやすいように、改行するのが良いでしょう。

HTMLは原則として開始タグと終了タグから構成されるので、タグに囲まれた部分を一つの要素として 考えることができます。上記例ではhtml要素の中にhead要素body要素が あることになります。一つ要素ごとにインデントして書くと構造がわかりやすくなります。

例 HTMLドキュメントの整形

上記例をわかりやすいように整形してみます。

<!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要素のテキスト等の基本言語を指定します。