En el mundo del desarrollo web, HTML y CSS son los pilares fundamentales que permiten dar forma y estilo a cualquier página web. Estos lenguajes marcan la diferencia entre una estructura funcional y una experiencia visual atractiva y bien organizada.

Qué es HTML

HTML (HyperText Markup Language) es un lenguaje de marcado utilizado para estructurar el contenido en la web. A través de él, se define la disposición y organización de texto, imágenes, videos y otros elementos que vemos en cualquier página web.

HTML no es un lenguaje de programación en sí mismo, sino un conjunto de etiquetas que describen el contenido y su estructura.

Cómo funciona HTML

HTML trabaja mediante el uso de etiquetas que, en conjunto, forman la estructura del documento web. Cada página HTML está compuesta por una serie de etiquetas que indican al navegador cómo mostrar el contenido.

Estas etiquetas van envueltas en signos de menor y mayor que (< y >), y muchas de ellas tienen su correspondiente etiqueta de cierre, que lleva una barra inclinada (/).

Etiquetas básicas de HTML

Vamos a revisar algunas de las etiquetas más comunes y esenciales que encontrarás en cualquier documento HTML:

• < html >. Esta etiqueta define el inicio de un documento HTML. Todo el contenido de la página debe ir dentro de esta etiqueta.
• < head >. Dentro de esta etiqueta se colocan los metadatos de la página web, como el título que aparecerá en la pestaña del navegador, enlaces a archivos CSS o scripts, y otros elementos que no se muestran directamente en la página.
• < body >. Esta etiqueta contiene todo el contenido visible de la página web. Dentro de esta etiqueta van textos, imágenes, listas, y todo lo que el usuario verá en pantalla.
• < h1 > , < h2 > . Las etiquetas de encabezado se utilizan para definir títulos y subtítulos dentro de la página web. La etiqueta < h1 > representa el título principal, y las etiquetas < h2> a < h6 > sirven para jerarquizar los diferentes niveles de subtítulos.
• < p >. Esta etiqueta se usa para definir párrafos de texto. Cada vez que necesitas insertar texto en bloques separados, < p > es la etiqueta que debes utilizar.
• < img >. Permite incluir imágenes en la página web. A diferencia de otras etiquetas, < img > no tiene una etiqueta de cierre, y requiere un atributo importante: src, donde se indica la ubicación del archivo de imagen.
• < ul >. Define una lista no ordenada, donde los elementos de la lista no siguen un orden específico. Cada ítem se representa con la etiqueta < li >.
• < ol >. A diferencia de la lista no ordenada, < ol > crea una lista ordenada, donde cada elemento está numerado.