HTML、CSSを勉強中の者です。
HTML5のセクションを示す要素(section・article・aside など)をどのように使い分けるべきなのかいまいちわからず、質問させていただきました。
様々なサイトで調べてみたのですが、サンプルを見るとどれも微妙に定義が違っているように見受けられ、理解が曖昧です。
あまり詳しくないサイトだと、単純にヘッダー部分はheader要素、フッター部分はfooter要素、タブメニューなどはnav要素、リンクなどはaside要素、そしてメインとなるコンテンツ部分はsection要素、といったことしか書かれていませんでしたが、別のサイトにはsection要素の中にarticle要素やaside要素が入ってくると書かれており、「???」という感じです。
例えばですが、添付した画像のようなサイトの場合は、下記の考え方で合っているのでしょうか?
header・・・ヘッダー(オレンジ)
nav・・・タブメニュー(薄青)
section・・・タイトル(緑)、コンテンツ(濃青)
article・・・記事(黄色)
aside・・・サブメニュー(紫)、リンク(ピンク)
footer・・・フッター(薄赤)
また、section要素やarticle要素の中にarticle要素やaside要素が入ってくる、というのはどのような場合でしょうか。
最初のうちにきちんと使い分けを覚えたいと思いますので、よろしくお願いします。
No.4ベストアンサー
- 回答日時:
>例えば、・・・【中略】・・・直接的にサービスには関わらないけれど載せたい記事は、・・・【中略】・・・独立した記事(article)として見なす、という認識で大丈夫でしょうか。
その場合は、asideのほうがよい場合もあるでしょう。asideだと、googleはたぶん無視する。articleだと拾っていく。
このあたりの使い分けは、内容と製作側の意図も絡むでしょう。
>ナビゲーションといわれるとそのHPのタブなどのメニューのみ、
navはページ内の目次も含みます。必ずしもウェブサイト内や他のページへのリンクではない。
逆にfooter内に書く簡単なリンクはnavで囲うべきではありません。footer自体にすでに意味があるので・・
お礼が遅くなりました。すみません。
慣れれば悩まずに使えるようになるのだと思いますが、現時点では難しいですね。
自分なりにもう少し調べてみます。
ありがとうございました。
No.3
- 回答日時:
読み返してみると誤解を与える書き方でした。
>これを「一般的な文書(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>
というサンプルがあります。
>【sectionは】
>・必然的に見出し<h>を伴うか期待される。
>・article, aside, navなどより適切な要素はないのか?
>・他所から独立した記事として参照される可能性がない
> 参照される場合はarticle
例えば、今回のようなとある店のHPにおける『お得な割引情報』などのサービスについての記事とかではなく、直接的にサービスには関わらないけれど載せたい記事(『従業員ブログ』や『無農薬野菜と産地直送の魅力』など)は、本コンテンツ(店のサービス内容)には入らない&Google検索などでその記事自体が他所から参照される可能性がある(必ずしも店のHPから辿らなければ見ることのない記事ではない)独立した記事(article)として見なす、という認識で大丈夫でしょうか。
navについては理解しました。
ナビゲーションといわれるとそのHPのタブなどのメニューのみ、と思っていましたが、他のページへのナビゲーションと考えれば納得です。
No.2
- 回答日時:
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
ご丁寧にありがとうございます。
いくつか質問させてください。
>・他所から独立した記事として参照される可能性がない
ということがarticle要素の特徴とした場合、
> <body>
> <article>
> <header></header>
> <section></section>
> <footer></footer>
> </article>
> </body>
という構造で一つのページを書いてしまったら、そのページは他所から参照されることはないのでしょうか?
articleが新聞でいうところのコラムのようなもの、というイメージはできるのですが、
>・article, aside, navじゃないのか
>・他所から独立した記事として参照される可能性がない
という二つの特徴が今ひとつ理解しがたいです。
特に、下記の『他所から独立した記事として参照される可能性がない』という点が、headerやfooterを含むことのできる独立した要素であるのであれば、参照される可能性があるのではないか、と感じています。
また、書いてくださったツリーの中で、
>section headding(期間限定お得な割引プラン!)
『header headding(○○新聞にこのお店が紹介されました!)』と同じ要素になるこちらの箇所が、articleではなくsectionの一部となっているのはなぜでしょうか。
同じく、『会社概要』などのサブメニューや『わくわく農家』などのリンクがnavで囲まれているのはどういった意味があるのでしょうか。
No.1
- 回答日時:
根本的に、間違っています。
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で書くと、
---------------
にこにこ食堂
メニュー
宴会プラン
アクセス
<-- 以下は添付画像には書かれていません -->
お品書き
豚汁定食
カツ丼定食
焼き魚定食
<-- ここまで -->
期間限定お得な割引プラン!
○○新聞にこのお店が紹介されました!
サブメニュー
・会社概要
・サイトマップ
・お問い合わせ
リンク
わくわく農家
のんびり牧場
---------------
のような感じになり、これを適切な文書構造にするためにマークアップをしていきますよね。
一旦HTML5ではなく、ただ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で行います。
上記では一旦、クラス名を「これが合っているかも?」と思うHTML5のセクション名になぞらえてつけていますが、これをHTML5に変換したときに、齟齬が生まれないか、ということが知りたいのです。
例えば、HTML5ではsection要素は上記でいうクラス名”section”、”article”、”aside”を全て含むことを想定としているのか、あるいは上記の"section"、"article"、"aside”はそれぞれ独立した要素として認識していいのか、ということです。
>なぜ仕様書見ない???。すべて正確に書かれている。
たしかに正確です。
ただそれ以上に、読んでいて内容が全然理解できないからです。
何年もWebに触れてきている方には容易い内容かもしれませんが、私にとっては、図やわかりやすい言葉で置き換えて説明してくれるサイトからまずは理解していく方が効率が断然いいのです。
少し疑問点の補足をします。
>section:一般的な文書またはアプリケーション部である。
>article: ブログのエントリや記事など、文書内で自己完結が可能な場所を示します。
例えば、
<div>
<h1>今日の出来事</h1>
<p>...........</p>
</div>
という文書があったとして、これを「一般的な文書(section要素)」として見るか、「文書内で自己完結している(article)」として見るか、それがわからないのです。
また、
>main: 文書内の支配的な内容のコンテナとして使用することができます。
これのsectionとの明確な違いもいまいちよくわかりません。
これらがどのように使い分けられているのかが知りたいのです。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・14歳の自分に衝撃の事実を告げてください
- ・架空の映画のネタバレレビュー
- ・「お昼の放送」の思い出
- ・昨日見た夢を教えて下さい
- ・ちょっと先の未来クイズ第4問
- ・【大喜利】【投稿~10/21(月)】買ったばかりの自転車を分解してひと言
- ・メモのコツを教えてください!
- ・CDの保有枚数を教えてください
- ・ホテルを選ぶとき、これだけは譲れない条件TOP3は?
- ・家・車以外で、人生で一番奮発した買い物
- ・人生最悪の忘れ物
- ・【コナン30周年】嘘でしょ!?と思った○○周年を教えて【ハルヒ20周年】
- ・ハマっている「お菓子」を教えて!
- ・最近、いつ泣きましたか?
- ・夏が終わったと感じる瞬間って、どんな時?
- ・10秒目をつむったら…
- ・人生のプチ美学を教えてください!!
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・都道府県穴埋めゲーム
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlのolやulなどlistにtitleや...
-
HTML属性での「""」 「''」違い
-
スペースを使わず文字位置を揃...
-
画面を拡大すると横幅が切れる
-
div要素が重なってします
-
ヘッダーとフッターだけ背景を...
-
html の divとtable の役割
-
XHTMLでループ処理のやり方
-
1時間30分を簡単に表したいで...
-
divを横に並べる方法
-
HTMLのJIS規格について
-
divの中に外部のHTMLを埋め込む
-
複数のボタンを等間隔に、かつ...
-
2段組レイアウト時に意図しな...
-
オシャレな区切り線はありませ...
-
HTML headerのcenterについて
-
含む含まないという概念自体の...
-
画像イメージの上下左右、欲し...
-
htmlの文字が縦書きになる
-
idの中のid指定
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlのolやulなどlistにtitleや...
-
HTML属性での「""」 「''」違い
-
html の divとtable の役割
-
複数のボタンを等間隔に、かつ...
-
<div id="container">の使いか...
-
div要素が重なってします
-
min-heightとheightの違いについて
-
1時間30分を簡単に表したいで...
-
ヘッダーとフッターだけ背景を...
-
ヘッダーを左右に二分割する方...
-
<!-- #BeginLibraryItemとは
-
h1に自分自身へのリンクを張...
-
html5でheaderの中にnav
-
画面を縮小するとカラムが落ち...
-
divを横に並べる方法
-
<div>テキスト</div>
-
スペースを使わず文字位置を揃...
-
h1のテキストサイズよりh2の方...
-
1サイト内にHTML5とXHTMLが混在...
-
オシャレな区切り線はありませ...
おすすめ情報