Etiquetas HTML

Al realizar páginas web, es necesario tener en cuenta el manejo de las etiquetas HTML como parte del ecosistema de tecnologías frontend con el fin de definir la estructura de este tipo de documentos, en la siguiente entrada se expondrán algunas de las etiquetas más comunes para este propósito

Temas

0.1 Etiquetas básicas
0.2 Estructura de una página HTML

1 Tablas
2 Listas

Etiquetas básicas

Estás etiquetas son necesarias para definir la esturctura de un documento HTML que posteriormente será convertido en una página web

<!DOCTYPE html>

Esta etiqueta es necesaria para definir que es un docuemento escrito en HTML 5.

<html>

Esta etiqueta define el elemento raíz de una página HTML.

<head>

Elemento que contiene meta información acerca del documento html

<body>

Elemento que contiene la información visible en la página (contenido)

Estructura de una página HTML

A continuación se mostrará con más detalle la estructura del documento

Estructura html — tomado de https://www.w3schools.com/html/html_intro.asp

Tablas

Son elementos que permiten organizar la información entre filas y columnas

Sentido horizontal = Filas

Sentido vertical = Columnas

<table>

Elemento para definir una tabla en HTML

<tr>

Define una fila

<th>

Define el encabezado de una tablas

<td>

Define las celdas por fila

Codificación de una tabla html, con encabezado

Visualización en el navegador

Listas

Permiten ordentar la información por conjuntos de elementos y se dividen en tres grupos

Listas ordenadas

Permiten mostrar los elementos de la lista en orden y se definen por la etiqueta <ol> y cada uno de los items va con la etiqueta <li>; por lo tanto, los elementos de la lista irán precedidos por un número, una viñeta o una letra.

También existe una forma de invertir la lista, para ello se le asigna el atributo reversed

Tipos de ordenamiento

El tipo de ordenamiento es numérico (default), sin embargo existen otros tipos de decoraciones

Listas desordenadas

Son listas que no tienen un orden específico, por lo tanto no van precedidas de ninguna letra o número, para usa la etiqueta <ul> y para los itemsse denota con la etiqueta <li> construirla .

Si se desea decorar una lista desordenada, es necesario adicionarle la propiedad mediante la propiedad css list-style-type

Listas de definición o descripción

Esta lista sirve para definir términos y se usan las siguientes etiquetas

<dl> Define que es una lista descriptiva
<dt> Define el término (nombre)
<dd> Define la difinición

Enlaces de referencia

HTML Quick
w3schools
Manual HTML