HTML5について

質問

HTML5を勉強した方がいいと言われたので、
ちょっと検索して下のサイトを見つけました。
そこのセクションのところの要素についてお聞きします。

http://www.html5.jp/tag/elements/index.html

質問１
セクションのところのheaderとfooterがあります。
これは<div "id=header">とかしていたものが
専用の要素に置き換わるということでしょうか。

質問２
上記の場合、headerとかfooterとかは大きなブロックですよね？
h1～h6も同じところにありますが、
これはp要素と同じコンテンツのグループ化の方ではないですか。

回答No.3

ORUKA1951 · ベストアンサー

＞会員制の商業サイトはその思想と思いっきり反対側ですよね？
＞こういうサイトは本来とはかけ離れた存在なのでしょうか。
　私はほとんど利用しないのでわかりません。どちらかと言うと、ＩＴや科学関係の技術書が多いので・・
　ただ、そのような場合は、articleで括るほうが良いでしょう。
4.4.4 The article element ( http://www.w3.org/TR/html5/sections.html#the-article-element )

＞sectionとかの用途はこうやって説明を受けると
＞部分的には分かるんだけど、応用まではまだまだですね。
　文書構造を明確化できるので、
・文書構成をマークアップすることに適合している
・SEO
は無論ですが、著者側も極めて楽になります。スタイルシートに
section figure{
　font-size:09em;
　position:absolute;
　left:101%
・・・・
section aside{
　fot-size:09em;
　margin:2ex 2em;
　border:dotted gray 1px;
・・・
body>section>section{
　margin-left:2em;
とか書いて、それが何をしようとしているか、何年かたって見直したってわかります。
HTML4.01だって、それぞれを<div class="section"><div class="figure">とするだけ。
　機械や自分を含めて第三者に理解できるようにすることは、なによりも自分のためであり、そして従来より簡単になるということ。わかりにくくもないどころか、よりわかりやすくなるのではないかと思います。

内容に？？なところもありますが、それらの要素の意味は
HTML5.0のレイアウト要素 | HTML5とは？変わるWebと注目の新要素 HTML5.0の情報サイト ( http://www.html5-guide.com/add/layout/ )
　がわかりやすいでしょう。

　私は、現在はHTML4.01strictがメインですが、
HTML5 における HTML4 からの変更点 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/ )原文は
HTML5 differences from HTML4 ( http://www.w3.org/TR/html5-diff/ )

　などを参考にして、文書構造やclass名などを利用させてもらってます。HTML5の勉強になりますし・・

お礼

ORUKAさんに張って頂いたサイトの理念が
Webは公共の財産であるがごとく書かれていたので、
商業サイトって何だ？って思っただけです。
それに対して何か見解が聞けるかなと。

三度もご丁寧な回答をもらったし、
質問内容もだいぶ外れてしまうので
Webのあり方とかについてはもう少し考えてみます。

どうもご回答有り難うございました。

回答No.2

ORUKA1951

＞この説明から受ける印象は本になります。
＞HTMLというのは本を作るがごとく
＞見出しやページがあって当然ということなのでしょうか？
＞Webサイトを作っている人で本と同じに考えている人は
＞あまりいないと思います。
　残念ですが、「本と同じに考えている人はあまりいないと思います。」は認めますが、本人が意図していなくても、一つ一つのウェブページは、巨大なウェブというデータベースにある文献の一つです。データベーベースの一つである限り、データとしての形を持っていないと利用しにくくなります。ウェブ自体が
「よいウェブページを書こうとする人のためのヒント ( http://www.sal.tohoku.ac.jp/~gothit/webauthoring2.html )」
　に書かれているような理念・目的で考案されたものなのですから・・この世界に入れば一度は目を通しておきたいぶす。

　このそもそもの生い立ちと、科学の世界以外の人が使うようになってからのギャップはずっと付きまとっています。
★Style Sheets in HTML documents (ja) ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )
　を読んでください。

＞僕は<div "id=header">のサイトしか見たことがありません。
　headerやfooterは、一つの記事<article>の中に一つずつ存在しえますから、記事がふたつになればふたつ現れてもおかしくない。以下はfooterですが、HTML5の仕様書に具体的に例として載っています。

【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
Here is that same blog post, but showing some of the comments:
<article>
　<header>
　　<h1>The Very First Rule of Life</h1>
　　　<p><time pubdate datetime="2009-10-09T14:28-08:00"></time></p>
　</header>
　<p>If there's a microphone anywhere near you, assume it's hot and sending whatever you're saying to the world. Seriously.</p>
　<p>...</p>
　<section>
　　<h1>Comments</h1>
　　<article>
　　　<footer>
　　　　<p>Posted by: George Washington</p>
　　　　<p><time pubdate datetime="2009-10-10T19:10-08:00"></time></p>
　　　</footer>
　　　<p>Yeah! Especially when talking about your lobbyist friends!</p>
　　</article>
　　<article>
　　　<footer>
　　　　<p>Posted by: George Hammond</p>
　　　　<p><time pubdate datetime="2009-10-10T19:15-08:00"></time></p>
　　　</footer>
　　　<p>Hey, you have the same first name as me.</p>
　　</article>
　</section>
</article>
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［4.4 Sections — HTML5( http://www.w3.org/TR/html5/sections.html#the-article-element )］より

HTML4.01の文書でしたら
<div class="header">
　<h1>・・</h1>
</div>
<div class="section>
　<h2>見出し</h2>
　div class="article">
　　<div class="header">
　　<div class="section">
　　</div>
　</div>
</div>
とかでしたね。

＞sectionの意味が・・・
　Texを書いたことがあると、ぴんと来るのですがそうでなきゃ確かに
　sectionは、目次(content table)から、たどり着けるような一つの塊だと思えば良いでしょう。言い換えると目次のリストに並べられる見出しを持つ文書の集合です。olと並べるとわかります。
<nav>
　<ol>
　　<li><a href="#top">始めに</a></li>
　　<li><a href="#section1">第１章</a>
　　　<ol>
　　　　<li><a href="#section1-1">１項</a></li>
　　　　<li><a href="#section1-2">２項</a></li>
　　　</ol>
　　</li>
　　<li><a href="#section2">第２章</a></li>
　　<li><a href="#appendix">付録</a></li>
　</ol>
</nav>

<article>
　<header id="top">
　　<h1>始めに</h1>
　</header>
　<section id="section1"">
　　<h2>第２章</h2>
　　<section id="section1-1">
　　　<h3>１章-１項</h3>
　　</section>
　　<section id="section1-2">
　　　<h3>１章-２項</li>
　</section>
　<section id="section2">
　　<h2>第２章</h2>
　</section>
　<footer id="appendix">
　　<h2>>付録</h2>
　</footer>
</article>

　このように、文書全体の構成のアウトラインにリストされる、言い換えると目次の標的になる記事がsectionと考えると、わかりやすいでしょう。
　一つのまとまった記事として成り立つ場合は<article>を使うべきであり、またデザインやスクリプトのためにグループ化するときは<div>を使うべき。
　詳しくは、
4.4.2 The section element ( http://www.w3.org/TR/html5/sections.html#the-section-element )

★私は、headerやsectionとかはidにしない大きな理由に、HTML5にしたときに書き換えが大変だからです。
<div id="header">
</div>
より
<div class="header" id="Top">
</div>
のほうが、自動化しやすい・・わかりやすい。もちろん複数あると困りますし・・。あくまでheaderやsection,footer,article,aside,figureなどは、構造を示すためと割り切っていて、idとしては使わない。

お礼

再度ご丁寧に有り難うございます。
本という感じでいいみたいですね。
というかWebの９割はそんな事すら考えてないと思います。

会員制の商業サイトはその思想と思いっきり反対側ですよね？
こういうサイトは本来とはかけ離れた存在なのでしょうか。

sectionとかの用途はこうやって説明を受けると
部分的には分かるんだけど、応用まではまだまだですね。

回答No.1

ORUKA1951

＞質問１
　については、「divタグの名前の付け方」の回答No.4 ( http://okwave.jp/qa/q7107432.html#a4 )が参考になるでしょう。
　HTML5の記法を読む場合、Texの記法を知っておくと読み解きやすいです。
　HTMLは、元来文書を構成する要素をマークアップする方法であって、デザインするためのものではないのです。たとえば、どのような文書でも文書は
<本文>
　<頭書き>
　　<見出し></見出し>
　　<目次>
　</頭書き>
　<本文(章)>
　　<章見出し></章見出し>
　　<・・・・>
　　<本文(項)>
　　　<項見出し></項見出し>
　　　<・・・・>
　　</本文(項)
　　<本文(項)>
　　　<項見出し></項見出し>
　　　<・・・・>
　　</本文(項)
　</本文(章)>
　<章末記事>
　</章末記事>
</本文>
　となっているはずです。そのため、HTML4では
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
DIV要素・【中略】・は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［7.5.4要素のグループ化: DIV要素とSPAN要素( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )］より
　と、DIVが用意されていましたが、ほとんど無視されていました。そのために、より明確に<div class="header">ではなく、<header>を使えと言うことです。【通常はIDではないはずです。なぜなら、headerは一度とは限りませんから】

＞質問２
　意味がわかりません。pは段落(paragraph)を示す要素名です。HTML5では、hnの数字と階層は別です。あくまで何階層目かはsectionの階層で決まります。
<section>
　<h2></h2>・・・見出しレベル１
　<section>
　　<h1></h1>・・見出しレベル２
　　<section>
　　　<h1></h1>・見出しレベル３
　　</section>
　</section>
</section>
　です。また一つのsectionに、hは一つしか現れないはずですから、
<section>
　<h1></h1>
　<h2></h2>
は、間違いで
<section>
　<h1></h1>
　<section>
　　<h2></h2>
もしくは
<section>
　<hgroup>
　　<h1></h1>
　　<h2></h2>
　</hgroup>
となるはずですよね。

　説明に？？？もいくつかありますが、
HTML5とは？変わるWebと注目の新要素 HTML5.0の情報サイト ( http://www.html5-guide.com/ )
　も参考になるでしょう。

お礼

いつもご丁寧に有り難うございます。

>HTMLは、元来文書を構成する要素をマークアップする方法～

この説明から受ける印象は本になります。
HTMLというのは本を作るがごとく
見出しやページがあって当然ということなのでしょうか？
Webサイトを作っている人で本と同じに考えている人は
あまりいないと思います。

>通常はIDではないはずです。
>なぜなら、headerは一度とは限りませんから

これも初耳です。ORUKAさんの投稿からは驚くことが多いです。
僕は<div "id=header">のサイトしか見たことがありません。
しかもhtml１枚にheader１つは常識と思ってましたから。
根本的に何か考え方が違うような・・・

>意味がわかりません。pは段落(paragraph)を示す要素名です

僕も意味が分からないから聞いてます。
なので分かる人が余計に混乱するのはご免なさい。

セクションの意味を正確に理解できてないのだと思います。
h1とh2を同時に使いたい時はhgroup要素で括るんですね。