section

【定義】:一般的なセクションを指示するHTML
『section』は文書のセクションを表すための要素です。

sectionの使用例[HTMLソースコード]

[html highlight="4,13"]
<header>
<h1>500万円得をするホームページ作成会社.comのホームページ制作</h1>
</header>
<section>
<div>
<h2>ホームページの最大のコストはランニングコスト!!</h2>
<p>ある程度の集客力を持ったホームページを維持するには、1年間で60万円もの費用が掛かることはご存知ですか?</p>
</div>
<div>
<h2>1年で54万円、10年で540万円の得</h2>
<p>『業界最安水準で安全のドメイン・サーバー』『更新・管理費をゼロにする独自システム』『集客コストを激減させる圧倒的SEO対策』の3点により、御社のホームページのランニングコストをドメイン・サーバー費用などの月額5,000円程度に引き下げることが出来ます。</p>
</div>
</section>
[/html]

sectionの使用方法解説

 「section要素」は、その文書内において、あるテーマをもったセクションを表わす要素です。

「section」要素と「HTML5」の概念としてのセクシヨン

 「section要素」は、HTML5における「セクションの概念」と混同してしまうかもしれません。「HTML5」における「セクションの概念」は、「body要素」内において、機能別に整理されたブロックとして理解しましょう。
 当HPでは、「セクション」とカタカナで記述している場合は、この概念としてのセクションを表わします。
 この「セクション」は、「section要素」に限らず、「body要素」「nav要素」「article要素」「aside要素」「h1-h6要素」「header要素」「footer要素」「address要素」などによって作られるもので、HTML文書における「機能」が明確化されている点が特徴です。
 「section要素」は、この各セクションを表わす要素の中で、もっとも抽象的な要素に対して用いるものです。

「section要素」と「div要素」

 「section要素」は、「HTML4.01」以前の「div要素」の代替要素ではありません。
 「HTML4.01」以前では「div要素」はブロック要素としてさまざまな使われ方をしてきました。
 「HTML5」においては、「div要素」はスタイリングや、スクリプティングなどの状況において用います。
 「section要素」に対して「class属性」や「id属性」とcssを併用することで、スタイリングさせることは可能ですが、適切な使い方ではありません。

 この2つの要素を理解するには、それぞれの単語の元の意味まで辿ると理解できます。

 「section」を動詞で言うと「切る」という意味になります。「division」(divide)は「分ける」という意味になります。
 HTML文書を、各機能ごとに切ったものに対して、「section要素」を用います。これに対して、その「section」をさらに視覚的に、あるいはスクリプトの都合として分けるときに「div要素」を用いましょう。

 WHATWGのWebサイト内にある「HTML5」のデモサイト「Successfully creating chaos – in HTML」のソースを確認すると、次のように使われています。
 「body要素」には「class」や「id」などの属性は与えられておらず、その次に「div要素」があり、ここに「background」と「id属性」が与えられています。
 これは、セクションである「body要素」には、特別、cssでもスタイリング指定をしていない1つの例と言えるでしょう。

HTMLソースコード

[html]
<body>
<div id="background">
id="wrapper">
<header id="header">
……
[/html]

ホームページ作成会社.com 無料集客可能なホームページ制作
会社ホームページ作成 | 簡単格安ホームページ作成サイト - FunMaker[ファンメイカー]
初心者も稼ぐ高機能アフィリエイトサイト作成システム | FunMaker[ファンメイカー]
SEO対策のための Webライティング実践講座

2015年2月19日発売の当社の最新書籍はAmazonランキング1位、東京都庁の三省堂書店でSEO対策書籍として唯一取り扱われるなど、SEO対策の教科書として高い評価を受けています。