Como hacer listas en HTML

Cuando quieres aprender sobre HTML lo primero que debes hacer es aprender a crear listas en HTML, debido a que son una de las funciones más utilizadas al usar este lenguaje, debido a que no simplemente se usa para crear listas en textos para que estén ordenados, sino que también se usa principalmente para crear los menús, cada página que contiene un menú prácticamente está realizado en una serie de listas en HTML, también si quieres dar una información de cierta manera que sea atractiva para el público se acomodan en listas y posteriormente se le dan estilos para que estas aunque no parezcan listas están programadas cómo tal.

Creación de listas en HTML

Las formas de crear listas en HTML son muy simples, existen básicamente dos formas, que es crear una lista ordenada y crear una lista no ordenada, que como su nombre lo dice, la ordenada va a contener una serie de información ya sea de números o de letras, y la no ordenada simplemente será un punto sobre otro punto.

Listas en HTML desordenadas

Una lista desordenada básicamente consta en una serie de información que está escrita una seguida de la otra, esta con una simple indentación o un punto para identificar qué es una lista, pero no tiene ningún orden específico.

Para crear una lista desordenada en HTML simplemente se utiliza la etiqueta <ul>.

Aunque la etiqueta <ul> simplemente se escribe para definir que se refiere a una lista, pero para describir cada una de la información que se quiere incluir a la lista se debe de colocar dentro de una etiqueta <li> que hace referencia a una sección de una lista.

Una lista desordenada es como la que se presenta continuación:

<h3>Unorder list</h3>
    <ul>
        <li>First Element</li>
        <li>Second Element</li>
        <li>Third Element</li>
    </ul>

De tal forma que si se crea una lista desordenada con tres elementos, cuando se ejecute en el navegador se verá de la siguiente manera.

Listas en HTML ordenadas

Una lista ordenada a diferencia de una lista desordenada contiene un orden específico de la información, ya sea por medio de números o por medio de letras, o incluso por medio de números romanos, depende de la información que se desee.

Para crear una lista ordenada solamente se tiene que colocar la etiqueta <ol> que hace referencia a una lista ordenada.

Al igual que con la etiqueta <ul> cuando se está utilizando la etiqueta <ol> también es necesario incluir dentro de ella la etiqueta <li>, que sirve para definir cada una de las opciones de esa lista y así poder separarlas una con la otra.

A continuación, se ve un ejemplo de cómo se debe de realizar una lista ordenada con las etiquetas en HTML.

<h3>Order list</h3>
    <ol>
        <li>First Element</li>
        <li>Second Element</li>
        <li>Third Element</li>
    </ol>

Y cómo se verá en navegador será de la siguiente manera, que cómo se puede observar por defecto se define una lista ordenada en base a números que empieza desde el uno hasta el número de elementos que contengan la lista.

También es posible definir una lista ordenada de diferente manera, por ejemplo si en vez de números se quieren utilizar letras del alfabeto, se tiene que utilizar el atributo “Type” en el cual se debe de colocar como se quiere mostrar la lista ordenada.

En el siguiente ejemplo se presenta una lista ordenada, pero en esta ocasión se va a ordenar por medio de letras, empezando desde la letra A.

<h3>Specific order list</h3>
    <ol type="A">
        <li>First Element</li>
        <li>Second Element</li>
        <li>Third Element</li>
    </ol>

Y cómo se observaría en el navegador seria de la siguiente manera.

Por último es importante mencionar que todas estas etiquetas de listas en HTML deben estar colocadas dentro de la etiqueta “Body” del código, para que esto pueda ser mostrado en el navegador de forma correcta y cualquier usuario lo pueda observar.

Si no sabes cómo se define una etiqueta “Body” o como se inicia un archivo HTML para escribir código para presentar información que se ha vista por el usuario y que sea vista por los navegadores, te recomiendo que visites este artículo donde explico como iniciar en HTML.

Como iniciar en HTML