chopporunga digital train

基本的なマークアップ

ナビゲーションへ

XHTML初めの一歩で紹介した例を詳しく説明します。

XML宣言とドキュメントタイプ宣言


<?xml version="1.0" encoding="Shift_JIS"?>

XML文書であることを示すXML宣言です。 XHTMLはXMLの一種なので、この宣言が必要です。 encodingで文字コードを指定します。 普通、Windowsの場合はShift_JIS、 UNIX系OSの場合はEUC-JPを使っているはずです。 文字コードがUTF-8、UTF-16の場合は、XML宣言は省略可能です。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN"
 "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">

文書がXHTML Basic1.0であることを示す、ドキュメントタイプ宣言です。 この記述は必ず書きます。


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">

html要素の開始タグです。この要素の内に、head要素、body要素を記述します。 xmlns属性は、名前空間を指定しています。 1つの文書内に、複数の言語(XHTMLとSVGなど)を記述した際に、 同じ名前の要素が出てきても区別できるようにするためのものです。 上記の記述は、html要素内での通常の名前空間を示しています。

xml:lang属性は言語を示しています。上記は日本語の場合です。

head要素

head要素には、様々な情報を記述します。


<meta http-equiv="content-Type" content="application/xhtml+xml; charset=Shift_JIS" />
<meta http-equiv="content-Style-Type" content="text/css" />
<meta name="author" content="s-youhei" />

meta要素は抽象的な情報を表します。 それぞれ、文書のMIMEタイプ、使用するスタイルシート、著者を示します。

MIMEタイプは、XHTMLの場合、application/xhtml+xmlと記述します。

スタイルシートは、XHTMLの見栄えを指定するもので、 普通はCSSを使います。


<title>XHTMLの例</title>

title要素は、文書のタイトルを示します。

link要素は、他の文書との関連を表します。 href属性で指定された文書をこの文書から見た関係をrel属性に示します。 stylesheetは、文書の見栄えを指定したファイルです。

rel属性には、他にもindexcontentsnextprevなどの値があります。

body要素

body要素には、画面などに出力される内容を記述します。


<h1 class="h">大見出し<h1>
<p>段落です。</p>
h1要素
見出しを示すブロックレベル要素です。 h2〜h6まであり、数字が小さいほどレベルの大きい見出しで、 文書内には、順番通りに登場させます。 h1の後に、h3がいきなり登場する…といったことはあり得ないはずです。
class属性は、要素を分類する際に使います。 必須ではありませんが、記述することをオススメします。
p要素
段落を示すブロックレベル要素です。

中見出し・小見出しを付ける場合は、下記のように記述します。


<h1 class="h">大見出し<h1>
<p>段落です。</p>
<div class="section">
	<h2 class="h">中見出し1<h2>
	<p>中見出し1に対する段落です。</p>
	<div class="section">
		<h3 class="h">小見出し1<h3>
		<p>小見出し1に対する段落です。</p>
	</div>
	<div class="section">
		<h3 class="h">小見出し2<h3>
		<p>小見出し2に対する段落です。</p>
	</div>
</div>
<div class="section">
	<h2 class="h">中見出し2<h2>
	<p>中見出し2に対する段落です。</p>
</div>
div要素
ブロックレベル要素を定義します。 class属性は、やはり必須ではありませんが、 sectionのように記述することにより、 何を意味するdiv要素なのか明確になります。

<div class="section">に記述することにより、 見出しがどこの見出しなのか明確になります。 また、XHTMLを操作するようなプログラムの開発が容易になるので、 この書き方を強くオススメします。 この例のように、様々なレベルの見出しを記述する場合は、 <div class="section">を入れ子にしましょう。

この書き方にしてくと、XHTML2.0への移行も容易です。

classの命名法

英数字で、attention(注意)、section(節)、abstract(要約)といった レイアウトとは関係のない、文章として意味のある名前をつけるようにしましょう。

redのようなレイアウトに依存するような名前を付けると、 スタイルの変更をしたい場合に面倒になるだけでなく、 文章構造のみを記述するXHTMLにレイアウトに依存した記述を入れることになります。

ラウンドナビゲーション

ページ情報

©2000- s-youhei

最終更新日2003年9月15日