Balisage XHTML sémantiquement correct

Question

Essayez simplement d'utiliser le balisage XHTML sémantiquement correct. Il suffit d'écrire le code pour un petit élément de navigation. Où chaque bouton a effectivement un titre et une description. Je pensais que la liste de définition serait donc grand donc j'é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 ci-dessus pour être 3 boutons, chaque bouton contenant le texte dt et dd. Comment puis-je faire cela avec le bon code? Normalement, je voudrais faire de chaque bouton une div et l'utiliser pour le comportement du bouton visuel (onHover et la sélection de la page en cours).

Tout conseil vous plaît

Merci

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> 

des thats assez bon. en utilisant <dl> pour la navigation n'est pas très intelligent. ou utilisez un <span> à l'intérieur du <li> avec la description. <dd> vous donnera beaucoup de mal de tête, car ils ne sont pas à l'intérieur du <dt> et ne se soucient pas de sa position et le style

Answer 2

Je suis légèrement confus par l'utilisation de votre terme "bouton". Si vous voulez dire un lien, vous pouvez faire:

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

Si, cependant, vous dire la balise d'entrée, puis une façon de le faire serait d'utiliser le type d'entrée = image, puis 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> éléments 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> 

... l'attribut for de l'élément <label> doit seulement correspondre à la id d'un autre élément le document est valide.