Imagina que el HTML es como el esqueleto de una casa.
Las etiquetas son los ladrillos, las vigas y los pilares que lo construyen.
Sin ellas, solo tendríamos un terreno vacío.
Must Read
Etiquetas Básicas: Los Fundamentos
La etiqueta <html> es como el cimiento de la casa.
Encierra todo el código HTML, indicando que todo lo que está dentro pertenece a la página web.
Piensa en ella como la primera línea que define los límites de tu proyecto.
Después, tenemos la etiqueta <head>.
Esta es como el plano de la casa: contiene información importante pero que no se muestra directamente en la pantalla.
Aquí se define el título de la página (<title>), que aparece en la pestaña del navegador, y se enlazan archivos CSS (estilos) y JavaScript (interactividad).
La etiqueta <body> es donde vive el contenido visible de tu página web.
Es como el interior de la casa: contiene el texto, las imágenes, los videos y todo lo que el usuario ve.
Todo lo que quieres mostrar debe estar dentro de <body>.
Texto y Estructura: Dando Forma al Contenido
Para escribir texto, usamos las etiquetas de párrafo <p>.
Cada párrafo es como una habitación diferente en tu casa.
Puedes usar múltiples <p> para organizar tu texto en secciones legibles.
Las etiquetas de encabezado <h1>, <h2>, <h3>, etc., son como los títulos de las secciones de un libro.
<h1> es el título principal (el más importante), y <h2> es un subtítulo, y así sucesivamente.
Piensa en ellas como una jerarquía: <h1> es el título del capítulo, y <h2> son los subtítulos dentro de ese capítulo.
Imágenes y Enlaces: Añadiendo Elementos Interactivos
Para insertar una imagen, usamos la etiqueta <img>.
Es como colgar un cuadro en la pared.
Necesitas especificar la ubicación de la imagen (el atributo src) y una descripción alternativa (el atributo alt) para personas con discapacidad visual o si la imagen no se carga.
Los enlaces se crean con la etiqueta <a> (de "anchor").
Son como puertas que te llevan a otras páginas web o a diferentes secciones de la misma página.
El atributo href especifica la dirección (URL) a la que quieres enlazar.
Listas: Organizando Información
HTML también permite crear listas ordenadas (<ol>) y no ordenadas (<ul>).
Imagina que estás organizando una lista de compras.
<ul> (unordered list) es como una lista de compras sin un orden específico.
Cada elemento de la lista se define con la etiqueta <li> (list item).
<ol> (ordered list) es como una receta de cocina, donde el orden de los pasos es importante.
Igualmente, cada elemento se define con <li>, pero el navegador los numerará automáticamente.
Etiquetas de Contenedor: Agrupando Elementos
Las etiquetas <div> y <span> son contenedores genéricos.
<div> (division) crea un bloque, como una habitación en la casa.
Se usa para agrupar elementos relacionados y aplicarles estilos CSS.
<span> es un contenedor en línea, como un mueble dentro de una habitación.
Se usa para aplicar estilos a una pequeña porción de texto sin romper el flujo del texto.
Recuerda: El HTML es el esqueleto, el CSS es la decoración, y el JavaScript es la interactividad.
