Wrong HTML - HTML文書の作り方

ブロック要素とインライン要素について

要素はブロック要素インライン要素に分けることができますが、このふたつの違いをはっきりと理解していないと正しいHTMLは書けないでしょう。

ブロック要素

見出しや段落など、それ自体が意味を持つ1ブロックの文章のことで、視覚系のユーザーエージェント(この場合WWWブラウザ、IEなど)ではブロック要素の前後には改行を入れて表示します。

ブロック要素にはインライン要素のみを含めることができるもの、ブロック要素のみ、両方を含めるものがあります。

インライン要素

ブロック要素の中に存在する文字の装飾などを行うもの、また単なるデータ(文字列)のこと。インライン要素は視覚系ユーザーエージェントで改行されません。

このインライン要素が集まってまとまったものがブロック要素であるため、インライン要素の中にブロック要素があるということはあり得ません。

文章の構造をマークアップする

HTMLは要素のひとつひとつをユーザーエージェントが解釈できるようにマークアップしていきます。この時見出しならh1〜h6(Heading)、段落ならp(Paragraph)というように要素に合わせた名前がつけられていて、これらを要素名と呼びます。また、マークアップするときは<>で要素名を囲んだタグを使用し、各要素を<要素名>(開始タグ)と</要素名>(終了タグ)で囲みます。

要素にスタイルを指定するときなどには属性を指定します。属性は要素名の次に半角スペースを入れ属性名="値"の形で記述します。

そして、タグは半角英数で書くこと、大文字小文字は関係ありません。また、ブロック要素は含むことのできないブロック要素がでてきた段階で終わりですので、その場合は終了タグを省略することができますが、次世代規格と言われているXHTMLでは要素名や属性は小文字で、終了タグは省略不可となっているため今のうちに癖をつけておくのもいいかもしれません。

では、実際に文章をマークアップしてみましょう。

見出しはhにつく数字がそのまま見出しレベルとなっているので、この場合1行目をh1で、2行目をh2でマークアップします。続いて段落はp要素で見出しレベル3はh3でマークアップしていきます。

<h1>HTML文書の作り方</h1>
<h2>ブロック要素とインライン要素について</h2>
<p>要素はブロック要素とインライン要素に分けることができますが、
このふたつの違いをはっきりと理解していないと正しいHTMLは書けないでしょう。</p>
<h3>ブロック要素</h3>
<p>見出しや段落など、それ自体が意味を持つ1ブロックの文章のことで、
視覚系のユーザーエージェント(この場合WWWブラウザ、IEなど)では、
ブロック要素の前後には改行を入れて表示します。</p>
<p>ブロック要素にはインライン要素のみを含めることができるもの、
ブロック要素のみ、両方を含めるものがあります。</p>

さて、本文はできあがりました。次は仕様書にもあるように、

  1. HTMLバージョン情報(DOCTYPE宣言)
  2. 宣言的ヘッダ情報(head要素)
  3. 実際のコンテンツを含む本体(body要素か、frameset要素)

を追加、またはマークアップしていきます。2と3はHTML要素の中にマークアップします。1のDOCTYPE(文書型)宣言は、HTMLはDTD(文書型定義)というもので、文法などの定義がされていて、その定義はバージョン毎に異なるので、どの定義に沿ってHTML文書を書いたのかを宣言するものです。

このサイトでは特に何も言わない限り、バージョン情報はHTML4.01Strictとしますが、その名前の通りStrict(厳格なもの)ですので、後で説明しますが場合によっては非推奨タグを含むTransitional(過渡的なもの)と、フレーム用のFramesetと適切に使い分けてください。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>HTML文書の作り方</title>
</head>
<body>
<h1>HTML文書の作り方</h1>
<h2>ブロック要素とインライン要素について</h2>
<p>要素はブロック要素とインライン要素に分けることができますが、
このふたつの違いをはっきりと理解していないと正しいHTMLは書けないでしょう。</p>
<h3>ブロック要素</h3>
<p>見出しや段落など、それ自体が意味を持つ1ブロックの文章のことで、
視覚系のユーザーエージェント(この場合WWWブラウザ、IEなど)では、
ブロック要素の前後には改行を入れて表示します。</p>
<p>ブロック要素にはインライン要素のみを含めることができるもの、
ブロック要素のみ、両方を含めるものがあります。</p>
</body>
</html>

1と2行目がHTMLバージョンの宣言です。head要素にtitle要素が含まれていますが、titleは省略できないものですので必ず書いてください。headが終わるとbody要素です。極稀にどういうわけかheadの中にbodyがあったりするようなHTML文書を見かけますが、headにbodyを含むことはできません(それを表示するWWWブラウザもどうかと思いますが・・・)。bodyが終わったらhtml要素の終了タグをお忘れなく。

LooseとFrameSet

Strictに対してLooseというものがあります。これはTransitionalとも言われ過渡的な、または移行型の文書ということで推奨しないとされているFontなどの視覚的な要素が含まれています。CSSへの移行にためらいがあったり、よくわからないというときにはLooseの宣言をしましょう。

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

また、フレームを使用するためにフレーム設定用のFramesetも用意されています。こちらはフレームを使うを参照してください。