Ce que HTML 5 de la balise est le mieux adapté pour la pagination conteneur?

J'ai un div avec uniquement la pagination liées contetn. Quel est le meilleur élément/balise à utiliser?

J'ai regardé dans <nav> mais il n'est pas adapté comme la pagination n'est pas majeur navigation.

<div class="paginationBar">
    <button class="previous">Previous</button>
          <button>1</button>
          <button>2</button>
          <button>3</button>
    <button class="next">Next</button>
</div>

La div extérieure me semble qu'il pourrait être de côté car elle est liée à la section principale et est en dehors d'un article de l'élément.

D'autres suggestions pour améliorer /corriger mon code sont les bienvenus.

Bon, à mon avis, à moins que ce contenu paginé n'est pas le contenu principal, <nav/> est privilégiée... Et des liens à la place des boutons, et il n'y a aucune raison pour someElement parce que vous pouvez ajouter des nœuds là où vous le souhaitez entre les nœuds avec le code javascript de base...

OriginalL'auteur DominicM | 2012-12-11

  1. 6

    Je pense que vous n'avez pas besoin de cet élément. Vos boutons vont de pair et doivent rester ensemble, comme 

    <div class="paginationBar">
    <button class="previous">Previous</button>
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <button class="next">Next</button>
</div>

    Il est assez facile d'insérer la dynamique des boutons où vous le souhaitez sur le back-end ou front-end ( jQuery .insertAfter() par exemple )

    Dans le cas où vous n'avez pas le soutien de quelques vieux IE, vous pouvez vous débarrasser de classes sur vos boutons et l'utilisation :first-child - :last-child de style:

    <div class="paginationBar">
    <button>Previous</button>
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <button>Next</button>
</div>

    Mise à JOUR

    Parler sur le bouton contenant le plus approprié balise est probablement le <nav>.

    D'autres utilisations possibles de <nav>

    1. Table des Matières
    2. Les boutons précédent/suivant (ou la pagination)
    3. Formulaire de recherche
    4. Chapelure

    SOURCE

    vous êtes très corriger insertAfter(), q édité. Je n'ai pas besoin de soutien pour les anciens navigateurs, de sorte que pas de problème. La raison que j'ai mis dans les boutons est parce qu'ils wount lien vers une url(js fonction de la place). Par ailleurs, les éléments seront transformés en boutons par jquery ui de toute façon...
    Ma question est plus sur la première div et s'il serait plus sémantiquement correct pour l'utilisation de la réserve?
    Je vois.. mis à Jour la réponse
    Je suppose qu'il n'y a vraiment pas de bonne réponse ici, mais je pense que je vais aller avec nav depuis je n'ai plus 1 nav sur n'importe quelle page... Merci.
    Voici un décent article à propos de pourquoi ne pas traiter de la sémantique avec trop d'importance. Il est bon d'avoir, bien sûr, mais rien de catastrophique qui va vous arriver si vous avez une <div> au lieu de, disons, un <aside>

    OriginalL'auteur Zoltan Toth

  2. 14

    nav est le conteneur approprié si la pagination est la principale façon de naviguer dans le contenu que dans ancêtre de sectionnement élément (pas la page entière!). Voir ma réponse à une question similaire) avec quelques exemples.

    À l'aide de aside pour la pagination n'est probablement pas le bon élément. Toutefois, il pourrait être correct à utiliser nav à l'intérieur de aside, si elle est le principal navigation pour que aside contenu.

    Vous devez utiliser a au lieu de button, comme la pagination (comme son nom l'indique) conduit à un autre page/URL. Ensuite, vous pouvez utiliser le rel valeurs next et prev pour la pagination des liens. Si vous insistez sur l'utilisation de button mais vous avez toujours des pages séparées, vous pouvez utiliser le link élément de fournir ces rel valeurs.

    Ce que les inconvénients sont là lorsque vous n'utilisez pas les liens? Le problème est que je n'ai pas d'url à prévoir href donc je ne vois pas l'intérêt. C'est tout ajax/jquery et depuis que j'ai utiliser BEAUCOUP de filtres et des paramètres dans mes requêtes, il peut exister plusieurs millions url combinaisons si j'ai essayé de générer des urls...
    Eh bien, si toutes les "pages" sont sur la même URL, les visiteurs sans JS et à cet effet, tous les robots des moteurs de recherche ne pouvez pas visiter l'/lien/signet/analyser les autres "pages". Donc votre choix (button au lieu de a) serait correct (et donc vous ne pouvez pas utiliser la rel valeurs prev/next).

    OriginalL'auteur unor

  3. 3

    Comme d'autres l'ont souligné, le meilleur moyen est d'utiliser <nav> avec ancrage des balises. Voici un exemple avec 5 pages où le numéro de la page actuelle est de 3:

    <nav>
  <ul class="pagination">
    <li><a href="?page=1" rel="first">First</a></li>
    <li><a href="?page=2" rel="prev">Previous</a></li>

    <li><a href="?page=1">1</a></li>
    <li><a href="?page=2">2</a></li>
    <li class="active"><a href="?page=3">3</a></li>
    <li><a href="?page=4">4</a></li>
    <li><a href="?page=5">5</a></li>

    <li><a href="?page=4" rel="next">Next</a></li>
    <li><a href="?page=5" rel="last">Last</a></li>
  </ul>
</nav>

    La raison de l'ancrage, les balises sont tellement important, c'est que le rel attribut rend vos pages crawlable.

    Notez également que si votre environnement est bootstrap.css chargé alors il sera automatiquement reconnaître le pagination et active classes CSS. Vous devez fournir vos propres styles pour ces classes comme une solution de repli en cas bootstrap.css n'est pas chargé. Le résultat devrait ressembler à quelque chose comme ceci:

    Ce que HTML 5 de la balise est le mieux adapté pour la pagination conteneur?

    Maintenant, vous pouvez utiliser JavaScript pour intercepter le <a> de l'élément click événement et aller chercher la page suivante à l'aide de la technique qui vous convient.

    OriginalL'auteur jackvsworld

  4. 0

    Jetez un oeil à la XHTML Vocabulaire. Il comprend la relation de lien types de next, prev, etc.

    edit: lien types de relation en HTML 5

    Ce n'XHTML ont rien à voir avec ma question?
    Désolé, mais vous l'avez demandé "Quel est le meilleur élément/balise à utiliser?" et vous avez demandé un balisage sémantique pour identifier une page suivante pour la pagination. donc, s'il vous plaît re-pense que ma réponse! Juste un petit conseil: HTML en lui-même est seulement pour la structure sémantique!
    La Question était sur le HTML5 ne XHTML. Même la mise à jour de lien n'a rien à voir avec la question. Il n'a aucune mention de la pagination.
    w3.org/TR/html5/links.html#link-type-next et w3.org/TR/html5/links.html#link-type-prev vous mène le lien des relations de types "next" et "prev" qui @unor parle ainsi.
    Oui mais je n'ai pas utiliser des liens, j'ai utilisé des boutons. Aussi la question était de savoir quel élément est le meilleur pour la pagination conteneur (réponse nav).

    OriginalL'auteur zazi

  5. 0
    <ol class="paginationBar">
    <li><button class="previous">Previous</button></li>
          <li><button>1</button></li>
          <li><button>2</button></li>
          <li><button>3</button></li>
    <li><button class="next">Next</button></li>
</ol>

    Qui aide un peu

    OriginalL'auteur Hikari