Guía básica HTML

ol

Descripción

Define una lista ordenada, puede ser por orden numérico o alfabético. Para definir los elementos que componen la lista debe usarse la etiqueta li. Las listas pueden anidarse y combinarse colocando nuevas listas dentro de etiquetas li. Se despliega por defecto en bloque.

Atributos destacados

reversed: Define un orden descendente para los elementos de la lista.
start: Especifica el valor inicial para el orden de la lista.

Etiquetas secundarias

li: Define un elemento de lista ordenada o desordenada

Sintaxis

<ol reversed start="4">
    <li>Elemento de lista</li>
    <li>Lista ordenada anidada
        <ol>
            <li>Lista ordenada anidada</li>
            <li>Lista ordenada anidada</li>
        </ol>
    </li>
    <li>Elemento de lista</li>
</ol>

Vista con estilos

Elemento de lista
Lista ordenada anidada
1. Lista ordenada anidada
2. Lista ordenada anidada
Elemento de lista

ul

Descripción

Define una lista desordenada, para establecer los elementos que componen la lista debe usarse la etiqueta li. Las listas pueden anidarse y combinarse colocando nuevas listas dentro de etiquetas li. Se despliega por defecto en bloque.

Etiquetas secundarias

li: Define un elemento de lista ordenada o desordenada

Sintaxis

<ul>
    <li>Elemento de lista</li>
    <li>Lista ordenada anidada
        <ol>
            <li>Lista ordenada anidada</li>
            <li>Lista ordenada anidada</li>
        </ol>
    </li>
</ul>

Vista con estilos

Elemento de lista
Lista anidada
- Lista anidada
- Lista anidada

table

Descripción

Establece la presencia de una tabla. Para definir su estructura se utilizan las etiquetas tr, th y td al interior de table. Se despliega por defecto en bloque. Es importante entender que, por buenas prácticas, su uso debe centrarse exclusivamente en la presentación de datos tabulares y no para maquetación de elementos

Atributos destacados

Si bien, table no cuenta con atributos básicos destacados, sus etiquetas secundarias, th y td presentan los siguientes:

colspan: Indica que el número de celdas definidas en el valor del atributo se combinarán horizontalmente. Es importante verificar las celdas combinadas y eliminar las sobrantes para evitar deformaciones en la tabla final.
rowspan: Indica que el número de celdas definidas en el valor del atributo se combinarán verticalmente. Es importante verificar las celdas combinadas y eliminar las sobrantes para evitar deformaciones en la tabla final.

Etiquetas secundarias

tr: Define una fila en la tabla.
td: Define una celda de datos, debe colocarse siempre dentro de un tr
th: Define una celda de encabezado, debe colocarse siempre dentro de un tr, preferentemente en el primero de la tabla.

Sintaxis

<table>
    <tr>
        <th>Celda de encabezado 1</th>
        <th>Celda de encabezado 2</th>
        <th>Celda de encabezado 3</th>
        <th>Celda de encabezado 4</th>
    </tr>
    <tr>
        <td rowspan="3">Celda combinada verticalmente (3 celdas)</td>
        <td>Celda de datos</td>
        <td>Celda de datos</td>
        <td>Celda de datos</td>
    </tr>
    <tr>
        <td>Celda de datos</td>
        <td colspan="2">Celda combinada horizontalmente (2 celdas)</td>
    </tr>
    <tr>
        <td>Celda de datos</td>
        <td>Celda de datos</td>
        <td>Celda de datos</td>
    </tr>
</table>

Vista con estilos

Celda de encabezado 1	Celda de encabezado 2	Celda de encabezado 3	Celda de encabezado 4
Celda combinada verticalmente (3 celdas)	Celda de datos	Celda de datos	Celda de datos
	Celda de datos	Celda combinada horizontalmente (2 celdas)
	Celda de datos	Celda de datos	Celda de datos