Balisage XHTML sémantiquement correct

Question

J'essaie juste de me familiariser avec l'utilisation du balisage XHTML sémantiquement correct.

J'écris juste le code pour un petit élément de navigation. Où chaque bouton a effectivement un titre et une description. J'ai pensé qu'une liste de définitions serait très utile et j'ai donc écrit ce qui suit

<dl>
    <dt>Import images</dt>
    <dd>Read in new image names to database</dd>

    <dt>Exhibition Management</dt>
    <dd>Create / Delete an exhibition </dd>

    <dt>Image Management</dt>
    <dd>Edit name, medium and exhibition data  </dd>
</dl>

Mais... je veux que ce soit 3 boutons, chaque bouton contenant le texte dt et dd. Comment puis-je faire cela avec le bon code ? Normalement, je devrais faire de chaque bouton une div et l'utiliser pour le comportement visuel du bouton (onHover et la sélection de la page actuelle).

Un conseil s'il vous plaît

Gracias

Answer 1

<ul>
    <li><a href="#" title="Read in new image names to database">Import images</a></li>
    <li><a href="#" title="Create / Delete an exhibition">Exhibition Management</a></li>
    <li><a href="#" title="Edit name, medium and exhibition data">Image Management</a></li>
</ul>

c'est suffisant. en utilisant <dl> pour la navigation n'est pas très astucieux. ou utiliser un <span> à l'intérieur du <li> avec la description. <dd> vous donneront bien des maux de tête puisqu'ils ne sont pas à l'intérieur de la <dt> et ne se préoccupe pas de sa position et de son style

Answer 2

L'utilisation de votre terme "bouton" me laisse un peu perplexe. Si vous voulez parler d'un lien, c'est possible :

<a href="dest.html" title="Read in new image names to database">Import images</a>

Cependant, si vous parlez de la balise input, une façon de procéder serait d'utiliser input type=image et de fournir une description alt.

Par exemple :

<input type="image" src="image.jpg" value="Import images" alt="Read in new image names to database"/>

Answer 3

Vous pouvez utiliser <label> au lieu de <dt> éléments :

<ul>
    <li>
        <a href="#">
            <label for="import-images">Import images</label>
            <span id="import-images">Read in new image names to database</span>
        </a>
    </li>
    <li>
        <a href="#">
            <label for="exhibition-management">Exhibition Management</label>
            <span id="exhibition-management">Create / Delete an exhibition</span>
        </a>
    </li>
    <li>
        <a href="#">
            <label for="image-management">Image Management</label>
            <span id="image-management">Edit name, medium and exhibition data</span>
        </a>
    </li>
</ul>

... le for de l'attribut <label> doit seulement correspondre à l'élément id d'un autre élément du document pour être valide.