Of ChaichanPapa-World !

Home/Menu

ストリクトなHTMLの基礎講座

HTMLの基礎知識

◆ はじめに

ホームページ(ウェブページ或いはHTML文書)を作るためには、HTML(Hyper Text Markup Languge)の習得が必要です。ホームページ作成ツールで作成していても最終的にはHTMLの理解が必要です。と私は思います。

そして、HTMLとは、ひとことで言うと、文書構造を定義するマークアップ言語です。

しかし、HTMLの理解といっても、が独自要素を追加したり、当初スタイルシートの立ち遅れで、間違った認識が広まってしまいました。

それは、本来、文書構造を定義するSGMLのサブセットであるHTMLで、見栄えを記述することが、普通になってしまったのです。(しつこいようですが、HTMLは、見栄えではなく、文書構造を定義するマークアップ言語です。)

そこで、W3Cは、この悪習を追放すべくStrictDTD(厳格な文書型定義)を打ち出しました。そう、これからは、HTMLでの見栄えはやめて、HTMLは、あくまでも文書要素(構造)をマークアップし、見栄えは、スタイルシートで...。そして、アクセシブルな流れになっています。

ここでは、悪習であるストリクト以外の要素や物理マークアップ系の要素は除外した、HTMLの説明になります。

 ストリクトなHTMLについて
StrictDTD(厳格な文書型定義)に従ってタグ付けをするHTMLです。つまり、ブラウザ固有のタグなど一切使わず、StrictDTDに定義してあるタグを使い、正しくマークアップしましょう..ってことです。
 ストリクト以外の要素について
トランジショナル(Transitional 過渡的な)な要素で、スタイル規定系要素・属性を残した要素です。 これから、HTMLを勉強される方は、トランジショナルな要素は覚えないほうがいいです。代わりにスタイルシートをマスターしましょう!
 物理マークアップ系の要素について
UA(ブラウザ等)の表示に依存したマークアップをするための要素。つまり、意味的でなく単に表示的なマークアップをする要素です。これからは、表示的なものは、スタイルシートを使いましょう。
 タグと要素について
タグは単に要素の開始と終了を明示するための記号にしか過ぎません。しかし、要素はタグ(開始、終了)を含み、かつタグで挟んだ内容をすべてを含みます。

◆ HTML文書の骨組み

まず、はじめにテキストありき!

テキスト文書の明示されていない部分部分の意味を、ウェブ制作者がHTML仕様書に定められた記号で明示したものがHTML文書です。

ですので、HTML文書は、タグが主ではなく、あくまでもテキスト文書そのものが主で、文書構造をHTML仕様書に定められた要素に分類し、定められた記号でそれらをマークアップしたものです。

つまり、以下の「ホームページのひな型」も上記の結果としての定番です。
あくまでも、「文書構造をHTML仕様書に定められた要素に分類すること」が最重要です。

そして、要素としては、大きく分類すると以下の2つになります。

 インライン要素
文書内の行の一部として利用される要素。
 ブロックレベル要素
ブロックで表される要素(見出し、段落、リスト、フォーム等)。

また、HTMLは、ひとつのSGMLアプリケーションですので、文書型定義が必要です。
しかし、これは、すでにW3Cで定められていますので、ウェブ制作者が再度定義する必要はありません。

以上を整理すると以下のようになります。

このように、body要素には、直接インライン要素は置けないので、注意しましょう。

ホームページのひな型

ほとんどのHTML文書(ホームページ)は、次のような構造をしています。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>タイトル</title>
</head>
<body>
本文
</body>
</html>

HTML文書

まず、DOCTYPE宣言をします!

本講座で勉強されるタグ以外を使わなければ、<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">と、バッシと書いて下さい! だだし、勉強されるタグ以外を使った場合は、書かないでください...。

そして、<html>で始まって</html>で終わるこの書き方をHTML(Hyper Text Markup Language)と呼びます。HTMLのDTD(文書型定義)規則に従って書かれた文書をHTML文書(あるいはHTMLファイルHTMLソース)と呼びます。これらは、すべてテキストエディタで記述することができます。

言い訳

尚、本講座のDOCTYPE宣言は、StrictDTDでなく、すべて、TransitionalDTD(過渡的なDTD)になっています。 これは、広告バナーがTransitionalなiframe要素を使っているためです。いろいろとお察しください...。

エッチティエムエル(html)

<html>〜</html>を最上位要素、ルート要素またはhtml要素といいます。
DOCTYPE宣言の後にこの要素を配置して、その他のすべての要素はこの要素の中に配置します。

ヘッダ(head)

<head>〜</head>の部分をhead要素と呼びます。head要素にはタイトルなどを記述します。

タイトル(title)

<title>〜</title>の部分をtitle要素と呼びます。で〜に対応する所にタイトルを書きます。タイトルはブラウザのタイトルバーに表示されるだけではなく、「お気に入り」や「履歴」に表示されたり、検索エンジンの結果として表示されたりしますので、必ず記述するようにしましょう。とにかく、最重要要素と認識してください。

ボディ(body)

<body>〜</body>の部分をbody要素と呼びます。body要素には本文などを記述します。

本文

<body>〜</body>で〜に対応する所に本文を書きます。この部分がブラウザのウィンドウ枠に表示されます。

タグ

<html>や<head>などをタグ、htmlやheadなどをタグ名と呼びます。タグ名には header → <haed>、break → <br> など、英語のスペルを元にした名前が付けられています。

タグはほとんどの場合<p>〜</p>のように開始タグ終了タグで囲みます。開始タグのタグ名にスラッシュ(/)をつけたものが終了タグです。たまに、<br>のような単独タグもあります。

タグ名は大文字でも小文字でも構いませんが、必ず半角文字で記述してください。また、<の後に空白があってはなりません。

できれば、タグ名は小文字で記述することをお勧めします。(xhtmlの移行を考慮して...。)

        ○ <HTML>
      ○ <html>
      × <HTML>  ← 全角文字は駄目
      × < HTML>  ← <の後に空白を入れては駄目

開始と終了は、他の開始〜終了タグの完全に外側か、完全に内側に無くてはなりません。例えば、<del>〜<del>タグを記述する場合、次のようになります。

      ○ <del>〜<strong>〜</strong>〜</del> ← 完全に外側
      × <strong>〜<del>〜</strong>〜</del> ← 終了タグのみを挟んでいる

属性

<a href="http://〜〜">のa(アンカー)開始タグの hrefのように属性を伴うものがあります。属性名属性値 という形式で記述します。

      ○ <a href="http://〜〜">〜</a>
      ○ <input  type="checkbox" checked="checked">

属性名も大文字・小文字どちらでも構いませんが、必ず半角文字にしてください。属性名の前には必ず、ひとつ以上の半角スペースか、タブ文字か、改行をいれてください。

できれば、属性名は小文字で記述することをお勧めします。(xhtmlの移行を考慮して...。)

      ○ <a href="http://〜〜">〜</a>
      ○ <A HREF="http://〜〜">〜</A>

尚、属性の値に数字、アルファベット、ハイフン( - )、ピリオド( . )以外の文字を使用するときは、ダブルクォーテーション( " )またはシングルクォーテーション( ' )で囲む必要があります。

できれば、すべての属性の値は、ダブルクォーテーション又はシングルクォーテーションで囲むことをお勧めします。

ダブルクォーテーション( " )の中ではシングルクォーテーション( ' )を、シングルクォーテーション( ' )の中ではダブルクォーテーション( " )を用いることができます。

      ○ <input type="button" onclick="alert('XXX')">
      × <input type="button" onclick="alert("XXX")">

◆ マークアップの基本

まず、始めに、Web上に公開したいテキスト文書があったとします。
公開するということは、誰にでも読みやすく、わかりやすくしなければなりなせん。
ですので、文書をタイトル、大見出し、中見出し、小見出し、段落、箇条書き、オーダー付き箇条書き、引用、連絡先等の要素に分解し、構造化します。

そして、ホームページのひな型の中にいれ、構造化した文書の要素に対して、ふさわしいマークアップを行います。

以上な感じで、また文中に強調したい単語があったら strongタグ または emタグでマークアップします。

尚、この時点では、ブラウザ等の見栄えは気にしてはいけません。とにかく最後まで、本講座のHTML概説リファレンスにあるストリクト(strict)なタグのみでマークアップしてください。

すべてのマークアップが完了したら、つぎは、見栄えの設定です。これは、HTMLでなくスタイルシートで行います。スタイルなCSSの基礎講座を参照してください。

◆ マークアップの注意点

◆ おわりに

本講座では、W3Cで非推奨な要素・属性と非推奨でなくとも物理マークアップ系の要素は、説明致しません。しかし、ストリクトには、こだわりません。論理マークアップにこだわります。

なぜって、それは、Web上は不特定UA(ブラウザ)が対象だからです。物理マークアップだと特定UA(IE&ネスケ)になってしまいます。一人でも多くの人に見てもらいたい、ただそれだけです。

ですので、皆さんも論理マークアップいたしましょう! 本講座は、論理マークアップを応援します!
では最後に、大きな声で【ハイパーテキスト メークアップ!】いやマークアップだった...。(なんのこっちゃ〜)

Home/Menu/HTML概説リファレンス