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で可能である)。

ページの先頭へ↑