- ベストアンサー
<nav>に複数の<hgroup>を入れるのは
望ましくないことなのでしょうか？ 例えば <nav> <hgroup> <h2>川の魚</h2> <h3>アユ</h3> <h3>マス</h3> <h2>海の魚</h2> <h3>アジ</h3> <h3>イワシ</h3> </hgroup> を <nav> <hgroup> <h2>川の魚</h2> <h3>アユ</h3> <h3>マス</h3> </hgroup> <hgroup> <h2>海の魚</h2> <h3>アジ</h3> <h3>イワシ</h3> </hgroup> </nav> とするのは良くないのでしょうか？ ご回答よろしくおねがいします
- satsumaimoboy
- お礼率48% (13/27)
- HTML
- 回答数4
- ありがとう数1
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
明確に誤りです。!!! HTML5で導入された新しい要素は、「より文書構造を明確化するため」です。 ⇒The following elements have been introduced for better structure:( http://www.w3.org/TR/2011/WD-html5-diff-20110525/#new-elements ) ・navは、「他のページやそのページ内アンカーへのリンクをまとめるために使用」 ここは良いとして ・hgroupは複数h1～h6が必要なときに限り使用します。 ・h1～h2、hgroupはセクションの見出しです。 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ セクションの見出しを示します。 セクションには、見出しや記事を含みます。 この場合は <nav> <h2>魚類</h2> <ol> <li>川の魚 <ol> <li>アユ</li> <li>マス</li> </ol> </li> <li>海の魚 <ol> <li>アジ</li> <li>イワシ</li> </ol> </li> </ol> </nav> のようにマークアップすべきでしょう。 ★HTML(4以降!!)で最も重要なことは、「どのように表現するか(プレゼンテーション)」と「文書構造」の分離です。HTML3.2の時代に、どのように表示するかが重視された反省からHTML4.01が勧告されました。1999年!!のこの世界では太古。 注! hgroup これは、見出しが複数存在するときにグループ化する要素です。HTML5ではひとつのセクションに複数のh1～h6が存在し得ないからです。 しかし、例えばアユについて説明するページがあるとします。 <section> <h2>魚類</h2> <h3>川魚</h3> <p>ここで川魚とは、一生の大半を淡水域で生活する魚を言う。サケ類の降海形は含まない</p> <section> <h4>アユ</h4> <p>キュウリウオ目に分類される、川と海を回遊する魚で一生の1/3は汽水域を含む海洋で生活する。</p> ・・・・ </section> </section> ・・・と言う風には、書けませんから、 <section> <hgroup> <h2>魚類</h2> <h3>川魚</h3> </hgroup> <p>ここで川魚とは、一生の大半を淡水域で生活する魚を言う。サケ類の降海形は含まない</p> <section> <h4>アユ</h4> <p>キュウリウオ目に分類される、川と海を回遊する魚で一生の1/3は汽水域を含む海洋で生活する。</p> ・・・・ </section> </section> と書かなければなりません。しかし、これでは文書のアウトラインが変わってしまいます。 (複数の魚をまとめたページと差が出てしまう) そのため <section> <h2>魚類</h2> <section> <h3>川魚</h3> </hgroup> <p>ここで川魚とは、一生の大半を淡水域で生活する魚を言う。サケ類の降海形は含まない</p> <section> <h4>アユ</h4> <p>キュウリウオ目に分類される、川と海を回遊する魚で一生の1/3は汽水域を含む海洋で生活する。</p> ・・・・ </section> </section> </section> と書くべきとされています。 ⇒4.4.6 The h1, h2, h3, h4, h5, and h6 elements( http://www.w3.org/TR/2012/CR-html5-20121217/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements ) 【質問のnavと合わせると】下記のようになるでしょう。 これだと、機械にもきちんと文書構造が伝わりますし、自動的にアウトラインが生成できますね。 <section id="Fish"> <h2>魚類</h2> <section id="Freshwater_fish"> <h3>川魚</h3> </hgroup> <p>ここで川魚とは、一生の大半を淡水域で生活する魚を言う。サケ類の降海形は含まない</p> <section id="Ayu"> <h4>アユ</h4> <p>キュウリウオ目に分類される、川と海を回遊する魚で一生の1/3は汽水域を含む海洋で生活する。</p> ・・・・ </section> </section> <nav id="contentTable"> <h2><a href="#Fish">魚類</a></h2> <ol> <li><a href="#Freshwater_fish">川の魚</a> <ol> <li><a href="#Ayu">アユ</a></li> <li><a href="#Trout">マス</a></li> </ol> </li> <li><a href="./Sea_Fish.html">海の魚</a> <ol> <li><a href="./Sea_Fish.html#Japanese_horse_mackerel">アジ</a></li> <li><a href="./Sea_Fish.html#Sardine">イワシ</a></li> </ol> </li> </ol> </nav> </section>
その他の回答 (3)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
No.3です。 ＞１つのセクションにつき見出しは１つであり<hgroup>の中のもっとも高いランクの見出しがそのセクションの見出しとして機能するので<hgroup>が複数あると見出しが複数あることになってしまうから誤りだと言われているのでしょうか・・・？ いえ、HTML5ではh1→h6の数字ではなく、sectionの段階数でアウトラインが決定されます。h1～h6の数字は見出しのランクを決めるだけの意味しかなく。 『These elements have a rank given by the number in their name.( http://www.w3.org/TR/2012/CR-html5-20121217/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements )』 ⇒4.4.11 Headings and sections( http://www.w3.org/TR/2012/CR-html5-20121217/sections.html#headings-and-sections ) sectionはあらゆる階層の見出しを含むことが出来ますが ・すべてに統一してh1を使用するか ・階層に見合った見出しを使うか の何れかに整理することが強く推奨されています。 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ⇒4.4.11 Headings and sections( http://www.w3.org/TR/2012/CR-html5-20121217/sections.html#headings-and-sections ) ＞ところで最初の記述の<hgroup>のランクが２ですからその下のセクションのアユの見出しランクは４ではなく３では？ ＞それから途中から</hgroup>だけが書き込まれていますが誤って挿入したものですよね ＞あと最後の記述では<section id="Fish">の見出しランクが２でその中にある<nav>のランクも２になっているのですが・・・ (^^)書き直しておきます。 ★下記に非常に良い説明があります。 ⇒The section element | HTML5 Doctor( http://html5doctor.com/the-section-element/ ) <section id="Fish"> <h2>魚類</h2> <section id="Freshwater_fish"> <h3>川魚</h3> <p>ここで川魚とは、一生の大半を淡水域で生活する魚を言う。サケ類の降海形は含まない</p> <section id="Ayu"> <h4>アユ</h4> <p>キュウリウオ目に分類される、川と海を回遊する魚で一生の1/3は汽水域を含む海洋で生活する。</p> ・・・・ </section> <section id="Trout"> <h4>マス</h4> <p>降海型でないイワナやヤマメ</p> ・・・・ </section> </section> <nav id="contentTable"> <h3><a href="#Fish">魚類</a></h3> <ol> <li><a href="#Freshwater_fish">川の魚</a> <ol> <li><a href="#Ayu">アユ</a></li> <li><a href="#Trout">マス</a></li> </ol> </li> <li><a href="./Sea_Fish.html">海の魚</a> <ol> <li><a href="./Sea_Fish.html#Japanese_horse_mackerel">アジ</a></li> <li><a href="./Sea_Fish.html#Sardine">イワシ</a></li> </ol> </li> </ol> </nav> </section>
別に間違ってはいませんが、この内容でしたらそもそも <hgroup> 要素は不要(はっきり言ってムダ)だと思います。 削除してしまって良いのでは。
補足
なぜそう思われたのでしょう？せめて理由を書いてもらわないと、まったく説得力がないですよ？ <body>内が以上の内容だけだと勝手に思い込まれたのでしょうか？だとしたら確かに<h2>と<ul>だけで十分でしょうが それとも見出しを連続で作るとセクションが自動的に作成されてしまうことを知らない、なんてことはないですよね
- 112011
- ベストアンサー率0% (0/4)
少し習ったばかりの知識を使って実験してみました。 その結果、全く同じ画面が出たので悪くはないと思います。
お礼
> <nav>内に<hgroup>の数だけサブセクションがあると解釈されれば問題ないように思えるのですが と書いたのですが、正確には以下のようにする必要がありますね <nav> <h2>このページの見出しだよ</h2> <section> <hgroup> <h3>川の魚</h3> <h4>アユ</h4> ~~~~~~~~~ </hgroup> </section> <section> <hgroup> <h3>海の魚</h3> ~~~~~~~ <nav> しかしやはり <body> <h1>ぼくの魚図鑑</h1> <p>ぼくが知っている魚を教えるよ。</p> <nav> <hgroup> <h2>川の魚</h2> <h3>アユ</h3> <h3>マス</h3> <h2>海の魚</h2> <h3>アジ</h3> <h3>イワシ</h3> </hgroup> </nav> <section> <h2>川の魚</h2> <p>川にすんでいる魚だよ。</p> ~~~~~~~~~~~~ とだけした方が色々と無難ですね それかリストを使うか・・・ 回答ありあとっした
補足
回答ありがとうございます １つのセクションにつき見出しは１つであり<hgroup>の中のもっとも高いランクの見出しがそのセクションの見出しとして機能するので<hgroup>が複数あると見出しが複数あることになってしまうから誤りだと言われているのでしょうか・・・？ しかしそれでも<nav>内に<hgroup>の数だけサブセクションがあると解釈されれば問題ないように思えるのですが ところで最初の記述の<hgroup>のランクが２ですからその下のセクションのアユの見出しランクは４ではなく３では？ >to mask the h2 element (which acts as a secondary title) from the outline algorithm. とあることからも・・・ それから途中から</hgroup>だけが書き込まれていますが誤って挿入したものですよね あと最後の記述では<section id="Fish">の見出しランクが２でその中にある<nav>のランクも２になっているのですが・・・