- ベストアンサー
HTML5のsection,articleについて
- HTML5では、<section>要素を使用することで、関連したコンテンツをグループ化することができます。セクション内には、見出し（<h2>）とコンテンツ（<p>）を配置することができます。ただし、<h2>要素は<section>要素の外部では使用するべきではありません。
- <article>要素は、独立したコンテンツのセクションを表します。一般的に、新聞記事やブログ記事などの単独のコンテンツに使用されます。<article>要素内には、記事の本文や画像などの関連するコンテンツを配置することができます。また、<aside>要素は、<article>要素内で他のコンテンツとは関連のない情報を配置するために使用できます。
- 上記のHTMLコードでは、<article id="container">要素がページの全体を表しています。この中に、ヘッダー（<header>）やナビゲーション（<nav>）、フッター（<footer>）などのセクションが含まれています。また、<section>要素も複数存在し、それぞれのセクションには見出し（<h2>）とコンテンツ（<p>）が配置されています。ただし、<header>や<nav>、<footer>要素は除外しても問題ありません。また、<h1>要素はロゴや会社名ではなく、サイト上部に表示される１行文として使用することが推奨されています。
- HTML
- 回答数9
- ありがとう数9
- みんなの回答 （9）
- 専門家の回答
質問者が選んだベストアンサー
少しだけ整理させて下さい。 まず、HTML(5) のセクションとは文書のアウトライン（典型的には目次）と対応するものです。決して「レイアウト分割」のためのものではありません。まあ、アウトラインを利用してレイアウトするのは自由ですが。 ひとつの判断基準として、見出しを置けるならセクションである可能性が高い。逆に、見出しを置けないなら、セクションではない可能性が高い。 --- セクションが article であるか、ひとつの判断基準は「文責」です。通常、文責は address で示されますが、この address の有効範囲は一番近い article です。一番近い article がなければ、ページ全体（body）の文責を示します。 <body> <h1>論文集</h1> <article> <h2>宇宙について</h2> <!-- この article の文責 --> <address>onestone@example.org</address> <article> <!-- 論文集の編集責任者 --> <address>god@example.org</address> </body> --- セクションが aside であるか、ひとつの判断基準は「なくても本文に影響ないか」です。賢いブラウザは、メインビューから aside を消し、その代わりサイドバーに表示するかもしれません。 <article> <h2>宇宙について</h2> <aside> <h3>編集者のコメント</h3> <p>この論文は素晴らしい。</p> </aside> <article> 文書構造を反映したデザインなら、仮に aside を消してもデザインに支障がないはずです。少なくとも、aside を消すとレイアウトが崩れるようでは、何かが間違っています。 --- nav は……意外に難しい。いわゆる「スキップリンク」を設けずともブラウザが適当にスキップしてくれるナビブロック、そして、ページ内で道に迷った時にはブラウザが「こことここにナビブロックがあるけど、どっちに行く？」と聞いてくれるようなもの、それが nav です。 どっちのナビブロックに行くか選ぼうとして、ブロックにラベル（見出し）がなかったなら選びようがない。だから、見出しが必要なのです。まあ残念ながら、こんな賢いブラウザは未だにありませんが。 そもそも、ブラウザは利用者をナビゲートするものである以上、nav は非常に重要な要素のはずなんですが、仕様書でもいまいち歯切れが悪いのですよね。 --- header と footer は No.5 に書いた通りです。それ以上でも以下でもありません。
その他の回答 (8)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
仕様書で言うと Note:The section element is not a generic container element. When an element is needed for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element's contents would be listed explicitly in the document's outline. 4.4.2 The section element — HTML5: Edition for Web Authors ( http://www.w3.org/TR/html5-author/the-section-element.html#the-section-element ) section要素は汎用コンテナブロックではない。スタイリングやスクリプトで必要な場合はdiv要素を使うべきである。一般的に文書の（その文書を構成する要素としての）アウトラインのリストアップとなるときに使う。 文字通り、一般的文章では章や節、項に当たるものを括るために使用する。と考えればよいかと・・ Textだと、上位レベルから chapter（章） section（節） subsection（項） subsubsection（目） paragraph（段落） subparagraph（小段落） と、階層が決まっていましたが、HTML4.01では、divとh1～h2で区別するしかなかった。(多分に同じ科学系文書を出自にしているHTMLはTexの考え方を流用していると見受けられる) HTMLでは、 section |--h1 |-- section |-- h1 |-- section とh1～h6の階層ではなく、sectionの階層で、Texのchapter→section→subsection→subsubsectionに articleについては、文字通り「記事」と訳すほうが良いでしょう。「記事」ですから、それ自体が完結しているのがsectionとの違いで、 <article> <section></section> <section></section> </article> あるいは、 <section> <section></section> <article> <header></header> <footer><footer> <section></section> </article> </section> も当然許される。 HTML5では、[文書を構成する要素]を、マークアップすることに重点が置かれている。--HTML4.01でもそうだったけど、なにせ意味のある要素がなかったためdivを使わざるを得なくて、<div class="contener">とか<div class="wraper">のような、TABLEとなんら変わらないマークアップが行われてきた事への反省かと。 示された例文に戻ると <article id="container"> は、その変なマークアップを引きずっているようで・・ <body>直下にあるなら <body> <article id="TOP"> <header></header> <section></section> <footer></footer> </article> </body> のほうが、気持ちよい(^^) HTML5: Edition for Web Authors [著者のためのHTML5]( http://www.w3.org/TR/html5-author/ ) が資料としては良いかも・・
お礼
回答ありがとうございます。 タグを記号っぽく見ていたから理解できなかったのだと思いました 英単語として扱ってからなんとなく理解できるようになりました。 （Texのほうも少し見てみました。）
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞僭越ながら、No.4 について、article は「記事、論文、論説」であり、要約（abstract）ではないのでは。 確かに、私は <header> <hgroup> <h1>サイト見出し</h2> <h2>ページ見出し</h2> </hgroup> <article id="abstruct" class="abstract"> <p>要約</p> </abstruct> </header> <section id="first"> ・・・と使ってます。間違ってしまった。
お礼
回答ありがとうございます
- Chaire
- ベストアンサー率60% (79/130)
僭越ながら、No.4 について、article は「記事、論文、論説」であり、要約（abstract）ではないのでは。 例えば、データベースに「記事」が保存されている。それを取り出してそのまま表示することもできるし、補足的なものをくっ付けて、あるいは他の記事と一緒に表示しても良い。とにかく、それ自体で完結している（self-contained composition）ような内容が article です。 ですから、ページ全体も（考えようによっては）article になりえます。別に、article の中に article があっても構いません。文学全集のように、ひとつひとつの作品（article）を組み合わせてひとつの作品集（article）にするのも、よくあることです。 <article role="document"> <h1>野比のび太迷言集</h1> <article> <h1>第一巻の迷言</h1> <article> <article> <h1>第二巻の迷言</h1> <article> </article> ウェブアプリでは、ひとつのウィジェットが article になりえます。 <article role="application"> <header> <h1>のび太のステータス</h1> <ul role="tablist"> <li role="tab">能力</li> <li role="tab">特技</li> </ul> <header> <section role="tabpanel"> <h1>能力</h1> </section> <section role="tabpanel"> <h1>特技</h1> </section> </article> なお、WAI ARIA をサポートする支援ソフトであれば、role="document" の中では文書モードのキー操作（例えばスペースバーでスクロール）、role="application" の中ではウィジェットのキー操作（例えばスペースバーでタブ切替）のように、振る舞いを変えるでしょう。 ※ただ確かに、body 内を article でくくる必要はありません。私も以前、勘違いしていましたが。 --- aside は、DocBook では sidebar という「あら、言い切っちゃったよ」的な名前になっています。まあ、文書を読んでいるとき、メインのペインではなく、サイドバー（補助ペイン）に補足的に表示されるようなもの、それが aside です。 セクションを使ったアウトライン・エディタや、複数のペインを自由に飛び回るハイパーテキスト・アプリケーション。どう使われるのか不明と言われがちな HTML(5) のセクションですが、こうして見ると案外、応用例はありそうではないでしょうか。 ブラウザの機能強化が「マルチメディア」に偏っていて、こういう方面の（ハイパーテキストを扱う意味での）機能が、昔からの貧弱なままであるのが問題なのです ;-)
お礼
回答ありがとうございます role属性・・・しらなかった（汗） やっぱり本じゃだめですね・・・載ってませんでした ２つの例がわかりやすいです参考になりました
- Chaire
- ベストアンサー率60% (79/130)
No.2 補足より。 > ふつうはいきなりulだけになると思いますが ならば、別に nav である必要はありません。 <section> <header> <h1>苦悩の果てに</h1> <p>絶望のどん底にいるのび太。立ち上がれのび太！</p> <ul role="directory"> <li><a href="...">裏山にて</a></li> <li><a href="...">和解</a></li> </ul> </header> ... </section> このように header に ul を置けば十分です。 HTML(5) のセクションの説明と称して、いわゆる「ヘッダ」「ナビ」「メイン」「フッタ」のページ分割図のようなものを描いているサイトは、十中八九、何かを誤解しています。 HTML(5) のセクションは、あくまで目次（正確にはアウトライン）に結び付いています。だから、見出しを置けない部分はセクションではない可能性の方が高い。 header は「セクションの導入部」、典型的にはリード文や見出し、要約などが含まれます。名前が header だからと言って、別に冒頭に置く必要はありません。末尾に置いても構いませんし、かつ、何個置いても構いません。それが導入部である限りは。 footer は「セクションのメタ情報」、典型的には著者情報や関連リンクなどが置かれます。これも、別に末尾に置く必要はなく、何個あっても構いません。 --- もし「ページ分割」をもとに考えるのなら、それは HTML(5) のセクションではありません。WAI ARIA のリージョンです。 <div role="document"> <div role="banner">...</div> <div role="main">...</div> <div role="contentinfo">...</div> </div> banner、main、contentinfo は、ひとつの document 内で 1 個ずつでなければなりません。WAI ARIA をサポートする支援ソフトは、キーボード操作によってこれらのリージョンを切り替えたり、一覧を作ったりするでしょう。 WAI ARIA のリージョンと、HTML(5) のセクションを組み合わせても構いません。しかし、両者を混同しないで下さい。特に、HTML(5) のセクションを「レイアウトの分割」と誤解しないで下さい。 あと、純粋理性批判と目次ジェネレータはただの例示です。プレースホルダです。
お礼
回答ありがとうございます ＞見出しを置けない部分はセクションではない なるほど・・・別になくてもってところなんですね ＞セクションを「レイアウトの分割」と誤解しないで下さい。 マークアップとレイアウトで divには気をつけようと思っています。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
No.1です。 ＞たとえばHTML4のサイトを作り直す場合にどうなのかなあと思ったのですが・・・ なぜ、現在HTML4で完成しているものをHTML5にする必要はありません。HTML5でないと使えないvideoとかaudioとかを使う必要があるのなら、更新になります。 HTML5のロードマップだと、勧告は2014年になりそうです。 HTML4.01では、文書構造を示す要素が欠落していたため、tableやdivを使ったマークアップが使われ続けた反省から、新しい要素が追加されました。 HTML4.01でも、きちんと <div class="section"> <div class="header"> <h1>見出し</h1> </div> <div class="section"> ・・・・ とマークアップされていれば、なんら問題はないでしょう。 そのため、HTML5が勧告されるまでのしばらくは、HTML4.01の仕様のままで、へんなところを直していく作業で良いと思います。 また、HTML4.01が上記のようになっていたら、正規表現が扱えるテキストエディタで簡単にHTML5に直せます。 ただ、示されたHTMLで <body> <article id="container"> は、本来はおかしい。 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから The article element represents a self-contained composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content. ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［4.4 Sections ― HTML5( http://www.w3.org/TR/2011/WD-html5-20110525/sections.html#the-article-element )］より artcleは日本語に訳すと、「要約」です。よく似た単語にsummaryがあります。学術論文で、論文の最初に書かれている「論文全体を簡潔にまとめた記事でそれを読めば全体像がわかるようなもの」が、articleで、論文の最後に「論文全体を短くまとめた」ものがsummaryです。 このことから解るように、articleが文書全体を括ることはおかしいです。 数学用のTexを経験されるとわかりますが、書籍で言うと Tex HTMLL part 部(冊子)・・・・サイト chapter 章・・・・・・・ディレクトリ section 節・・・・・・・section subsection 小節・・・・・・section>section subsubsection 小々節 ・・・・section>section>section という大きな流れがあり、そのsection内に含まれるartcle(要約)であり、summary(まとめ)であり、aside(コラム)であり、脚注(mark)であると考えると良いでしょう。 １．sectionについて h2とh2に関する記事pがある場合 <section> -<h2></h2> ★↑でなければなりません。明確にそのセクションのヘッダーに当たるなら <section> <header> <h1></h1> </header> もよい。ただし、hnが複数ある場合は <hgroup> <h1>見出し</h1> <h2>見出し</h2> 2.article/asideについて <article> -コンテンツ -<aside>関連ないもの</aside> </article> みたいに「article内」でasideを使い除外していいのでしょうか？ asideはどこにあってもよい 3.全体として <article id="container"> -<h1></h1> -<aside> --<header></header> --<nav></nav> -</aside> -<section> --<h2></h2> --<p></p> -</section> -<aside> --<footer></footer> -</aside> </article> ★はおかしいです。 <section> --<header><!--ヘッダ --> --<h1>見出し</h1> --<article>要約</article> --<nav></nav> --</header> --<section> ----<h2></h2> ----<p></p> --</section> --<footer> --</footer> </section> となります。★id="contener"とか、id="wrap"が間違っているから、section/header/footerが導入されたのです。 h1をロゴ・会社名にせず、サイト上部の１行文にするべきか <section> <header> <h1>サイト名</h1> ・・・・article(要約)やnav(ナビゲーション)が含まれる場合もある </header> ロゴやバナーは背景にするとかが良いでしょうね。 <nav> <ul> <li><a href="">トップへ</a></li> <li><a href="">会社概要</a></li> にて、nav>ul+liをabsoluteで、ページの左上にロゴとして独立して配置(absolute)するのがスマートかもね。
お礼
回答ありがとうございます ＞正規表現が扱えるテキストエディタで簡単にHTML5に直せます 実はそれを狙っていますｗ そのためにHTML５ベースで作っておいたほうがよいかと思いまして・・・・ その過程で疑問に思ったので質問しました。 Texの部分の説明・・・参考になりました。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
No.1です。下記サイトに解りやすい説明があります。 HTML5.0で強化された機能 | HTML5とは？変わるWebと注目の新要素 HTML5.0の情報サイト ( http://www.html5-guide.com/strong/ )以降のページ
お礼
再度回答ありがとうございます そこは一度見たことがあります 実例がないので詳しく見ていませんでした（＾＾； さっそく読んでみます。
- Chaire
- ベストアンサー率60% (79/130)
ページの目次を考えて下さい。HTML(5) のセクションというのは「目次から直接ジャンプできる部分」のことです（WAI ARIA で言うところの role="region"）。そして、目次に載る「ラベル」が、すなわちセクションの見出しです。 No.0 の『3. 全体として』からは、次のような目次が生成されるでしょう。 + [article の見出し] + [無名の aside] + [無名の nav] + [section の見出し] + [無名の aside] これが意図した目次であるか、私には分かりません。しかし、ラベルのない（無名の）セクションが目次に載るというのは、あまり普通のことではない、と思います。 --- もし次のような目次を想定するなら、 + 純粋理性批判 + 前書き + 目次 + 本論 + 後書き + 関連書籍の案内 マークアップの一例は次のようなものです。 <section> <header> <h1>純粋理性批判</h1> <section> <h1>前書き</h1> ... </section> <nav> <h1>目次</h1> ... </nav> </header> <article> <h1>本論</h1> ... <article> <footer> <section> <h1>後書き</h1> ... </section> <nav> <h1>関連書籍の案内</h1> ... </nav> </footer> </section> header、footer は目次に関与しません。単にセクションをグループ化するだけです。 本文あるいは各セクションの中で、本筋から外れる部分（例えば傍注、脚注の集まり）は aside です。aside はセクションなので目次に載りますが、目次ジェネレータの設定によっては aside を含めないようにすることもできるでしょう。この点で、そんなに多用するものではありません。 それと、nav も濫用されるきらいがありますが、単なるページ内リンクだけなら ul などのリストで結構です（WAI ARIA で言えば role="directory"）。リンク集のように、リンク自体がひとつの内容となるとき nav を使います。ですから、nav もそんなに使われるものではありません。 ですから、section と、せいぜい article の使い方を覚えれば十分です。nav、aside を「ちゃんと」使えているサイトは、あまり見たことがありません。
お礼
回答ありがとうございます なるほど・・・書籍のイメージでマークアップすればいいんだ と思いました。 あとWAI ARIA・目次ジェネレータ・純粋理性批判 というキーワードが・・・
補足
＞header、footer は目次に関与しません。単にセクションをグループ化するだけです。 これでなんとなくわかってきました header/footerがセクショニングコンテンツに 含まれていないというところを見落としていました。 逆に言うと<nav>を<header>の外に出してもいいわけですよね？ それと<nav>を使うとき正式には見出し（例でいう「目次」） があったほうがいいのでしょうか？（CSSで追い出すとかで） ふつうはいきなりulだけになると思いますが・・・
- ORUKA1951
- ベストアンサー率45% (5062/11036)
ちょっと歴史を知っておいたほうがよいかも。 HTML4.01が作られたとき、それ以前のHTML(3.2)は、ブラウザ戦争で膨れ上がったベンダー独自の要素が加わり、本来のHTMLの目的 ・文書構造をその構成要素を示すマークアップを行うことで、プラットホームに関わらず文書が利用できること。 から遠ざかり、FONTに代表される見栄えに関する要素属性、要素(タグ)をその内容・意味ではなくデザインのために使用することが増えたという反省から、「文書をその構成要素にしたがってマークアップするHTMLに戻し、見栄えはCSSに任せる」という姿勢を明確にしました。 しかし、HTML4.01では文書の構成要素を示す要素事態が決定的に不足していたため、相変わらずデザインのためのタグが使われ続けました。DIV要素の多用などはその典型で、<div class="contener">とか。 そこでHTML5では、より明確に要素が付け加わりました。そのため、基本的には <body> <header>ヘッダー</header> <section>本文</section> <footer>フッター</footer> </body> が最もシンプルな形 ・<header></header>内にh1～h2は複数書けないので、必要な場合は <hgroup> <h1>見出し</h1> <h2>サブ見出し</h2> </hgroup> ・ひとつのセクションには見出しが必ずひとつあるはずなので <section> <h2>見出し</h2> </section> となる。 ・本文内にサブセクションがある場合は <section> <h2>見出し</h2> <p>文章</h2> <section> <h1>見出し</h1> <p>段落</p> </section> </section> としなければなりません。（見出しがふたつのときは<hgroup>） ★このとき、HTML5では、見出しレベルはsectionの階層で決まります。DOMでは |-BODY |-HEADER | |- H1 |-SECTION | |-H2 | |-SECTION | | |-H1 となり、hの数字ではなく、その階層で決まります。 ・大きな文書の一部の場合は、 <body> <section> <header> <h1>見出し</h1> </header> <section> <h1>見出し</h1> <p>文章</h2> <section> <h1>見出し</h1> <p>段落</p> </section> </section> </section> </body> でも良いですね。 逆に小さな記事では、 <body> <h1>見出し</h1> <p>段落</p> <p>段落</p> <p>段落</p> </body> ★articleはsection(やfooter)内の関連記事でそれ自体が完結しているもの ★asideはsection(やfooter)内で、それが所属する親要素(本文)と直接関係ない記事 ★figureは、他所も参照される挿絵や記事、markという行内要素もある。 のように使い分けます。 ★navはナビゲーションリンクですから、section内にもfooter内にも、あるいはこれらと独立して存在しえます。 <header> <nav> <ul>・・・ページの簡単な目次とか、パンくずリストとか </header> <section> <nav> <ul> <li><a href=""></a></li> だと、そのセクション内のナビゲーション(目次) </section> <nav> <ul> だと、そのページの目次 </div> <footer> <nav> <ul> だとサイと全体のナビゲーション のように区別しておくと良いでしょう。 ★それ以外に、出自は見栄えだったけど構造的な意味に読み替えて使われる<b>,<hr>,<s>,<strong>も要チェックです。 詳しくは、 HTML5 における HTML4 からの変更点 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements ) ※ただし、これはHTML4.01をしっかり、正しく理解している方向けですから必要なら適宜HTML4.01の仕様書(ただしstrictです!!)を参照してください。 HTML 4.01 Specification (ja) ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/cover.html ) [英文] HTML5 ( http://www.w3.org/TR/html5/ )
お礼
回答ありがとうございます。 HTML5の辞書があるので単品の使い方はわかるのですが たとえばHTML4のサイトを作り直す場合にどうなのかなあと 思ったのですが・・・ やはりシンプルにするに越したことはないようですね リンク先もチェックしてみます
お礼
回答ありがとうございます ＞その代わりサイドバーに表示するかもしれません。 この考え方を基準に考えてみます。 ＞賢いブラウザ アウトラインの厳密なチェックができるものがあればいいんですが・・・
補足
お二人ともご丁寧にありがとうございました。