[HTML] boutons de pagination : quelle balise ?

[Ter Rowan]

bonjour je finalise un module de tableau de classement paginé (pagination côté serveur => ie toutes les données ne sont pas coté client, je vais les chercher via ajax)

je veux avoir 4 boutons (première page / page précédente / page suivante / dernière page) ainsi qu'un input pour choisir la page, rien de bien novateur

ma question est assez simple, j'hésite entre plusieurs scenarii pour les 4 boutons :

1) balise <a> puis <img>
2) balise <a> avec en background l'image qui va bien
3) balise <button> avec en background l'image qui va bien
4) balise <img> directement

y en a certainement d'autres
que me conseillez vous ? aussi, dans le cas d'un <a>, est ce si pertinent que cela de mettre href=#, ou est ce le développement à la papy (et oui, je commence a me tasser :p

merci de vos avis éclairés !

[Xenos]

Salut,

<a> désigne une "ancre" HTML. Donc, si l'ancre en question n'est rattaché à rien (href="#"), elle n'a pas de sens.
Pour <img> vs CSS/background-image, <img> est utilisé si l'image a un sens sémantique dans la page (illustration d'un article par exemple), sinon, CSS/background est parfait. Dans ton cas, l'image semble être juste "pour faire joli", donc je dirai CSS/background-image. Sinon, avec <img>, pour rester dans l'accessiWeb 2.0, il te faudrait une balise alternative vide (alt=""), puisqu'il s'agit d'une image qui n'a pas de "fond" ou de sens profond, et je trouve cela totalement naze, d'avoir à mettre un attribut à "".
<img> est une balise a-réactive de base, en d'autres mots, pour la rendre réactive, il faut passer forcément par du javascript. Donc, si ton élément doit réagir, le "<img onclick=", c'est pas franchement adapté niveau accessibilité.

Button me semble être la bonne alternative, avec un background CSS. En effet, button marque une commande HTML, et ici, on est en plein dedans. Pour autant, ce n'est pas une ancre. Cela donnera donc une commande réactive, avec une image pour faire joli: cela me semble parfaitement adapté.

Je vais aller chercher les sources nécessaires à la justification de mon propos, et je reviens éditer ma réponse.

A noter que la solution optimale sera d'utiliser <a>, avec href="tableau.html?page=..." par exemple, de sorte que si javascript est inactif, le clic sur la commande de changement de page reste fonctionnel. Si javascript est activé, alors un onclick="return func();" empêcherait le navigateur de suivre le lien (ou une ligne de code, dans la fonction func(), pour stopper le bouillonnement de l'évènement "onclick", mais là, je ne sais plus comment faire).
Car, avec button, ce sera javascript obligé pour faire marcher la page (pas top niveau accessibilité).

---

<a>:

The <a> tag defines a hyperlink, which is used to link from one page to another (note: cela fonctionne aussi pour un hashtag).
The most important attribute of the <a> element is the href attribute, which indicates the link’s destination. (donc, href="#", c'est moche)

<img>:

A purely decorative image that doesn't add any information
In general, if an image is decorative but isn't especially page-specific, for example an image that forms part of a site-wide design scheme, the image should be specified in the site's CSS, not in the markup of the document. (donc, CSS/background-image pour une image décorative, et <img> pour une image dite "sémantique", c'est à dire apportant une information).

<button>:

Button state (note: signifie <button type="button">)
Represents a button with no additional semantics. (donc, il te faudra le coincer dans un "label" indiquant ce à quoi sert ce bouton).

Et un tag <button> peut être inséré en dehors d'un tag <form>:

A button element is valid anywhere in the document body where text-level markup may appear. Such an element need not have any relationship to a form element.

Je n'ai pas de ref HTML5, mais la référence HTML4 semble autoriser button n'importe où.

[Ter Rowan]

A noter cependant que les images auraient un sens sémantique : elles indiquent l action (donc avec alt =qqchose) aller a la premiere page , au lieu d un << , aller au précédent au lieu d un <

Donc pour moi y a quand meme un sens a l image, ce n est pas que du joli, c est un symbole + du joli

[Xenos]

Là, j'ai pas le temps d'expliquer pourquoi dans le détail , mais tu te trompes: l'image que tu utilises doit être un arrière-plan simple, et kle texte que tu as peut-être mis dans l'image doit être dans le document HTML. Le "texte dans une image" n'est pas une image, et l'information qu'il peut apporter n'est donc pas apporté par l'image elle-même. Une image (une vraie) apportant de l'information serait, par exemple, la photo de la tour Eiffel pour montrer à quoi elle ressemble.

Si le site est bien fait, tout élément est soit de la forme, soit du fond, jamais un mixe des deux, sinon, c'est de la soupe (ou un grumeau).

[niahoo]

Tu mets "<<" sur ton image et en alt tu met "revenir au début", je vois pas ou est l'erreur

[Ter Rowan]

Tu mets "<<" sur ton image et en alt tu met "revenir au début", je vois pas ou est l'erreur

valà c'est dans ce sens là que je dis que l'image porte l'info (avec son alt pour l'accessibilité)

je m'appuie là dessus : http://www.w3.org/wiki/HTML/Elements/img

[niahoo]

Ceci dit tu peux mettre une Tour Eiffel avec une rotation à -90° ça ferait une bonne flèche de début.

[Xenos]

Je vais essayer une autre approche explicative:
Pour l'instant, ton image est dans les tons ocres (par exemple), mais un jour, tu veux changer l'apparence (donc, la forme) du site et ajouter la possibilité d'avoir des tons violets (on s'en fout qu'on aime ou qu'on n'aime pas). Si ton image est dans le code HTML, tu vas devoir changer le code HTML pour seulement modifier la forme. Ce n'est pas une séparation complète entre forme et fond.

L'accessibilité sera respectée avec img/alt, ça, ok, mais la séparation complète fond / forme ne le sera pas.

A l'inverse, une image apportant du sens à un article (ta tour Eiffel à 0°, 90° ou 40° même si c'est un peu chaud) ne sera pas changée même si tu modifie le skin du site: l'image est alors informative, et dans un tel cas, elle s'insère très bien dans une balise img (voir une balise figure).

C'est sur ce point là que je trouve l'association button/img moins correcte que l'utilisation d'un CSS sur le bouton (bouton qui contient le texte "page suivante")

[niahoo]

ahah mais tu parlais de mettre l'image en background image, ok oui c'est mieux.

---

Ceci étant dit, les types qui changent le look du site changent généralement le HTML au passage, au moins pour ajuster. Notamment les types qui utilisent les trucs genre boostrap de twitter qui te pourrit le HTML avec des class="spanMachin"

[Xenos]

Des types roulent bourrés à 200Km/h à contre sens sur l'autoroute (surtout en Russie... /troll), mais ce n'est pour autant pas une bonne habitude