Listas Desordenadas

Supongamos que queremos mostrar en nuestra página web un pedido, por ejemplo una lista de las películas que hemos adquirido recientemente, las que nos gustaría comprar, o quizás es Navidad y nos gustaría realizar una lista con nuestros buenos deseos de todos los años.

HTML tiene unas posibilidades limitadas a la hora del tratamiento del texto. Las listas se usan para citar, numerar y definir cosas. Podemos clasificar las listas en tres tipos:

Listas desordenadas
Listas Ordenadas
Listas de Definición

Están englobadas por las etiquetas <ul>...</ul> (unordered list). Cada uno de los elementos de la lista comenzará con una etiqueta <li>, que puede o no llevar su correspondiente </li> de cierre.
Veamos un ejemplo:

 <p> Lenguajes en Internet </p>
 <ul>
  <li> Inglés 50%  </li>
  <li> Español 10 %  </li>
  <li> Francés 10%  </li>
 </ul>

Esto nos mostrará:

Lenguajes en Internet

Inglés 50%
Español 10 %
Francés 10%

Atributos de la etiqueta <ul>

La etiqueta <ul> dispone una serie de atributos, con los cuales es posible configurar el aspecto que va a tener la lista.

type="circle / disc / square". Define la viñeta a emplear en la lista. El parámetro tipo puede tomar los valores:
circle: punto redondeado negro y relleno
disc: línea círcular
square: cuadro relleno

Ejemplo (1)

 <p> Lenguajes en Internet  </p>
   <ul type="circle"> 
      <li> Inglés 50%  </li>
      <li> Español 10 %  </li>
      <li> Francés 10%  </li>
  </ul>

Esto nos mostrará:

Lenguajes en Internet

Inglés 50%
Español 10 %
Francés 10%

Ejemplo (2)

 <p> Lenguajes en Internet  </p>
    <ul type="square">
        <li> Inglés 50%  </li>
        <li> Español 10 %  </li>
        <li> Francés 10%  </li>
    </ul>

Esto nos mostrará:

Lenguajes en Internet

Inglés 50%
Español 10 %
Francás 10%

Importante: En algunos navegadores no funciona la opcián de cambiar el tipo de viñeta a mostrar y por mucho que lo intentemos, siempre saldrá el redondel negro.

Más atributos: ver los atributos comunes a todo el tipo de listas