記事の最後の次のページ、前のページ

質問

HTML5でHPを作ってるのですが、

1つ目の記事に関する内容を1つのページとして作成しました。

その作成した記事の最後に、前後のページのリンクを張りたいと考えています。

<考えている内容>
前のページへ　　　　トップへ　　　次のページへ

といったものを作成したいと考えているのですが、
どのように作るのが一般的なのでしょうか？

<footer id="navi_footer">
<a href="リンク先">前のページへ</a>
<a href="リンク先">トップへ</a>
<a href="リンク先">次のページへ</a>
</footer>

では芸がないかな・・・。と思っています。

何か言い作り方等を知っている方がおられましたが
ご教授よろしくお願いします。

回答No.1

ORUKA1951 · ベストアンサー

現状、IE8が結構存在することを考えると、未勧告のHTML5は次期尚早だと思います。
HTML5の新しい要素に未対応なブラウザの存在を考慮すると、大きく二つ方法があって
肥大化footerの場合
<div class="footer">
　<div class="nav">
　　<ul>
　　　<li><a href="./contentTable.html">目次</a></li>
　　　<li><a href="./01.html">前のページ</a></li>
　　　<li><a href="./01.html">前のページ</a></li>
　　　<li><a href="./01.html">前のページ</a></li>
　　　<li><a href="./index.html">索引</a></li>
　　</ul>
　</div>
　<address></address>
</div>
簡潔な場合
<div class="footer">
　<p>
　　<a href="リンク先">前のページへ</a> ---
　　<a href="リンク先">トップへ</a> ---
　　<a href="リンク先">次のページへ</a>
　</p>
</div>

とか。HTML5対応のブラウザのシェアが90%を超えるとそのまま・・
<div class="footer">→<footer>
　なお　

　詳しくは、HTML5の仕様書を読んでください。
4.4.9 The footer element — HTML5 ( http://www.w3.org/TR/html5/the-footer-element.html#the-footer-element )
4.4.3 The nav element — HTML5 ( http://www.w3.org/TR/html5/the-nav-element.html#the-nav-element )

＞では芸がないかな・・・。と
　HTML5に芸はありません。徹底的に文書構造をマークアップするだけです。HTML4.01で残っていたプレゼンテーションに関わる要素、属性はすべて--予告どおり廃止され--徹底的に文書構造にしたがってのみ、マークアップすることが、『究極の芸』です。

お礼

>HTML5に芸はありません。徹底的に文書構造をマークアップするだけです。
確かに仰られる通りだと思います。

記述いただいた簡潔なフッターを使っていきたいと思います。

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

回答No.2

dscripty

「芸がない」が見た目のことなら CSS で！
それでも足りなければ JavaScript。

見た目のことじゃないなら。。。

http://example.com/ がコンテンツのトップだとしたときの例。

<footer>
  <nav>
    <ul>
      <li><a rel="prev" href="./01.html">前へ:ページのタイトル</a></li>
      <li><a rel="next" href="./03.html">次へ:ページのタイトル</a></li>
      <li><a href="../">上へ:ページのタイトル</a></li>
      <li><a rel="contents" href="/toc.html">目次</a></li>
      <li><a rel="index" href="/index.html">索引</a></li>
    </ul>
  </nav>
</footer>

http://www.w3.org/TR/REC-html40/types.html#type-links

あと、どうしても見せたいコンテンツがないなら「トップ」へは、いらないかも。

お礼

どのようにHTMLの構造を作られるのかな。
と思い記述させていただきました。

大体考えていたものと同じようなので
安心しました。

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