HTML5のfooterに見出しを付けてもいいのか

解決済

質問者：satsumaimoboy
質問日時：2013/05/29 11:12
回答数：2件

<footer>
<h3>関連記事</h3>
<nav>
<li><a href="http://...">ワカメは髪に良いのかを実験！</a></li>
<li><a href="http://...">昆布も髪の成長に関係していることが判明！</a></li>
</nav>
</footer>

以上は、あるセクションのフッターですが

<footer>
<nav>
<h4>関連記事</h4>
<li><a href="http://...">ワカメは髪に良いのかを実験！</a></li>
<li><a href="http://...">昆布も髪の成長に関係していることが判明！</a></li>
</nav>
</footer>

のようにするべきですか？
<footer>に作者や投稿日時も含められるなら、「関連記事」と限定するのは誤りなのかなという疑問があります

通報する

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

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： ORUKA1951
回答日時：2013/05/29 13:49

<nav>はセクショニング要素です。

HTML4.01では
<div class="nav">とマークアップするよう推奨されていたものです。
　<li>要素は、<ul><ol>要素の内部にしか入れられませんから

<nav>
　<ul>
　　<li></li>

もしくは
<nav>
　<h2>なんたらかんたら</h2>
　<ol>
　　<li></li>

のようになります。

またfooterに入る場合は、基本navは使用しません。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
In particular, it is common for footers to have a short list of links to various pages of a site, such as the terms of service, the home page, and a copyright page. The footer element alone is sufficient for such cases; while a nav element can be used in such cases, it is usually unnecessary.
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［4.4 Sections — HTML5( http://www.w3.org/TR/2012/CR-html5-20121217/sect … )］より

　もう一点の間違い・・
　footerではなく、本文の関連情報ですからsection要素内に、個別に<section>か<aside>要素として入れるほうが良いでしょう。

<section>
・・・・・・・・・・
　<section id="RelatedInformation">
　　<h3>関連情報</h3>
　　　<ul>
　　　　<li></li>　

<section>

　<aside id="RelatedInformation">
　　<h3>関連情報</h3>
　　　<ul>
　　　　<li></li>　

- 0
- 件

通報する

この回答へのお礼

<aside>に<nav>なしで使うことにします
ご回答ありがとうございました

通報する

お礼日時：2013/05/29 19:57

No.2

回答者： ORUKA1951
回答日時：2013/05/29 19:36

より具体的に書くと

<body>
　<header>
　　<h1>見出し</h1>
　　<nav>
　　　<ol>
　　　　<li><a href=""></a></li>
　　　・・・・
　　　</ol>
　　</nav>
　</header>
　<section>
　　<h2>本文見出し</h2>
　　<p>記事</p>
　　<section>
　　　<h3>見出し</h2>
　　</section>
　　<aside>
　　　<h3>補足・関連情報</h3>
　　</aside>
　　<nav>
　　　<h3>関連情報
　　　<ol>
　　　　<li><a href=""></a></li>
・・・
　　　</ol>
　　</nav>
　</section>
　<footer>
　　<h2>文書情報</h2>
　　<p><a href=""></a> | <a href=""></a></p>
　　<address></address>
　</footer>
</body>
とかでしょうか？？？
　⇒HTML5( http://www.w3.org/TR/html5/ )
ここに実例が!!
　⇒Semantic navigation with the nav element | HTML5 Doctor( http://html5doctor.com/nav-element/ )