Quelle serait la meilleure méthode pour code-tête/titre de <ul> ou <ol>Comme nous l'avons <caption> dans <table>?

Question

Quelle serait la meilleure méthode pour code-tête/titre de l' <ul> ou <ol>? Comme nous l'avons <caption> en <table>. et nous ne voulons pas en gras

Exemple en image:

C'est ok

<p> heading </p>
<ul> 
<li>list item </li>
<li>list item </li>
<li>list item </li>
</ul>

ou toujours les en-têtes doivent être utilisés?

<h/3/4/5/6> heading </h/3/4/5/6>
<ul> 
<li>list item </li>
<li>list item </li>
<li>list item </li>
</ul>

Answer 1

Si c'est vieux, je suis à jour pour les autres qui peuvent se trouver à cette question lors de la recherche plus tard.

@Matt Kelliher:

À l'aide de la css :avant et un data-* attribut de la liste est une excellente idée, mais peut être légèrement modifié pour être plus accessibles aux personnes handicapées ainsi:

HTML:

<ul aria-label="Vehicle Models Available:"> 
    <li>Dodge Shadow</li>
    <li>Ford Focus</li>
    <li>Chevy Lumina</li>
</ul>

CSS:

ul:before{
    content:attr(aria-label);
    font-size:120%;
    font-weight:bold;
    margin-left:-15px;
}

Cela permettra de faire une liste avec des "en-tête" pseudo-élément au-dessus d'elle avec un texte à la valeur de l'aria-label attribut. Vous pouvez facilement de style à vos besoins.

L'avantage de ce fil à l'aide de données* des attributs aria-label sera lu par les lecteurs d'écran comme un "label" pour la liste, qui est sémantiquement correct par rapport à l'utilisation de ces données.

Remarque: IE8 prend en charge :avant les attributs, mais doit utiliser le côlon version (et doit avoir un doctype valide définie). IE7 ne prend pas en charge :avant, mais Moderniste ou Selectivizr devrait résoudre ce problème pour vous. Tous les navigateurs modernes soutien le plus :avant de syntaxe, mais je préfère que l' ::avant de syntaxe être utilisé. Généralement la meilleure façon de gérer cela est d'avoir une feuille de style externe pour IE7/8 qui utilise l'ancien format et d'une feuille de style en utilisant le nouveau format, mais dans la pratique, la plupart suffit d'utiliser la vieille seul colon format car il est toujours à 100% de la croix-navigateur, même si techniquement pas valable pour les CSS3.

Answer 2

Toujours utiliser des balises d'en-tête pour les titres. L'indice est dans le nom :)

Si vous ne voulez pas qu'ils soient gras, utilisez CSS, par exemple

HTML:

<h3 class="list-heading">heading</h3>

<ul> 
    <li>list item </li>
    <li>list item </li>
    <li>list item </li>
</ul>

CSS

.list-heading {
    font-weight: normal;
}

En HTML5, vous pouvez associer le titre et la liste de plus en plus fortement à l'aide de la <section> élément. (<section> ne fonctionne pas correctement dans internet explorer 8 et versions antérieures sans un peu de JavaScript (si.)

<section>
    <h1>heading</h1>

    <ul>
        <li>list item </li>
        <li>list item </li>
        <li>list item </li>
    </ul>
</section>

Vous pourriez faire quelque chose de similaire dans le HTML 4:

<div class="list-with-heading">
    <h3>Heading</h3>

    <ul>
        <li>list item </li>
        <li>list item </li>
        <li>list item </li>
    </ul>
</div>

Ensuite, le style ainsi:

.list-with-heading h3 {
    font-weight: normal;
}

Answer 3

J'aime utiliser les css :before et data-* de l'attribut de la liste

HTML:

<ul data-header="heading"> 
<li>list item </li>
<li>list item </li>
<li>list item </li>
</ul>

CSS:

ul:before{
    content:attr(data-header);
    font-size:120%;
    font-weight:bold;
    margin-left:-15px;
}

Ce sera une liste avec les en-tête de qui est ce texte est précisé que la liste de l' data-header d'attribut. Vous pouvez facilement de style à vos besoins.

Answer 4

comment prendre la tête d'une liste d'éléments avec des styles différents comme

<ul>
 <li class="heading">heading</li>
 <li>list item</li>
 <li>list item</li>
 <li>list item</li>
 <li>list item</li>
</ul>

et le CSS

ul .heading {font-weight: normal; list-style: none;}

en outre, utiliser un reset CSS pour définir les marges et les rembourrages droit sur l'ul et li. voici un bon reset CSS. une fois que vous avez réinitialisé les marges externes et internes, vous pouvez appliquer un peu de marge sur la liste des éléments autres que le son avec l'en-tête de la classe, pour les mettre en retrait.

Answer 5

h3 est absolument une meilleure solution que h2, h1 ou h6 !

1. Vous devez utiliser au niveau spécifique : si vous êtes dans un h1, utilisez h2, si vous êtes dans une h5, utilisez h6 (si vous êtes dans un h6... hum, utilisez strong ou em par exemple). - Elle pas une obligation, mais une question d'accessibilité (Ici, la partie verte).

2. Vous n'avez pas à donner de titre à la liste... parce que cet élément n'existe pas. De sorte que le lecteur d'écran ne sera pas utiliser quelque chose de spécial.

Par conséquent, l'utilisation Hn est probablement l'un de la meilleure solution, mais certainement pas un niveau spécifique.