Quelle est la manière la plus appropriée d'utiliser l'élément HTML "légende" de façon moderne?

Question

Sont-ils utilisés avec CSS? (non-tables?)

Comment sont-ils utilisés?

Veuillez donner des exemples.

Answer 1

La propriété légende côté CSS est utilisé pour indiquer où une légende sera positionné avec en ce qui concerne la table (c'est-à-dire au-dessus ou au-dessous du tableau).

Syntax: caption-side: <value> Possible Values: 

* top 
* bottom 
* inherit 

Valeur initiale: Haut applique à: Tables avec une légende Héritée: Oui Média: Exemple visuel:

légende {légende côté: en bas;
largeur: auto; text-align: à gauche; }

<style type="text/css"> 
caption { 
    caption-side: bottom; 
    width: auto; 
    text-align: left; 
    } 
</style> 
<table border="1"> 
    <caption>This is the caption</caption> 
    <tr> 
    <td>Try changing the values to see the effect it has on the position of the caption.</td> 
    </tr> 
    <tr> 
    <td><b>Note:</b> If this is not working, your browser might not support the caption-side property. At the time of writing, browser support for the caption-side property was limited.</td> 
    </tr> 
</table> 

Answer 2

Cet élément doit être utilisé pour fournir un titre court pour la table ; il ne doit pas être utilisé pour fournir une description de la structure de la table, comme vous pouvez le faire avec l'attribut de résumé de table .

L'élément caption fournit un moyen pour marquer le « contenu de manière visuelle (contrairement à la table « table suite attribut de synthèse s, qui est non visible). Il a un attribut spécifique à l'élément, align, qui est très rudimentaire et pas entièrement pris en charge (il est également obsolète, donc il devrait généralement être évité).

L'élément caption ne peut être utilisé qu'une seule fois par table et doit immédiatement suivre l'étiquette de début table. Bien que l'élément de légende semble être le balisage le plus approprié pour étiqueter un table, et en fait son intention est label une table de données de la même manière que vous pourriez fournir une légende pour une image dans un livre. Cependant, dans la plupart des médias imprimés, les légendes des illustrations, des images et des tableaux apparaissent généralement après l'élément, alors que l'élément de légende précède la table. Une combinaison d'options de style pauvres pour caption avec CSS et une mauvaise prise en charge de l'alignement a conduit de nombreuses personnes à préférer les tableaux précédés d'éléments d'en-tête 1-6 (par exemple, un élément h3). Cela permet à certaines personnes utilisant des technologies d'assistance, telles que les lecteurs d'écran, de passer d'un titre à l'autre dans le document (il existe des moyens de naviguer par en-tête et d'afficher une liste de rubriques sur une page). Cependant, il convient de noter qu'un titre est vraiment destiné à indiquer le contenu de toute la section qui suit le titre, jusqu'à l'endroit où se trouve l'en-tête suivant, plutôt qu'une partie distincte de la page, comme le caption. L'élément caption est le bon balisage pour identifier un table, alors, mais ne soyez pas surpris si vous voyez des gens utiliser des titres à la place.

Exemple

Voici une légende de tableau qui fournit un résumé visuel et se dirigeant tout en un:

<table border="1"> 
    <caption>Interest Rates for Young Saver Accounts</caption> 
    <tr> 
    <th>Account Type</th> 
    <th>Interest Rate</th> 
    </tr> 
    <tr> 
    <td>Smart</td> 
    <td>From 2%</td> 
    </tr> 
    <tr> 
    <td>Young Saver</td> 
    <td>From 1.6%</td> 
    </tr> 
</table>