ordenadas - ¿Cómo agrupo semánticamente un encabezado con un UL en HTML?

ol html

Question

Tengo un documento HTML en el que me gustaría agrupar semánticamente el texto en la cabecera de un UL como un "encabezado". El intento inicial se ve así:

    <ul id="databases">
        Databases:
        <li>Microsoft SQL Server - 10+ years</li>
        <li>Sybase SQL Server - 5 years</li>
        <li>Oracle - 5 years</li>
    </ul>

El validador W3C señala que no se permite texto dentro de un UL, sino fuera de un LI. Podría poner el texto dentro de un LI, luego usar la pseudo-clase: first-child para encontrar el "encabezado" en mi CSS, pero claramente esta no es la forma semánticamente correcta.

¿Cómo manejo esto correctamente?

Answer 1

Aquí hay una respuesta alternativa:

<ul id="databases">
        <li style="list-style:none"><strong>Databases:</strong></li>
        <li>Microsoft SQL Server - 10+ years</li>
        <li>Sybase SQL Server - 5 years</li>
        <li>Oracle - 5 years</li>
    </ul>

la ventaja de esto es que puede usar varios de estos "encabezados" dentro de su UL sin dividirlos en UL separados y el espacio en blanco predeterminado que causa (o usar CSS para eliminar el espacio en blanco ...)

Answer 2

No debe establecerse en el primer li porque esto supondría una relación de hermanos con los elementos li anteriores, mientras que el encabezado es más importante en la jerarquía. Imagina lectores de pantalla, etc.

<h2>Databases:</h2>
<ul id="databases">        
    <li>Microsoft SQL Server - 10+ years</li>
    <li>Sybase SQL Server - 5 years</li>
    <li>Oracle - 5 years</li>
</ul>

Cambie el h2 por ah (n) dependiendo de la jerarquía en relación con los otros encabezados de la página. Para apuntar al encabezado en css, simplemente dale una clase si hay otros encabezados que compartirán el mismo estilo, por ejemplo

<h2 class="subHeader">Languages:</h2>
<ul id="languages">        
    <li>English</li>
    <li>Chinese</li>
    <li>French</li>
</ul>

De lo contrario dale una identificación

Answer 3

O anida tus listas como tal

<ul>
    <li>Databases</li>
    <li>
        <ul>
            <li>Microsoft SQL Server - 10+ years</li>
            <li>Sybase SQL Server - 5 years</li>
            <li>Oracle - 5 years</li>
        </ul>
    </li>
</ul>

Answer 4

Puede probar la etiqueta "Lista de definiciones" para sus propósitos de listado. Obtienes un código mucho más limpio.

<dl>
  <dt>Databases</dt>
   <dd>Microsoft SQL Server - 10+ years</dd>
   <dd>Sybase SQL Server - 5 years</dd>
   <dd>Oracle - 5 years</dd>
  <dt>Second heading</dt>
   <dd>Item 1</dd>
   <dd>Item 2</dd>
   <dd>Item 3</dd>
</dl>

Más información sobre la Lista de definiciones aquí http://www.w3schools.com/tags/tag_dl.asp

Answer 5

Según mi respuesta a esta pregunta , encuentro que la figure HTML5 y los elementos de figcaption más apropiados:

<figure>
    <figcaption>Databases</figcaption>
    <ul>
        <li>Microsoft SQL Server - 10+ years</li>
        <li>Sybase SQL Server - 5 years</li>
        <li>Oracle - 5 years</li>
    </ul>
</figure>

Answer 6

Solo como referencia, HTML 3.0 tenía <lh> :

<ul>
    <lh>This is a list header!
    <li>Item A
    <li>Item B
    <li>Item C
</ul>

Answer 7

Tal vez algo como esto:

<div>
 <span>Databases:<span>
 <ul id="databases">
        <li>Microsoft SQL Server - 10+ years</li>
        <li>Sybase SQL Server - 5 years</li>
        <li>Oracle - 5 years</li>
 </ul>
 </div>

Answer 8

<section>
    <h1>Databases:<h1>
    <ul>
        <li>Microsoft SQL Server - 10+ years</li>
        <li>Sybase SQL Server - 5 years</li>
        <li>Oracle - 5 years</li>
    </ul>
</section>

o mejor

<section>
    <h1>Databases:</h1>
    <dl>
        <dt>Microsoft SQL Server</dt> <dd>10+ years</dd>
        <dt>Sybase SQL Server</dt>    <dd>5 years</dd>
        <dt>Oracle</dt>               <dd>5 years</dd>
    </dl>
</section>

Tenga en cuenta que el h1 está limitado a la section , por lo que no es ambiguo en cuanto a si el contenido que sigue a la lista pertenece al encabezado Bases de datos . En otras palabras, el encabezado está dentro de la sección.