XHTML » Listas de la forma correcta

Este es un sencillo código que deberíamos tener dominado para respetar la estructura lógica de la heredación y anidación de elementos en el HTML. Siendo que el XHTML es una variación del HTML como una variación más estricta del mismo, tendremos el beneficio de que nuestras listas se vean perfectas tanto estructural como visualmente (con CSS) en cualquier vanegador y/o dispositivo.

Ya sea <ol> o <ul> aveces la dificultad está entre los items de lista <li>, porque no todos saben con certeza dónde ubicar la sublista.

Propuse ejemplos con enlaces ya que es lo más común que se puede encontrar en las listas y en lo que más se complica.

¿Cómo crear listas de la forma correcta?

Esta sería la estructura más básica, que corresponde a una simple lista:

<ul>
    <li><a href="..." title="...">...</a></li>
    <li><a href="..." title="...">...</a></li>
    <li><a href="..." title="...">...</a></li>
    <li><a href="..." title="...">...</a></li>
</ul>

Luego, si queremos agregar una sublista al segundo item debemos abrir </a> y </li> del mismo:

<ul>
    <li><a href="..." title="...">...</a></li>
    <li><a href="..." title="...">...</a>

    </li>
    <li><a href="..." title="...">...</a></li>
    <li><a href="..." title="...">...</a></li>
</ul>

Para poner la sublista que queramos en el mismo orden que se muestra al principio.

<ul>
    <li><a href="..." title="...">...</a></li>
    <li><a href="..." title="...">...</a>
        <ul>
            <li><a href="..." title="...">...</a></li>
            <li><a href="..." title="...">...</a></li>
            <li><a href="..." title="...">...</a></li>
        </ul>
    </li>
    <li><a href="..." title="...">...</a></li>
    <li><a href="..." title="...">...</a></li>
</ul>

Así sucesivamente, podemos jugar con las listas y hacer muchas dentro de ella.

<ol>
    <li><a href="..." title="...">...</a></li>
    <li><a href="..." title="...">...</a>
        <ul>
            <li><a href="..." title="...">...</a></li>
            <li><a href="..." title="...">...</a></li>
            <li><a href="..." title="...">...</a>
                <ul>
                    <li><a href="..." title="...">...</a></li>
                    <li><a href="..." title="...">...</a></li>
                    <li><a href="..." title="...">...</a></li>
                </ul>
            </li>
            <li><a href="..." title="...">...</a></li>
        </ul>
    </li>
    <li><a href="..." title="...">...</a></li>
    <li><a href="..." title="...">...</a></li>
    <li><a href="..." title="...">...</a>
        <ul>
            <li><a href="..." title="...">...</a></li>
            <li><a href="..." title="...">...</a></li>
        </ul>
    </li>
    <li><a href="..." title="...">...</a></li>
    <li><a href="..." title="...">...</a></li>
    <li><a href="..." title="...">...</a></li>
</ol>

La idea no sería hacer algo tan grotesco como el ejemplo.

¿Cómo NO crear listas de la forma correcta?

Este constituiría un mal ejemplo, donde la sublista se agrega después del item y no dentro de él:

<ul>
    <li><a href="..." title="...">...</a></li>
    <li><a href="..." title="...">...</a></li>
        <ul>
            <li><a href="..." title="...">...</a></li>
            <li><a href="..." title="...">...</a></li>
        </ul>
    <li><a href="..." title="...">...</a></li>
</ul>

Ya está, no hay otra forma de equivocarse, solo hay que respetar las respectivas anidaciones en el orden <ul> <li> <ul> <li>.

<ul>
    <li><a href="..." title="...">...</a></li>
    <li><a href="..." title="...">...</a>
        <ul>
            <li><a href="..." title="...">...</a></li>
            <li><a href="..." title="...">...</a></li>
            <li><a href="..." title="...">...</a></li>
        </ul>
    </li>
    <li><a href="..." title="...">...</a></li>
    <li><a href="..." title="...">...</a></li>
</ul>