- ベストアンサー
html5 について
今html5 を勉強してます。 セクション、articleの意味がわかりません。 何故、セクションがあるのか？どのように使われているのか、また何故セクションがひつようなのか？ 初心者なのでhtml5入門(かなり細かく書いてあることが前提です。しかも、初心者でも理解可能です。) のサイト、著書があれば教えて下さい。 セクションとdivの違いはなにか？ よろしくお願いいたします。
- sumiyakico
- お礼率9% (11/119)
- HTML
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
セクションというのは、日本語では「章」「節」などの分類の総称です。 HTMLとして考えるのではなく、「日本語（文学）」や「英語」で考えてください。 業界ごとに呼び方は変わりますが、 第一章 第一節 第一項 第一章 第一節 第一幕 第一章 第一節 第一款 これらの区切りを、日本語では上記の様に呼び方を変えていますが、英語では全部「section」と呼びます。 section sectionに入れ子になったsection（略してsection） 『sectionに入れ子になったsection』に入れ子になったsection（略してsection） そしてこれらのセクションを示すHTMLタグとして、<section>を使います。 articleは作品という意味です。 １つの作品に対して<article>を１つ使ってください。 いわゆるメインコンテンツに<article>を使えばいいです。 作品じゃないし、、、と思われたのであれば、<section>でいいです。 http://www.html5.jp/ メニューから、 > チュートリアル > タグリファレンス > HTML要素 > 各項目 に進んでください。 基本的にはHTML5の仕様書の邦訳です。 言い回しのような、若干わかりづらい表現はありますが、だいたいわかると思います。 http://www.html5.jp/tag/elements/div.html <div>は「その他」です。 ほかのタグでしっくり来なければ、最終手段としてグループ化したい場合に<div>を使用してください。 ほとんどの場合、デザインを目的とした使い方になると思います。 特例として、<p>（段落）の中にHTMLの文法上では許されていないテーブルや箇条書きなどを入れたい場合に、<div>を<p>の代わりに使用できます。 <div> 私の好きな果物は <ul> <li>メロン</li> <li>イチゴ</li> <li>スイカ</li> </ul> です。</div> ただしこの場合、日本語の文章を以下のように書き換える事ができますので、日本語文として適切かどうかという点で、見直し（推敲）てみて、適切な方にあわせて書くのがいいです。 <p>私の好きな果物は以下の通りです。</p> <ul> （略） </ul> <span>も同様です。 <em>や<small>など、他のタグでしっくり来ないけど色分けしたい、でもなにか目印を付けたいという場合に<span>を使ってください。
その他の回答 (1)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
HTML5は、HTML4.01strictの改訂版ですから、HTML5を理解しようとされているということは、当然HTML4.01は完全にマスターされている前提で説明します。 HTML4.01では、「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )」が明確に唱えられ、HTMLは文書構造、スタイルシートでプレゼンテーションを指定することになっていましたね。そして、『推奨しない要素は、リファレンスマニュアルの各所で定義し、推奨しないことを明記する。推奨しない要素は、HTMLの将来のバージョンでは廃止になる可能性がある。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )』 また、文書構造はDIV要素が用意されて、『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』 となっていましたね。 ここまでは、HTML5を学ぶ場合は、すでに良く御存知だと思いますが、一応念のため。 HTML4.01では文書構造をDIVを使って記述することになっていましたから <div class="header"></div> <div class="section"> <div class="section"></div> <div class="section"></div> <div class="section"></div> <div class="aside"></div> </div> <div class=footer"></div> のように使用されてこられたと思います。 ところが、HTML4.01ではが、現実にはプレゼンテーションのために流用され、 <div id="content"><div id="left"><div class="rightBar">とか、到底文書構造とは程遠い使われ方をされてきました。 それでは、その文書の内容を機械に理解させようとしても理解できません。 その反省から、HTML5では、「文書をよりよく構造化するために、( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )」新しい要素が追加されました。（される予定） ・section ・article ・aside ・hgroup W3Cの使用では採用されない見込み ・header ・footer ・nav ・figure ・figcaption ・main 新しく候補---使い道は厳しく限定される。 Texなどで論文を書かれた経験があると説明しやすいのですが、sectionは本文を構成する階層を示す要素です。 Texでは section |-- sub section |-- sub sub section とすれば自動的に、節-->章-->項 と文書のアウトラインが構成されますが、それと同じで、sectionの階層がHTML文書のアウトラインを作ります。--わかりやすく言うと、機械が自動的に目次を作れる要素ということ。 そのた、sectionは、必ずひとつの見出し要素<h1>～<h6>を持つと想定されます。 ★section要素は、機械に自動的に目次を作らせた時に役立つ階層を示すと考えると良い。HTML4.01は<h1>→<h6>の数字で表していたことが、sectionで示すことになる。 一方articleは、完結した文書のまとまりですから、内部に<header>,<section>,<footer>を持つと想定されるブロックです。 代表的なマークアップを見るとわかる。 <body> <article><!-- この場合、header,section,footerが1セットしかないためなくても良い --> <header> <h1>ページの見出し</h1> <nav>ナビゲーション</nav> </header> <section> <h2>本文見出し</h2> <p>記事</p> <section> <h3>項見出し</h3> <p>記事</p> <article><!-- ブログや他の完結した記事 --> <header></header> <section></section> <footer></footer> </article> </section> <section> <h3>項見出し</h3> <p>記事</p> <aside><!-- このセクションの補足記事(本文と無関係) --> <h4>参考記事</h4> </aside> </section> </section> <footer><!-- この文書のフッタ --> <h2>文書情報</h2> </footer> </article> </body> ＞セクションとdivの違いはなにか？ DIVはそれ自体、意味を持たない集団。idやclass名を借りて文書構造を示す。 HTML5では、 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから Note:Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of the div element leads to better accessibility for readers and easier maintainability for authors. ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［4.5 Grouping content — HTML5( http://www.w3.org/TR/2012/CR-html5-20121217/grouping-content.html#the-div-element )］より (意訳) 著者は、他に適切な要素がないときの最後の最後の手段として、div要素を使用することを強く推奨する。DIVより適切な要素を使用すると、読者にはより良いアクセス性を、著者には保守性を高めることにつながる。 言い換えれば、HTML5ではDIV以外に適切な要素を探すことがまず前提となる。 ＞初心者なのでhtml5入門(かなり細かく書いてあることが前提です。しかも、初心者でも理解可能です。) 初心者だけど理解できるとの事ですので・・ HTML4.01でもそうであったように・・ ⇒HTML5( http://www.w3.org/TR/html5/ ) そして、ここがとってもわかりやすい。 ⇒HTML5 Doctor, helping you implement HTML5 today( http://html5doctor.com/ ) 質疑応答の感じで、詳細に疑問点を解説している。 その前に、より簡単な、HTML4.01strictをマスターされると早いと思います。 ⇒HTML 4.01仕様書--邦訳--( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/cover.html ) その上で、上記で紹介した「HTML5 における HTML4 からの変更点( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff )」 その後、詳しい事はHTML5の仕様書、疑問点が出てくればHTML Doctor
