css - definicion - ¿Cuál sería el mejor método para codificar título/título para<ul> o<ol>, como si tuviéramos<caption> en<table>?

title html definicion

Question

¿Cuál sería el mejor método para codificar título / título de <ul> o <ol> ? Al igual que tenemos <caption> en <table> , y no queremos que sean negritas.

¿Esta bien?

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

¿O deberían usarse los encabezados siempre?

<h3|4|5|6>heading</h3|4|5|6>
<ul>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
</ul>

Answer 1

¡h3 es absolutamente una mejor solución que h2, h1 o h6!

1. Tienes que usar un nivel específico: si estás en una h1, usa h2, si estás en una h5, usa h6 (si estás en h6 ... hum, usa strong o em por ejemplo). No es una obligación sino una cuestión de accesibilidad ( Aquí, parte verde ).

2. No tiene que dar título a la lista ... porque este elemento no existe. Entonces el lector de pantalla no usará algo especial.

Por lo tanto, usar Hn es probablemente una de las mejores soluciones, pero seguramente no es un nivel específico.

Answer 2

¿Qué hay de hacer que el título sea un elemento de lista con diferentes estilos como ese?

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

y el CSS

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

adicionalmente, use un restablecimiento de CSS para establecer márgenes y rellenos a la derecha en el ul y li. here''s un buen restablecimiento de CSS. una vez que haya restablecido los márgenes y los rellenos, puede aplicar un margen en los elementos de la lista que no sean los de la clase de título, para sangrarlos.

Answer 3

Aunque esto es antiguo, lo estoy actualizando para otros que puedan encontrar esta pregunta cuando busquen más tarde.

@ Matt Kelliher:

Usar css : before y un atributo data- * para la lista es una gran idea, pero puede modificarse ligeramente para que sea más accesible para discapacitados también:

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;
}

Esto hará una lista con el pseudo elemento "encabezado" encima de él con el texto establecido en el valor en el atributo aria-label. A continuación, puede adaptarlo fácilmente a sus necesidades.

El beneficio de esto sobre el uso de un atributo data- * es que los lectores de pantalla leerán aria-label como una "etiqueta" para la lista, que es semánticamente correcta para su uso previsto de esta información.

Nota: IE8 admite: antes de los atributos, pero debe usar la única versión de dos puntos (y debe tener un doctype válido definido). IE7 no es compatible: antes, pero Modernizer o Selectivizr deberían solucionar ese problema por usted. Todos los navegadores modernos admiten el anterior: antes de la sintaxis, pero prefieren que se utilice la sintaxis :: anterior. En general, la mejor manera de manejar esto es tener una hoja de estilo externa para IE7 / 8 que use el formato anterior y una hoja de estilo general con el nuevo formato, pero en la práctica, la mayoría solo usa el antiguo formato de dos puntos ya que todavía es 100% cruzado navegador, incluso si no es técnicamente válido para CSS3.

Answer 4

Me gusta utilizar el css :before y un atributo data-* para la lista

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;
}

Esto hará una lista con el encabezado que es el texto que se especifica como el atributo de data-header de data-header la lista. A continuación, puede adaptarlo fácilmente a sus necesidades.

Answer 5

Siempre use etiquetas de encabezado para los encabezados. La pista está en el nombre :)

Si no quiere que sean audaces, cambie su estilo con CSS. Por ejemplo:

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, puede asociar el encabezado y la lista más claramente utilizando el elemento <section> . ( <section> no funciona correctamente en IE 8 y anteriores sin algunos JavaScript).

<section>
    <h1>heading</h1>

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

Podría hacer algo similar en 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>

Luego, modela así:

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