- Last Modified: 2009年3月11日 12:01
このページは、株式会社技術評論社より刊行されている実践 Web Standards Design に記載しているソースコードのサンプルを呈示しています。 書籍該当部分と照合しやすいように前後の解説文も掲載していますが、あくまで照合用のため、適宜前後を省いたり内容を省略したりしています。 書籍を読みながら実際にサンプルを表示する際の補助資料として活用してください。
また、 XHTML ソースと CSS ソース、関連画像を含めた全サンプルの ZIP アーカイブ (3,104,743 Bytes) もダウンロードできます。 （ ZIP アーカイブには解説文は含まれていません。）
解説
先ほどの例では、見出しを適切にマークアップし、本文を p 要素でマークアップしたために、人間がソースを読めば文書のアウトラインを得ることができます。 しかし、（一部の UA の機能でも同様にアウトライン表示をすることができますがそれは例外として） UA が (X)HTML を読み込む場合は、先ほどの例では h1 要素も h2 要素も h3 要素も p 要素も dl 要素も、すべて body 要素の直接の子要素としてしか認識されません。 これらの要素を、機械的に見ても構造化されているような状態にするにはどうしたらよいでしょうか。
XHTML
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<title>合同会社LH3 Studio － プレスリリース</title>
</head>
<body>
<h1>合同会社LH3 Studio</h1>
<div class="section">
<h2>プレスリリース</h2>
<div class="section">
<h3>2007-01-09 - 業務再開のお知らせ</h3>
<p>新オフィスにて業務を再開しました。新しいお問い合わせ先、および新オフィスへのアクセスは、<a href="info/map.html">マップページ</a>をご覧ください。</p>
</div>
<div class="section">
<h3>2007-01-06 - 移転作業のお知らせ</h3>
<p>本日より3日間、新オフィスでの業務開始へ向けて移転作業を行います。誠に勝手ながら、<em>6日から9日まではユーザサポート業務を中止させていただきます</em>のでご了承ください。なお、緊急の連絡は<a href="mailto:admin@lh3.jp">admin@lh3.jp</a>までお願いいたします。</p>
</div>
<div class="section">
<h3>2007-01-05 - 現オフィス業務終了のお知らせ</h3>
<p>本日21:00を持ちまして、現在のオフィスでの業務は全て終了させていただきました。6日から9日まで、移転作業を行う予定です。</p>
</div>
</div>
<dl>
<dt>お問い合わせ・ユーザサポート</dt>
<dd>東京都新宿区市谷左内町00-00 合同会社LH3 Studio</dd>
<dd><address>Tel ： 03-****-****</address></dd>
<dd><address>Fax ： 03-****-****</address></dd>
<dd><address>Mail ： <a href="mailto:info@lh3.jp">info@lh3.jp</a></address></dd>
</dl>
</body>
</html>
