¿Qué es una viñeta HTML?

Si un usuario desea poner una lista en una página web, hay dos opciones disponibles: una lista ordenada y una lista desordenada. La diferencia entre los dos es que con una lista ordenada, los elementos se muestran con un número o letra ascendente, mientras que se utiliza una viñeta HTML para los elementos en una lista desordenada. Cada tipo de lista tiene una etiqueta HTML diferente, con <OL> </OL> usado para listas ordenadas y <UL> </UL> usado para listas desordenadas.

Cuando un navegador web está representando una página web y se encuentra con la etiqueta <UL>, se le indica que sigue una lista. Cada elemento de la lista está precedido por la etiqueta del elemento de la lista, o <LI>. En cada <LI>, el navegador inserta una viñeta HTML para comenzar el nuevo elemento dentro de la lista. Al codificar una lista, es importante que la etiqueta <LI> se coloque delante de cada elemento. Además, no tiene una etiqueta de cierre, por lo que la siguiente etiqueta <LI> es la única forma en que el navegador sabe poner una nueva viñeta HTML.

El código para crear una lista con viñetas dentro de una página web tendrá el siguiente aspecto:

<UL>
<LI> Elemento de lista
<LI> Elemento de lista
<LI> Elemento de lista
</UL>

No hay límite para la cantidad de elementos que se pueden incluir en una lista. Codificar la lista correctamente asegurará que se muestre correctamente dentro del navegador web.

Cuando se trata de colocar una viñeta HTML al frente de los elementos enumerados, hay tres opciones diferentes disponibles. Las opciones disponibles son disco, círculo y cuadrado. La viñeta HTML predeterminada es un círculo rellenado, por lo que si no se incluye un tipo, el navegador web insertará automáticamente esa viñeta. Cuando una lista está incrustada dentro de una lista, la viñeta HTML para la lista incrustada es el disco.

El tipo de viñeta se puede cambiar para cada elemento de lista específico o para toda la lista. Para cambiar un elemento de lista específico, se agregaría el siguiente código: type = "square / disc / circle". Para un elemento de lista con una viñeta cuadrada, el código se leería de la siguiente manera: <LI type = "square">. Cambiar "cuadrado" a "disco" o "círculo" asegurará que se inserte la viñeta HTML deseada.

Para cambiar la viñeta utilizada para una lista completa, el atributo type se agrega a la etiqueta de lista desordenada. En este caso, si el usuario quería una lista que tuviera viñetas que fueran cuadrados, la etiqueta <UL> se escribiría de la siguiente manera: <UL type = "square">. Si los elementos de la lista se especifican usando solo la etiqueta <LI>, entonces todos tendrían una viñeta cuadrada. Agregar un tipo a la etiqueta <LI> cambiaría ese elemento de lista específico de la viñeta cuadrada a otra viñeta HTML.