May 17th,2015
＃
要素について
| カテゴリー | フロー・コンテンツ、ヘッディング・コンテンツ、パルパブル・コンテンツ |
| 利用場所 | “hgroup”要素の子要素として、もしくはヘッディング・コンテンツが置ける場所 |
| 内容 | フレージング・コンテンツ |
| タグの省略 | 不可 |
“h1”要素、“h2”要素、“h3”要素、“h4”要素、“h5”要素、“h6”要素はセクションの見出しを表す要素です。セクションは通常見出しを伴う文書内の章や節などを指します。
要素名の数字は見出しのランクを示していて、章や節などの文章の階層に合わせてランク付けしていきます。“h1”要素が最高で数字が大きくなるほどランクが下がり、“h6”要素が最低ランクです。数字が同じ見出しは同じランクとなります。
1個以上の見出しがある場合は少なくとも1個がランク“1”、つまり“h1”要素であるべきです。また、見出しのランクを飛ばすのは適切ではありません。
また、“h7”や“h8”など“h6”要素よりも低いランクは定義されておらず、一般的なブラウザでは認識されません。
“hgroup”要素で“h1”~“h6”要素と“p”要素をグループ化することで副題や別題を表すことができます。
“h1”~“h6”要素を使用するとアウトラインが生成されます。
サンプルコード
<article>
<header>
<h1>黄色いフルーツバナナ</h1>
<p>バナナについての解説。<p>
</header>
<section>
<h2>バナナの特徴</h2>
<p>
「バナナ」はバショウ科バショウ属の多年草及びその果実のことである。
</p>
<section>
<h3>バナナの木</h3>
<p>
バナナは「バナナの木」と呼ばれるように高さが数メートルまで成長するが草本に分類される。高く伸びる茎のような部分は葉鞘が幾重にも重なりあっているものであり、本当の茎は地中にある。
</p>
</section>
<section>
<h3>バナナの果実</h3>
<p>
バナナの果実は一般的には緑色、熟成したものは黄色であると思われがちだが、実は紫色や桃色のものなどいろいろなものがある。
</p>
</section>
</section>
<section>
<h2>バナナの産地</h2>
<p>
バナナの生産量の世界一はインドで、中国、フィリピン、エクアドル、ブラジルが続く。日本は124位であり、沖縄や奄美大島、鹿児島などで栽培されています。
</p>
</section>
<section>
<h2>バナナの保存方法</h2>
<p>
果肉の柔らかいバナナはテーブルなどに置いておくと接触した部分が黒ずみ、傷みやすくなるので房の根元を引っ掛けて吊るして、風通しの良い場所に常温で保存する。茶色い星が出た完熟バナナは冷やして保存する。
</p>
</section>
<section>
<h2>バナナの栄養素</h2>
<p>
ビタミンB群や、ビタミンCなどのビタミン、カリウム、マグネシウム、カルシウムなどのミネラル、食物繊維などがバランスよく含まれる。また1本(約100g)約86kcalと、ごはんやパンと比べて低カロリーである。
</p>
</section>
</article>
黄色いフルーツバナナ
バナナについての解説。
バナナの特徴
「バナナ」はバショウ科バショウ属の多年草及びその果実のことである。
バナナの木
バナナは「バナナの木」と呼ばれるように高さが数メートルまで成長するが草本に分類される。高く伸びる茎のような部分は葉鞘が幾重にも重なりあっているものであり、本当の茎は地中にある。
バナナの果実
バナナの果実は一般的には緑色、熟成したものは黄色であると思われがちだが、実は紫色や桃色のものなどいろいろなものがある。
バナナの産地
バナナの生産量の世界一はインドで、中国、フィリピン、エクアドル、ブラジルが続く。日本は124位であり、沖縄や奄美大島、鹿児島などで栽培されています。
バナナの保存方法
果肉の柔らかいバナナはテーブルなどに置いておくと接触した部分が黒ずみ、傷みやすくなるので房の根元を引っ掛けて吊るして、風通しの良い場所に常温で保存する。茶色い星が出た完熟バナナは冷やして保存する。
バナナの栄養素
ビタミンB群や、ビタミンCなどのビタミン、カリウム、マグネシウム、カルシウムなどのミネラル、食物繊維などがバランスよく含まれる。また1本(約100g)約86kcalと、ごはんやパンと比べて低カロリーである。
一般的なブラウザではランクが高い見出しほど大きい文字で、ランクが低い見出しほど小さい文字で表示されます。
アウトラインは“h1”~“h6”要素のみによって生成されるのでセクショニング・コンテンツの使用は必須ではありません。
<article>
<header>
<h1>果物の女王マンゴスチン</h1>
<p>マンゴスチンについての解説。<p>
</header>
<h2>マンゴスチンの特徴</h2>
<p>
「マンゴスチン」はフクギ科フクギ属の常緑高木及びその果実のことである。
</p>
<h3>マンゴスチンの木</h3>
<p>
マンゴスチンの木は7メートルから25メートル程度の直立する幹を持つ円形または円錐形の樹冠を形成する高木である。肉厚で淡桃色の花を咲かせる。
</p>
<h3>マンゴスチンの果実</h3>
<p>
マンゴスチンの果実は球形でやや硬い暗赤紫色の皮に包まれている。果肉部分は白色でミカンの房のような形をしている。
</p>
<h2>マンゴスチンの産地</h2>
<p>
マンゴスチンは主に東南アジアや南アジアで栽培され、タイが輸出国として有名である。各地に移入が試みられているが今のところ日本で栽培に成功した例はない。
</p>
<h2>果物の女王</h2>
<p>
マンゴスチンは柔らかい果肉に強い甘みと爽やかな酸味が合わさった上品な味わいが好まれ、「果物の女王」と呼ばれている。生食が一番美味であるが、劣化しやすく賞味期間は短い。
</p>
</article>
＃
＃
仕様書
“h1”~“h6”要素はHTML2.0から定義されている要素です。現行の仕様であるHTML Living Standardでも定義されています。
DOMインターフェース
[Exposed=Window]
interface HTMLHeadingElement : HTMLElement {
[HTMLConstructor] constructor();
// also has obsolete members
};
UAスタイルシート
@namespace url(http://www.w3.org/1999/xhtml);
h1,h2,h3,h4,h5,h6 {
unicode-bidi: isolate;
display: block;
}
h1 {
margin-block-start: 0.67em;
margin-block-end: 0.67em;
font-size: 2.00em;
font-weight: bold;
}
h2 {
margin-block-start: 0.83em;
margin-block-end: 0.83em;
font-size: 1.50em;
font-weight: bold;
}
h3 {
margin-block-start: 1.00em;
margin-block-end: 1.00em;
font-size: 1.17em;
font-weight: bold;
}
h4 {
margin-block-start: 1.33em;
margin-block-end: 1.33em;
font-size: 1.00em;
font-weight: bold;
}
h5 {
margin-block-start: 1.67em;
margin-block-end: 1.67em;
font-size: 0.83em;
font-weight: bold;
}
h6 {
margin-block-start: 2.33em;
margin-block-end: 2.33em;
font-size: 0.67em;
font-weight: bold;
}
:is(article, aside, nav, section) h1 {
margin-block-start: 0.83em;
margin-block-end: 0.83em;
font-size: 1.50em;
}
:is(article, aside, nav, section)
:is(article, aside, nav, section) h1 {
margin-block-start: 1.00em;
margin-block-end: 1.00em;
font-size: 1.17em;
}
:is(article, aside, nav, section)
:is(article, aside, nav, section)
:is(article, aside, nav, section) h1 {
margin-block-start: 1.33em;
margin-block-end: 1.33em;
font-size: 1.00em;
}
:is(article, aside, nav, section)
:is(article, aside, nav, section)
:is(article, aside, nav, section)
:is(article, aside, nav, section) h1 {
margin-block-start: 1.67em;
margin-block-end: 1.67em;
font-size: 0.83em;
}
:is(article, aside, nav, section)
:is(article, aside, nav, section)
:is(article, aside, nav, section)
:is(article, aside, nav, section)
:is(article, aside, nav, section) h1 {
margin-block-start: 2.33em;
margin-block-end: 2.33em;
font-size: 0.67em;
}
:is(article, aside, nav, section) hgroup > h1 ~ h2 {
margin-block-start: 1.00em;
margin-block-end: 1.00em;
font-size: 1.17em;
}
:is(article, aside, nav, section)
:is(article, aside, nav, section) hgroup > h1 ~ h2 {
margin-block-start: 1.33em;
margin-block-end: 1.33em;
font-size: 1.00em;
}
:is(article, aside, nav, section)
:is(article, aside, nav, section)
:is(article, aside, nav, section) hgroup > h1 ~ h2 {
margin-block-start: 1.67em;
margin-block-end: 1.67em;
font-size: 0.83em;
}
:is(article, aside, nav, section)
:is(article, aside, nav, section)
:is(article, aside, nav, section)
:is(article, aside, nav, section) hgroup > h1 ~ h2 {
margin-block-start: 2.33em;
margin-block-end: 2.33em;
font-size: 0.67em;
}
:is(article, aside, nav, section) hgroup > h1 ~ h3 {
margin-block-start: 1.33em;
margin-block-end: 1.33em;
font-size: 1.00em;
}
:is(article, aside, nav, section)
:is(article, aside, nav, section) hgroup > h1 ~ h3 {
margin-block-start: 1.67em;
margin-block-end: 1.67em;
font-size: 0.83em;
}
:is(article, aside, nav, section)
:is(article, aside, nav, section)
:is(article, aside, nav, section) hgroup > h1 ~ h3 {
margin-block-start: 2.33em;
margin-block-end: 2.33em;
font-size: 0.67em;
}
:is(article, aside, nav, section) hgroup > h1 ~ h4 {
margin-block-start: 1.67em;
margin-block-end: 1.67em;
font-size: 0.83em;
}
:is(article, aside, nav, section)
:is(article, aside, nav, section) hgroup > h1 ~ h4 {
margin-block-start: 2.33em;
margin-block-end: 2.33em;
font-size: 0.67em;
}
:is(article, aside, nav, section) hgroup > h1 ~ h5 {
margin-block-start: 2.33em;
margin-block-end: 2.33em;
font-size: 0.67em;
}
/* 文書の文字エンコーディングが ISO-8859-8 である場合 */
h1,h2,h3,h4,h5,h6 {
unicode-bidi: bidi-override;
}
