Go to main content
Bypass navigation bar Referencia HTML Tags HTML Tutoriales HTML
Bypass language selection
Bypass location bar

Location: Inicio > Referencia HTML > Tags HTML > Tag HTML ol

Bypass main content

Tag HTML ol

 Nota: Si no sabes lo que es un elemento/tag o cómo debes utilizarlo, te recomiendo que leas el tutorial "Tags y atributos en HTML", que puedes encontrar en la sección de tutoriales HTML.

Bypass main content

Descripción

El elemento HTML ol inserta una lista ordenada: un elemento de bloque que consiste en una secuancia de ítems enumerados (elemento HTML li).

Esta listas pueden ser anidadas, es decir, contener o estar contenidas por otras listas. De hecho, la versatilidad es tal, que también pueden anidarse con listas desordenadas (elemento HTML ul).

Para lograr un código correcto, las sub-listas deben ser insertadas dentro de los ítems (elemento HTML li) y no directamente como contenido de la lista padre.

Nora que los atributos "type", "start" y "compact" de este elemento han sido desaprobados en HTML 4.01 por su naturaleza presentacional. Un buen reemplazo puede ser logrado con hojas de estilo.

Ejemplos

Código
<p>Procedure</p>
<ol>
<li>Slice the peaches discarding the pits.</li>
<li>Put them into a pot with the sugar.</li>
<li>Bring to a boil and continue cooking for about 50 minutes, until the mixture is thick.</li>
</ol>
Vista

Procedure

  1. Slice the peaches discarding the pits.
  2. Put them into a pot with the sugar.
  3. Bring to a boil and continue cooking for about 50 minutes, until the mixture is thick.

Attributes

Ejemplos

Código
<p>Ingredientes</p>
<ul>
<li>Azúcar</li>
<li>Duraznos</li>
</ul>
<p>Procedimiento</p>
<ol>
<li>Corte los duraznos y descarte los carozos.</li>
<li>Póngalos en una olla con el azúcar.</li>
<li>Lleve a ebullición y continúe cocinando por 50 minutos, hasta que la mezcla se espese.</li>
</ol>
Vista

Ingredientes

  • Azúcar
  • Duraznos

Procedimiento

  1. Corte los duraznos y descarte los carozos.
  2. Póngalos en una olla con el azúcar.
  3. Lleve a ebullición y continúe cocinando por 50 minutos, hasta que la mezcla se espese.

Atributos

id (name)

El atributo "id" asigna un identificador al elemento asociado. Este identificador debe ser único en todo el documento y puede ser usado para referirse a este elemento en otras instancias (por ejemplo, desde un script del lado cliente).

<p id="parrafo1">Este es el primer párrafo, llamado "parrafo1". Para cambiar dinámicamente sus prpiedades usa este identificador.</p>

class (cdata)

El atributo "class" asigna un nombre de clase (o una lista de nombres de clases separadas por espacios) al elemento contenedor. Es usado junto con hojas de estilos y le dice al navegador la clase (o clases) a las que el elemento está asociado.

Una clase da atributos presentacionales a los elementos (lee más en el tutorial "Hojas de estilo en cascada").

<p class="referencias">Este artículo está basado en el libro "Viento en los árboles" de Jhon L. Brooks</p>
<p class="referencias importante">Este artículo está basado en el libro "Viento en los árboles" de Jhon L. Brooks... y es más importante que el anterior.</p>

style (style)

Este atributo es utilizado para definir atributos presentacionales para el elemento contenedor, y su valor debería estar compuesto por propiedades de hojas de estilo. Aunque en algunos casos es particularmente útil, es una mejor práctica poner los atributos presentacionales en archivos externos, relacionándolos a los elementos a través del atributo "class". De este modos, se mejora la separación de las partes semántica y presentacional de tu documento.

Puedes encontrar más información acerca de los atributos presentacionales en el tutorial "Hojas de estilo en cascada".

<p style="color: #0000FF; font-size: 12pt">Este es un párrafo con un estilo definido.</p>
<p>Y este es otro texto sin estilo.</p>

title (text)

El propósito de este atributo es proveer un título para el elemento. Su valor debe ser una descripción corta y precisa del contenido del elemento. Habitualmente, los navegadores muestran el contenido de este atributo en un recuadro al posar el mouse encima del contenido del elemento por un pequeño período de tiempo.

Código
<a title="HTMLQuick.com" href="http://www.htmlquick.com/es/">Código HTML</a>
Vista

lang (langcode)

Especifica el lenguaje del contenido de un elemento. El valor por defecto es "desconocido".

Al escribir documentos XHTML 1.0, el atributo usado para especificar el lenguaje de un elemento es "xml:lang". Para compatibilidad con los dos tipos de estándar ambos atributos pueden ser usados simultáneamente como en el ejemplo a continuación. Nota que en XHTML 1.1, el atributo "lang" ha sido completamente reemplazado por "xml:lang" y su uso ya no es válido.

<p lang="en" xml:lang="en">This is a paragraph in English.</p>
<p lang="es" xml:lang="es">Este es un párrafo en español.</p>

dir

Este atributo indica la dirección en que el texto del elemento debe ser leído. Esto incluye al contenido, los valores de los atributos y las tablas. Tiene dos valores posibles que son insensibles a mayúsculas/minúsculas:

  • RTL: derecha a izquierda.
  • LTR: izquierda a derecha.
<q lang="he" dir="rtl">...una cita en Hebreo...</q>

type

Este atributo ha sido desaprobado en HTML 4.01. Por lo tanto, su uso ya no es recomendado.

Indica cómo debe ser representada la numeración en la lista. Los valores posibles son:

  • 1: números arábicos (1, 2, 3,...).
  • a: letras en minúscula (a, b, c,...).
  • A: letras en mayúscula (A, B, C,...).
  • i: números romanos en minúscula (i, ii, iii,...).
  • I: números romanos en mayúscula (I, II, III,...).
<li type="disc">Tener un hijo</li>

start (number)

Este atributo ha sido desaprobado en HTML 4.01. Por lo tanto, su uso ya no es recomendado.

Indica el número en que debería comenzar la numeración de la lista, es decir, el número del primer ítem de la lista. el valor predeterminado es "1".

<ol start="3">
<li>Tercer ítem</li>
<li>Cuarto ítem</li>
</ol>

compact

Este atributo ha sido desaprobado en HTML 4.01. Por lo tanto, su uso ya no es recomendado.

Este atributo booleano indica al agente de usuario que debe representar la lista en modo compacto. La interpretación de la palabra "compacto" está librada a la interpretación de los agentes de usuario.

Recuerda que en XHTML, los atributos booleanos deben usar sus propios nombres como valor (por ejemplo, nombreatributo="nombreatributo").

<ol compact="compact">
<li>tener un hijo</li>
<li>Plantar un árbol</li>
</ol>

Eventos

  • onclick
  • ondblclick
  • onmousedown
  • onmouseup
  • onmouseover
  • onmousemove
  • onmouseout
  • onkeypress
  • onkeydown
  • onkeyup

Ve a la lista completa de eventos en HTML.

Diseño y desarrollo: Latitud29.com

Vínculos y logos|Contacto|Más allá de HTML|Herramientas y recursos|Mapa del sitio|Webmaster|Dona