WebBox norijin note
WebBox norijin
Category: スポンサー広告  

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

TOP > スポンサー広告 > HTML5入門:セクションとアウトライン!!基礎知識最終編!!

Category: HTML5   Tags: HTML5  セクション  アウトライン  

HTML5入門:セクションとアウトライン!!基礎知識最終編!!

HTML5入門:セクションとアウトライン!!基礎知識最終編!!

HTML5入門:セクションアウトライン!!基礎知識最終編 として、今日は「セクションアウトライン」について勉強していきます。一緒に学んでいきましょう...

HTML5セクションアウトライン



 HTML5では、文章構造をより明確にするために「セクション」と「アウトライン」という概念が用いられています。


HTML5入門:セクションとアウトラインセクション

 セクションとは、章や節、項のように、見出しとそれに関する内容で形成されたひとまとまりの領域を指します。これまで使われてきたHTMLやXHTMLでは、セクションの領域は見出しであるh1~h6要素を手がかりに推測するしかなく、他に明らかに示す手段がありませんでした。また、領域の区切りを「div id="navi"」「div class="article"」のようにdiv要素で表すことも多かったため、構造のわかりづらい文章になりがちでした。


HTML5入門:セクションとアウトライン明示的なセクションと暗黙的なセクション

 HTML5では、こうした問題を改善するために、セクションを表す要素が新たに定義されていました。セクショニング・コンテンツに分類されるsection,nav,article,asideの4つの要素が、それにあたります。これらの要素を使うことで、明示的にセクションを表せるようになります。

 しかし必ずこれらの要素を使って明示的にセクションを表さなければいけないわけではありません。見出しタグであるh1~h6要素が現れると暗黙的にセクションであるとみなされるため、従来のようにh1~h6要素でセクションを表すこともできます。その場合は、そのあとん続く見出しのレベルによって、次のようにせきション構成が変化します。

 ・レベルが同じか、高い見出しが続く場合 : 暗黙的に新しいセクションが開始される
 ・低いレベルの見出しが続く場合 : 1つ前のセクションに含まれる、サブセクションが開始される

 HTML5の仕様書では、各見出しごとにセクショニング・コンテンツに含まれる要素を使って明示的にセクションを示す方法が推奨されています。


HTML5入門:セクションとアウトラインアウトライン

 このようにHTML5ではセクション同士の階層関係が厳密に定義されています。セクションや見出しから判別されるコンテンツの階層構造を「アウトライン」といいます。次の例は従来のようにh1~h6要素だけで暗黙的にセクションを表した例です。
<body>
<h1>HTML5について</h1>
<p>HTML5とは</p>
<h2>要素</h2>
<p>要素とは</p>
<h3>要素の分類</h3>
<p>要素を分類すると</p>
<h2>属性</h2>
<p>属性とは</p>
</body>

 同じ例を使って明示的にセクションを表した場合も、アウトラインは同じになります。
<body>
<h1>HTML5について</h1>
<p>HTML5とは</p>
<section>
  <h2>要素</h2>
  <p>要素とは</p>
  <section>
    <h3>要素の分類</h3>
    <p>要素を分類すると</p>
  </section> 
</section>
<section>
  <h2>属性</h2>
  <p>属性とは</p>
</section>
</body>

HTML5入門:セクションとアウトラインセクションと見出し

 セクションとアウトラインという、コンテンツの階層構造を判別する手がかりが用意されたため、セクションの中にh1~h6の見出しを自由に入れても文法的には誤りではなくなりました。

 ただし、HTML5の仕様書では、見出しとして次の2つの方法が強く推奨されています。

・h1要素のみを使う(下の例を参照)
・セクションの入れ子のレベルに合わせて、適切なランクの見出しを使う

見出しにh1要素のみを使った例
<body>
<h1>HTML5について</h1>
<p>HTML5とは</p>
<section>
  <h1>要素</h1>
 <p>要素とは</p>
  <section>
     <h1>要素の分類</h1>
  <p>要素の分類をすると</p>
 </section>
</section>
  <h1>属性</h1>
 <p>属性とは</p>
</section>
</body>

HTML5入門:セクションとアウトラインセクショニング・ルート
 blockquote,body,details,figure,tdといった要素は、セクショニング・ルートというカテゴリーに属しています。セクショニング・ルートに属する要素は、その中に独自のセクション(アウトライン)を持つことができる要素です。そのセクションは独立したコンテンツとみなされ、前後のコンテンツのアウトラインには影響しません。


SVGMathML


 MathMLは数式を記述する為のマークアップ言語、SVGはベクター形式で画像を描画するための言語仕様、またはこの言語で記述された画像フォーマットのことです。いずれもXMLをベースとした仕様のため、WEBページ上い表現するためには基本的にXHTMLで利用する必要がありました。
 HTML5では、これらの言語をHTML構文中に直接記述できるようになりました。


HTML5入門:セクションとアウトラインMathMLをインラインで記述した例
<!DOCTYPE thml>
<html lang="ja">
<head>
<meta charset-"UTF-8">
<title>インラインMathML</title>
</head>
<body>
<p>MathMLで数式を表しています。</p>
<math>
  <msprt>
    <mi>×</mi>
 </msprt>
  <mo>+</mo>
  <msprt>
     <mn>2</mn>
  <msprt>
</math>
</body>
</html>
SVGをインラインで記述した例

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>インラインSVG</title>
</head>
<body>
<p>SVGで描いた四角と円です
<svg>
  <rect x="50" y="30" width="150" height="100" fill="#000080" />
  <circle cx="180" cy="100" r="50" fill="#ffff00" />
</svg>
</p>
</body>
</html>
今日はここまでです!!と言いますか、今日で基礎知識編は終了です。 次からは本題の「HTML5」について詳しく勉強していきます。またよろしくお願いします。
関連記事

テーマ : インターネットサービス    ジャンル : コンピュータ

TOP > HTML5 > HTML5入門:セクションとアウトライン!!基礎知識最終編!!

LEAVE
'A'
COMMENT






07-2018
SUN MON TUE WED THU FRI SAT
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -

06   08

月別アーカイブ
タグクラウド
全記事表示リンク

 About
WebBox norijin note

はじめまして!!
1983年4月生まれのAB型。広島出身の元美容師で、その後、大阪にてIT企業に勤め、現在三人で会社を立ち上げる為、日々精進しています。
 ブログでは、WEBについて勉強した内容や、自分が使ってて便利な情報を気ままに発信しています。

 Contact
メールフォーム

名前:
メール:
件名:
本文:

 link
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。