プロが教えるわが家の防犯対策術！

【HTML５】セクションを示す要素の使い分け

解決済

  • 質問者：adober
  • 質問日時：
  • 回答数：4件

HTML、CSSを勉強中の者です。
HTML５のセクションを示す要素（section・article・aside など）をどのように使い分けるべきなのかいまいちわからず、質問させていただきました。

様々なサイトで調べてみたのですが、サンプルを見るとどれも微妙に定義が違っているように見受けられ、理解が曖昧です。
あまり詳しくないサイトだと、単純にヘッダー部分はheader要素、フッター部分はfooter要素、タブメニューなどはnav要素、リンクなどはaside要素、そしてメインとなるコンテンツ部分はsection要素、といったことしか書かれていませんでしたが、別のサイトにはsection要素の中にarticle要素やaside要素が入ってくると書かれており、「？？？」という感じです。

例えばですが、添付した画像のようなサイトの場合は、下記の考え方で合っているのでしょうか？
header・・・ヘッダー（オレンジ）
nav・・・タブメニュー（薄青）
section・・・タイトル（緑）、コンテンツ（濃青）
article・・・記事（黄色）
aside・・・サブメニュー（紫）、リンク（ピンク）
footer・・・フッター（薄赤）

また、section要素やarticle要素の中にarticle要素やaside要素が入ってくる、というのはどのような場合でしょうか。

最初のうちにきちんと使い分けを覚えたいと思いますので、よろしくお願いします。

「【HTML５】セクションを示す要素の使い」の質問画像
通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (4件)

No.4ベストアンサー

  • 回答者： ORUKA1951
  • 回答日時：

＞例えば、・・・【中略】・・・直接的にサービスには関わらないけれど載せたい記事は、・・・【中略】・・・独立した記事（article）として見なす、という認識で大丈夫でしょうか。


　その場合は、asideのほうがよい場合もあるでしょう。asideだと、googleはたぶん無視する。articleだと拾っていく。
　このあたりの使い分けは、内容と製作側の意図も絡むでしょう。

＞ナビゲーションといわれるとそのHPのタブなどのメニューのみ、
　navはページ内の目次も含みます。必ずしもウェブサイト内や他のページへのリンクではない。
　逆にfooter内に書く簡単なリンクはnavで囲うべきではありません。footer自体にすでに意味があるので・・

　
    • good
    • 0
    • 件
通報する
この回答へのお礼

お礼が遅くなりました。すみません。

慣れれば悩まずに使えるようになるのだと思いますが、現時点では難しいですね。
自分なりにもう少し調べてみます。

ありがとうございました。

通報する
お礼日時：2014/05/30 16:52

No.3

  • 回答者： ORUKA1951
  • 回答日時：

読み返してみると誤解を与える書き方でした。



＞これを「一般的な文書（section要素）」として見るか、「文書内で自己完結している（article）」として見るか、それがわからないのです。

　新聞紙で言うと、articleは連載記事とかコラムをイメージされると良いでしょう。

【sectionは】
・必然的に見出し<h>を伴うか期待される。
・article, aside, navなどより適切な要素はないのか？
・他所から独立した記事として参照される可能性がない
　　参照される場合はarticle

＞『header headding(○○新聞にこのお店が紹介されました！)』と同じ要素になる
＞こちらの箇所が、articleではなくsectionの一部となっているのはなぜでしょうか。
　上の説明でよいですね。

＞同じく、『会社概要』などのサブメニューや『わくわく農家』などのリンクがnavで
＞囲まれているのはどういった意味があるのでしょうか。
　他のページへのナビゲーションだからです。
　　これはそのページの目次に入ったらおかしいです。アウトラインじゃないからasideの中
　　ナビゲーションだから、nav
　⇒4.4 Sections — HTML5( http://www.w3.org/TR/2012/CR-html5-20121217/sect … )
　　の上から1/3あたり

　　<header>
　　　<nav></nav>
　　<header>
　　<article>
　　　<header></header>
　　　<nav></nav>
　　　<div>
　　　　<section></section>
　　　　<section></section>
　　　　<section></section>
　　　</div>
　　</article>
　　<footer></footer>
　
　というサンプルがあります。
    • good
    • 0
    • 件
通報する
この回答へのお礼

＞【sectionは】
＞・必然的に見出し<h>を伴うか期待される。
＞・article, aside, navなどより適切な要素はないのか？
＞・他所から独立した記事として参照される可能性がない
＞　　参照される場合はarticle

例えば、今回のようなとある店のHPにおける『お得な割引情報』などのサービスについての記事とかではなく、直接的にサービスには関わらないけれど載せたい記事（『従業員ブログ』や『無農薬野菜と産地直送の魅力』など）は、本コンテンツ（店のサービス内容）には入らない＆Google検索などでその記事自体が他所から参照される可能性がある（必ずしも店のHPから辿らなければ見ることのない記事ではない）独立した記事（article）として見なす、という認識で大丈夫でしょうか。

navについては理解しました。
ナビゲーションといわれるとそのHPのタブなどのメニューのみ、と思っていましたが、他のページへのナビゲーションと考えれば納得です。

通報する
お礼日時：2014/05/29 09:23

No.2

  • 回答者： ORUKA1951
  • 回答日時：

sectionについては、次のように理解すると良いです。


sectionは、(本文)文章の階層を示します。必ず見出し(h1～h6)を伴う（と期待されます。）
別の見方をすると、機械が自動的に目次を作る時に
Texの例
　Capture
　　┗Section
　　　　┗Subsection
　　　　　　┗Subsubsection
と同様です。
　Section　　節
　　┃　h1
　　┗Section　章
　　　　┃　h2
　　　　┗Section　項
　　　　　　┃　h3
　　　　　　┗Section
　　　　　　　　　h4
　HTML5では、sectionの階層で樹構造を示します。そのためすべてh1で統一するか、sectionの階層にあわせるか何れかを選択することが求められています。
　また、W3C HTML5では、hgroupが廃止になりましたが、それは必ず階層を伴うはずだという理由です。
　WHATOGのHTML5にはあります。
　⇒4.3 Sections — HTML Standard( http://www.whatwg.org/specs/web-apps/current-wor … )

articleは、
　内部にheader/section/footerを持つと推定されるような独立したブロックです。
　ですので
　<body>
　　<article>
　　　<header></header>
　　　<section></section>
　　　<footer></footer>
　　</article>
　</body>
でも構わないです。私はタグが増えるのでこの場合はarticle使いません。

＞これを「一般的な文書（section要素）」として見るか、「文書内で自己完結している（article）」として見るか、それがわからないのです。

　新聞紙で言うと、articleは連載記事とかコラムをイメージされると良いでしょう。
・必然的に見出し<h>を伴うか期待される。
・article, aside, navじゃないのか
・他所から独立した記事として参照される可能性がない
　　その場合はarticle

＞main:
　これは一箇所しか使えないことがヒントになるでしょう。sectionと異なり、アウトライン(目次を作る)には影響しません。
よって
（存在場所）article, aside, footer, header, nav の内部にはありえません。
（含み得ない物）サイト・ナビゲーション・リンク、著作権情報、サイト・ロゴ、バナーなどは、その文書のmain内にはありえません。

たぶんこうなる。DOMで書くと分かりやすい。どの情報がどれに含まれるかをマークアップする。
必然的にデザインもそうなります。でないと優れたデザインとは言えない。
body
|--header
|　　|-- h1 にこにこ食堂
|　　|-- nav (サイトナビ)
|　　|　　|-- メニュー
|　　|　　|-- 宴会プラン
|　　|　　|-- アクセス
|
|-- section
|　　|-- section headding(お品書き)
|　　|↑　　　|-- 豚汁定食
|　　|main　　|-- カツ丼定食
|　　|↓　　　|-- 焼き魚定食
|　　|　このsectionの外側　mainもアリかも
|　　|
|　　|-- section headding(期間限定お得な割引プラン！)
|　　|　　　|--
|　　|
|　　|-- article
|　　|　　　|-- header headding(○○新聞にこのお店が紹介されました！)
|　　|
|　　|-- aside
|　　|　　　|-- nav
|　　|　　　|　　|-- ・会社概要
|　　|　　　|　　|-- ・サイトマップ
|　　|　　　|　　|-- ・お問い合わせ
|　　|　　　|
|　　|　　　|-- nav
|　　|　　　|　　|-- わくわく農家
|　　|　　　|　　|-- のんびり牧場
|
|-- footer
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご丁寧にありがとうございます。
いくつか質問させてください。

＞・他所から独立した記事として参照される可能性がない
ということがarticle要素の特徴とした場合、

＞　<body>
＞　　<article>
＞　　　<header></header>
＞　　　<section></section>
＞　　　<footer></footer>
＞　　</article>
＞　</body>
という構造で一つのページを書いてしまったら、そのページは他所から参照されることはないのでしょうか？

articleが新聞でいうところのコラムのようなもの、というイメージはできるのですが、
＞・article, aside, navじゃないのか
＞・他所から独立した記事として参照される可能性がない
という二つの特徴が今ひとつ理解しがたいです。
特に、下記の『他所から独立した記事として参照される可能性がない』という点が、headerやfooterを含むことのできる独立した要素であるのであれば、参照される可能性があるのではないか、と感じています。

また、書いてくださったツリーの中で、
＞section headding(期間限定お得な割引プラン！)
『header headding(○○新聞にこのお店が紹介されました！)』と同じ要素になるこちらの箇所が、articleではなくsectionの一部となっているのはなぜでしょうか。

同じく、『会社概要』などのサブメニューや『わくわく農家』などのリンクがnavで囲まれているのはどういった意味があるのでしょうか。

通報する
お礼日時：2014/05/28 17:08

No.1

  • 回答者： ORUKA1951
  • 回答日時：

根本的に、間違っています。


1999年のHTML4.01以来の「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」です。
　HTML4.01では『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 』
　-- 7.5.4要素のグループ化: DIV要素とSPAN要素( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … ) --

となっていたものが、HTML5では、「The following elements have been introduced for better structure:( http://www.w3.org/TR/html5-diff/#new-elements )」
　すなわち「構造を寄り明確にするために、新しい要素が追加された」
　section:一般的な文書またはアプリケーション部である。これは、H1、H2、H3、H4、H5及びH6要素と一緒に使用して文書構造を示す。
article: ブログのエントリや記事など、文書内で自己完結が可能な場所を示します。
main: 文書内の支配的な内容のコンテナとして使用することができます。W3C HTML5 と W3C HTML 5.1ではページ内に一箇所しか使えない
aside:他の要素と直接関係していない補足的なもの
　　WHATWGの HTMLには、hgroupには見出しのグループ化のためにある。W3C HTML5にはない
header:導入部やナビゲーションを
footer:本文や著者の情報など。著作権情報など
nav:ナビゲーション
figure:本文から参照されることのある独立した要素。挿絵等
figcaption: そのキャプション　ひとつしかかけない

とか・・。
HTML4の時代、<div class="section">としていた物になります。
--------------------------------------------------------------
　ご覧のように、決して『添付した画像のようなサイトの場合は、下記の考え方で合っているのでしょうか？』とはならないのです。デザインの事はHTMLには一切関係ありません。
　それが【構造とプレゼンテーションの分離】です。
　^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
　あなたが作られているページの内容をHTMKL4ではclassやidとDIVを組み合わせて、HTML5では構造用の要素を使ってマークアップするのです。

＞様々なサイトで調べてみたのですが、
　なぜ仕様書見ない？？？。すべて正確に書かれている。

例えば
<body>
　<header>
　　<h1>ページタイトル</h1>
　　<section id="abstract">
　　　<h2>要約</h2>
　　</section>
　　<nav></nav>
　</header>
　<section>
　　<h2>本文見出し</h2>
　　<section>
　　　<h3>項見出し</h3>
　　</section>
　　<section>
　　　<h3>項見出し</h3>
　　　<article>
　　　　<header>
　　　　　ブログ記事より
　　　　</header>
　　　　<section></section>
　　　　<footer></footer>
　　　</article>
　　</section>
　　<aside></aside>
　　<nav id="contentTable"></nav>
　</section>
　<footer>
　　<address></address>
　</footer>
</body>
　かも知れない・・・。

★その上で、どうプレゼンテーション(表現)するかを考える。
★逆じゃない

　HTML5より先にHTML4.01--strict--を徹底的に身につけたほうが早い。HTML5は膨大ですし、厳しい。
・HTML 4.01 仕様書邦訳( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
・HTML5( http://www.w3.org/TR/html5/ )

この回答への補足

＞デザインの事はHTMLには一切関係ありません。
理解しています。
HTMLでは文書構造だけを示すということを前提で書いています。

デザインを抜きに、添付画像をHTMLで書くと、
---------------
にこにこ食堂
メニュー
宴会プラン
アクセス
<-- 以下は添付画像には書かれていません -->
お品書き
豚汁定食
カツ丼定食
焼き魚定食
<-- ここまで -->
期間限定お得な割引プラン！
○○新聞にこのお店が紹介されました！
サブメニュー
・会社概要
・サイトマップ
・お問い合わせ
リンク
わくわく農家
のんびり牧場
---------------
のような感じになり、これを適切な文書構造にするためにマークアップをしていきますよね。
一旦HTML５ではなく、ただdivで区切ります。
---------------
<div class="header">
<h1>にこにこ食堂</h1>
</div>
<div class="nav">
<ul>
<li>メニュー</li>
<li>宴会プラン</li>
<li>アクセス</li>
</ul>
<div class=section>
<h2>お品書き</h2>
<ul>
<li>豚汁定食</li>
<li>カツ丼定食</li>
<li>焼き魚定食</li>
</ul>
<div>
</div>
<div class="article>
<h3>期間限定お得な割引プラン！<h3>
<p>........</p>
<div class="article">
<h3>新聞にこのお店が紹介されました！<h3>
<p>........</P>
<div class="aside">
<h2>サブメニュー</h2>
<ul>
<li>会社概要</li>
<li>サイトマップ</li>
<li>お問い合わせ</li>
</ul>
</div>
<div class="aside>
<h2>リンク</h2>
<ul>
<li>わくわく農家</li>
<li>のんびり牧場</li>
</ul>
</div>
<div class="footer"></div>
---------------
HTMLに書くのはこれだけです。デザインは当然CSSで行います。
上記では一旦、クラス名を「これが合っているかも？」と思うHTML５のセクション名になぞらえてつけていますが、これをHTML５に変換したときに、齟齬が生まれないか、ということが知りたいのです。

例えば、HTML５ではsection要素は上記でいうクラス名”section”、”article”、”aside”を全て含むことを想定としているのか、あるいは上記の"section"、"article"、"aside”はそれぞれ独立した要素として認識していいのか、ということです。

＞なぜ仕様書見ない？？？。すべて正確に書かれている。
たしかに正確です。
ただそれ以上に、読んでいて内容が全然理解できないからです。
何年もWebに触れてきている方には容易い内容かもしれませんが、私にとっては、図やわかりやすい言葉で置き換えて説明してくれるサイトからまずは理解していく方が効率が断然いいのです。

補足日時：2014/05/28 11:39
通報する
    • good
    • 0
    • 件
通報する
この回答へのお礼

少し疑問点の補足をします。

＞section:一般的な文書またはアプリケーション部である。
＞article: ブログのエントリや記事など、文書内で自己完結が可能な場所を示します。
例えば、
<div>
　<h1>今日の出来事</h1>
　　<p>...........</p>
</div>
という文書があったとして、これを「一般的な文書（section要素）」として見るか、「文書内で自己完結している（article）」として見るか、それがわからないのです。

また、
＞main: 文書内の支配的な内容のコンテナとして使用することができます。
これのsectionとの明確な違いもいまいちよくわかりません。

これらがどのように使い分けられているのかが知りたいのです。

通報する
お礼日時：2014/05/28 11:57

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報