表示サンプル: このページの修正箇所は次のように表示されます。
HTML 及び XHTML
これは、次の達成基準に関連する実装方法である:
この実装方法の目的は、HTML及びXHTMLの見出しマークアップを用いて、コンテンツ構造を伝達することである。
単にテキストの外観を変えるために見出しマークアップを使うのは、コンテンツの構成をうまく伝達できないばかりか、見出しを構造の理解に用いる利用者や、見出しを使ったナビゲーションを用いる利用者を混乱させる恐れがある。逆に、テキストを太字にしたり、"class=heading"
と指定したりしたとしても、見た目が見出しのようになるだけで、支援技術はそのテキストを見出しとは認識できないだろう。
以下の事例では、h3
がh2
のサブセクションで、h2
がh1
のサブセクションとなっていて、見出しが階層的なレイアウトに用いられている。
コード例
<h1>Plant Foods that Humans Eat</h1>
<p>There are an abundant number of plants that humans eat...</p>
<h2>Fruit</h2>
<p> A fruit is a structure of a plant that contains its
seeds...</p>
<h3>Apple</h3>
<p>The apple is the pomaceous fruit of the apple tree...</p>
<h3>Orange</h3>
<p>The orange is a hybrid of ancient cultivated origin...</p>
<h3>Banana</h3>
<p>Banana is the common name for herbaceous plants ...</p>
<h2>Vegetables</h2>
<p>A vegetable is an edible plant or part of a plant other than a
sweet fruit ...</p>
<h3>Broccoli</h3>
<p>Broccoli is a plant of the mustard/cabbage family ... </p>
<h3>Brussels sprouts</h3>
<p>The Brussels sprout of the Brassicaceae family, is a Cultivar
group of wild cabbage ...</p>
<h3>Green beans</h3>
<p>Green beans have been bred for the fleshiness, flavor, or
sweetness of their pods...</p>
この事例では、3段組の真ん中にページのメインコンテンツがある。メインコンテンツは、ページ内で最初のコンテンツではないが、そのタイトルはページタイトルと同じで、h1
要素でマークアップされている。3段組のうち1番目と3番目のコンテンツは重要度が低いため、タイトルがh2
要素でマークアップされている。【訳注:見出しを適切にマークアップする方法は、H69: コンテンツの各セクションの開始位置に見出し要素を提供する及びG141: 見出しを用いてウェブページを構造化するを参照するとよい。】
注記:以下のコード例は、ウェブページの特定のセクションに対して用いるべき見出しレベルを規定するものではないことに留意することが重要である。レイアウトする際には、各カラムの最初に見出しを同じ見出しレベル(例えば、h1)で提示したり、またはコード例にあるようにメインコンテンツに関してその重要度を反映した見出しレベルで提示したりすることが可能である。
[追加ここまで]コード例:
<head>
<title>株式市場アップ・トゥデイ</title>
</head>
<body>
<!-- left nav -->
<div class="left-nav">
<h2>サイトナビゲーション</h2>
<!-- content here -->
</div>
<!-- main contents -->
<div class="main">
<h1>株式市場アップ・トゥデイ</h1>
<!-- article text here -->
</div>
<!-- right panel -->
<div class="left-nav">
<h2>関連リンク</h2>
<!-- content here -->
</div>
</body>
この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
コンテンツが見出しであるときに、見出しマークアップを利用している。
コンテンツが見出しでないときは、見出しマークアップを利用していない。
1.及び2.を満たしている。
注意: この実装方法が「達成基準を満たすことのできる実装方法」の一つである場合、このチェックポイントや判定基準を満たしていなければ、それはこの実装方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の実装方法によってその達成基準が満たされていることもありうる。
日本語訳における注記:
この文書の正式版は、W3Cサイトで公開されている英語の文書であり、この日本語訳には誤訳が含まれていることもありえます。なお、文中にある「日本語訳における注記」は、W3Cの原文にはないものであり、日本語訳監修者が追記したものです。