HTML
文章構造を示す
h1〜h6要素(見出し)
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
HTML文章の見出し(heading)を示す。h1が最も重要な見出し(大見出し)であり、h2、h3と数字が増えるに従って細かい見出し(中見出し、小見出し)に使用される。h1の次にh4を使うなど数字をとばして使用するのではなく、h1から順番に使用していく。
必ずしも、h1〜h6要素までを全て使用せずとも良く、文章に相応しい利用がされていれば良い。
p要素(段落)
<p></p>
段落(パラグラフ:paragraph)を示す。
body要素内の文章の多くがp要素の内容となる。開始タグ<p>が段落の先頭であり、終了タグ</p>が段落の終わりなので、文章の意味的に相応しいまとまりごとに<p></p>でタグ付けをしていく。
文章の構造に相応しくタグ付けする
例えば以下のような文章があるとする。
季節の野菜
四季の恵みを受けた野菜は、旬が最も美味しく、多くの栄養を含んでいます。ここでは、四季の野菜とその代表的な料理を紹介します。
春
春の野菜は、春の暖かな日差しを浴びてみずみずしく育ちます。春の訪れを実感させてくれる代表的な野菜は、次の三つです。
グリーンアスパラガス
たけのこ
春キャベツ
夏
夏の野菜は、太陽の光をたっぷり浴びて育ちます。夏の緑黄色野菜は、夏バテ防止にも効果的です。代表的な野菜は、次の三つです。
トマト
なす
ピーマン
秋
秋の野菜は、収穫の秋といわれるほど様々な野菜が豊かに実ります。旬の味を楽しませてくれる代表的な野菜は、次の三つです。
ごぼう
じゃがいも
れんこん
冬
冬の野菜は、寒さの厳しい大地で育つと、栄養を蓄えて甘みが強くなります。身体を温めてくれる冬の代表的な野菜は、次の三つです。
白菜
大根
ほうれんそう
その場合、相応しいタグ付けの一例として、以下のように考えることができる。
<h1>季節の野菜</h1>
<p>四季の恵みを受けた旬の野菜は、最も美味しく、多くの栄養を含んでいます。ここでは、四季の野菜とその代表的な料理を紹介します。</p>
<h2>春</h2>
<p>春の野菜は、春の暖かな日差しを浴びてみずみずしく育ちます。春の訪れを実感させてくれる代表的な野菜は、次の三つです。</p>
<ul>
<li>グリーンアスパラガス</li>
<li>たけのこ</li>
<li>春キャベツ</li>
</ul>
<h2>夏</h2>
<p>夏の野菜は、太陽の光をたっぷり浴びて育ちます。夏の緑黄色野菜は、夏バテ防止にも効果的です。次の三つの野菜が代表的です。</p>
<ul>
<li>トマト</li>
<li>なす</li>
<li>ピーマン</li>
</ul>
<h2>秋</h2>
<p>秋の野菜は、収穫の秋といわれるほど様々な野菜が豊かに実ります。旬の味を楽しませてくれる代表的な野菜は、次の三つです。</p>
<ul>
<li>ごぼう</li>
<li>じゃがいも</li>
<li>れんこん</li>
</ul>
<h2>冬</h2>
<p>冬の野菜は、寒さの厳しい大地で育つと、栄養を蓄えて甘みが強くなります。身体を温めてくれる冬の代表的な野菜は、次の三つです。</p>
<ul>
<li>白菜</li>
<li>大根</li>
<li>ほうれんそう</li>
</ul>
間違ったタグの使用例
1
<h1>季節の野菜</h1>
<p>四季の恵みを受けた旬の野菜は、最も美味しく、多くの栄養を含んでいます。ここでは、四季の野菜とその代表的な料理を紹介します。</p>
<h2>春</h2>
<p>春の野菜は、春の暖かな日差しを浴びてみずみずしく育ちます。春の訪れを実感させてくれる代表的な野菜は、次の三つです。</p>
<ul>
<li>グリーンアスパラガス</li>
<li>たけのこ</li>
<li>春キャベツ</li>
</ul>
<h3>夏</h3>
<p>夏の野菜は、太陽の光をたっぷり浴びて育ちます。夏の緑黄色野菜は、夏バテ防止にも効果的です。次の三つの野菜が代表的です。</p>
<ul>
<li>トマト</li>
<li>なす</li>
<li>ピーマン</li>
</ul>
<h4>秋</h4>
<p>秋の野菜は、収穫の秋といわれるほど様々な野菜が豊かに実ります。旬の味を楽しませてくれる代表的な野菜は、次の三つです。</p>
<ul>
<li>ごぼう</li>
<li>じゃがいも</li>
<li>れんこん</li>
</ul>
<h5>冬</h5>
<p>冬の野菜は、寒さの厳しい大地で育つと、栄養を蓄えて甘みが強くなります。身体を温めてくれる冬の代表的な野菜は、次の三つです。</p>
<ul>
<li>白菜</li>
<li>大根</li>
<li>ほうれんそう</li>
</ul>
文章の始めから(上から)順に、h1〜h6要素とするのではない。あくまでも見出しの意味的なレベルに合せ(見出しの意味的な大きさに相応しく)h1〜h6要素を利用する。
2
<h5>季節の野菜</h5>
<h2>四季の恵みを受けた旬の野菜は、最も美味しく、多くの栄養を含んでいます。ここでは、四季の野菜とその代表的な料理を紹介します。</h2>
<h1>春</h1>
<p>春の野菜は、春の暖かな日差しを浴びてみずみずしく育ちます。春の訪れを実感させてくれる代表的な野菜は、次の三つです。</p>
<ul>
<li>グリーンアスパラガス</li>
<li>たけのこ</li>
<li>春キャベツ</li>
</ul>
<h1>夏</h1>
<p>夏の野菜は、太陽の光をたっぷり浴びて育ちます。夏の緑黄色野菜は、夏バテ防止にも効果的です。次の三つの野菜が代表的です。</p>
<ul>
<li>トマト</li>
<li>なす</li>
<li>ピーマン</li>
</ul>
<h1>秋</h1>
<p>秋の野菜は、収穫の秋といわれるほど様々な野菜が豊かに実ります。旬の味を楽しませてくれる代表的な野菜は、次の三つです。</p>
<ul>
<li>ごぼう</li>
<li>じゃがいも</li>
<li>れんこん</li>
</ul>
<h1>冬</h1>
<p>冬の野菜は、寒さの厳しい大地で育つと、栄養を蓄えて甘みが強くなります。身体を温めてくれる冬の代表的な野菜は、次の三つです。</p>
<ul>
<li>白菜</li>
<li>大根</li>
<li>ほうれんそう</li>
</ul>
見出しの意味的な大きさと、使用されているタグがあっていない。また意味的な大きさの順番でタグが使用されていない。
HTMLでは文字のサイズなどを指定できないため、タグ付けの段階では見た目は全く気にせず、文書構造を的確に表現するようにタグを付けていく(文字のサイズなどの変更はCSSで可能である)。