GUÍA COMPLETA DE HTML PARA PRINCIPIANTES EN 2025
Introducción a HTML para principiantes
HTML, o lenguaje de marcado de hipertexto, es la base de cualquier sitio web. Es el primer paso para quienes desean incursionar en el desarrollo web, ya que permite estructurar contenido de manera clara y organizada. En esta guía, exploraremos los fundamentos de HTML, desde sus elementos básicos hasta la creación de una página web simple, utilizando ejemplos prácticos. Este tutorial está diseñado para principiantes y actualizado con las mejores prácticas para el desarrollo web en 2025.
HTML no solo es fácil de aprender, sino que también es esencial para estructurar contenido en la web. A lo largo de esta guía, aprenderás cómo funcionan los elementos, cómo anidarlos correctamente, cómo usar atributos y cómo evitar errores comunes. Al final, construiremos una página web de ejemplo que muestra cómo aplicar estos conceptos en un proyecto real.
¿Qué es HTML?
HTML, que significa Hypertext Markup Language, es un lenguaje de marcado utilizado para estructurar contenido en la web. No es un lenguaje de programación, sino una forma de describir cómo se organiza el contenido, como textos, imágenes y enlaces, en una página web. Cada página web que visitas está construida con HTML, que define su estructura básica.
Por ejemplo, un documento HTML simple podría verse así:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Mi primera página</title>
</head>
<body>
<h1>Bienvenido a mi sitio</h1>
<p>Este es un párrafo de ejemplo.</p>
</body>
</html>
Este código crea una página con un título y un párrafo. La declaración <!DOCTYPE html> indica al navegador que se trata de un documento HTML5, mientras que <html lang="es"> especifica el idioma como español.
Elementos HTML y su estructura
Los elementos HTML son los bloques de construcción de una página web. Cada elemento está compuesto por etiquetas HTML, que pueden incluir una etiqueta de apertura, contenido y una etiqueta de cierre. Por ejemplo:
<p>Este es un párrafo.</p>
En este caso, <p> es la etiqueta de apertura, Este es un párrafo. es el contenido, y </p> es la etiqueta de cierre. Sin embargo, algunos elementos, conocidos como elementos vacíos, no tienen contenido ni etiqueta de cierre. Un ejemplo común es el elemento <img>:
<img src="imagen.jpg" alt="Descripción de la imagen" />
Aquí, el elemento <img> no necesita una etiqueta de cierre y se utiliza para insertar una imagen en la página.
Los elementos HTML son case-insensitive, lo que significa que <P> y <p> son equivalentes. Sin embargo, se recomienda usar letras minúsculas para mantener el código limpio y consistente con las convenciones modernas.
Anidamiento de elementos HTML
El anidamiento ocurre cuando un elemento HTML contiene otros elementos. Esto es fundamental para crear estructuras complejas en una página web. Por ejemplo:
<div>
<h2>Lista de frutas</h2>
<ul>
<li>Manzana</li>
<li>Naranja</li>
<li>Plátano</li>
</ul>
</div>
En este ejemplo, el elemento <div> contiene un título <h2> y una lista desordenada <ul>, que a su vez contiene elementos de lista <li>. Un anidamiento incorrecto, como cerrar las etiquetas en el orden equivocado, puede causar errores en la visualización de la página:
<!-- Incorrecto -->
<div><h2>Título</div></h2>
<!-- Correcto -->
<div><h2>Título</h2></div>
Para evitar problemas, planifica la estructura de tu página antes de escribir el código. Puedes esbozar el diseño en papel o usar herramientas de diagramación para visualizar la jerarquía de los elementos.
Atributos HTML
Los atributos proporcionan información adicional sobre los elementos HTML y se colocan dentro de la etiqueta de apertura. Por ejemplo:
<img
src="https://ejemplo.com/imagen.jpg"
alt="Descripción de la imagen"
width="200"
/>
En este caso, el elemento <img> tiene tres atributos: src (ruta de la imagen), alt (texto alternativo) y width (ancho en píxeles). Los atributos generalmente tienen un formato de nombre=“valor”, separados por un signo igual.
Algunos atributos, llamados atributos booleanos, no requieren un valor. Por ejemplo:
<button disabled>Botón deshabilitado</button>
Aquí, el atributo disabled desactiva el botón sin necesidad de especificar un valor. La presencia del atributo indica un valor verdadero, mientras que su ausencia indica falso.
Elementos HTML más comunes
Existen más de 100 elementos HTML, pero la mayoría de los desarrolladores utilizan un subconjunto de los más comunes, que se pueden agrupar en categorías:
Elementos de sección
Estos elementos organizan el contenido en secciones lógicas:
<div>: Contenedor genérico para agrupar contenido.<header>: Representa la cabecera de una página o sección.<footer>: Contiene información de pie de página, como derechos de autor.<nav>: Define un bloque de navegación con enlaces.<main>: Contiene el contenido principal de la página.<section>: Agrupa contenido temáticamente relacionado.
Por ejemplo:
<header>
<nav>
<ul>
<li><a href="#inicio">Inicio</a></li>
<li><a href="#acerca">Acerca</a></li>
</ul>
</nav>
</header>
Elementos de texto
Estos elementos estructuran el contenido de texto:
<h1>a<h6>: Títulos de diferentes niveles.<p>: Párrafos de texto.<ul>: Lista desordenada.<ol>: Lista ordenada.<li>: Elemento de lista.
Ejemplo:
<h1>Título principal</h1>
<p>Este es un párrafo de ejemplo.</p>
<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
</ul>
Elementos de formularios
Los formularios permiten a los usuarios interactuar con la página:
<form>: Contenedor para formularios.<input>: Campo de entrada de datos.<button>: Botón para enviar o interactuar.<label>: Etiqueta para describir un campo.<textarea>: Área de texto multilínea.
Ejemplo:
<form>
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre" />
<button type="submit">Enviar</button>
</form>
Elementos de medios y enlaces
<img>: Inserta imágenes.<a>: Crea hipervínculos.
Ejemplo:
<a href="https://ejemplo.com">Visitar sitio</a>
<img src="imagen.jpg" alt="Descripción" />
Otros elementos
<br>: Inserta un salto de línea.<hr>: Crea una línea horizontal.
Ejemplo:
<p>Primera línea<br />Segunda línea</p>
<hr />
Elementos de bloque vs. en línea
Los elementos HTML se dividen en dos categorías: elementos de bloque y elementos en línea. Los elementos de bloque ocupan todo el ancho disponible y comienzan en una nueva línea, mientras que los elementos en línea solo ocupan el espacio necesario y no generan saltos de línea.
Por ejemplo:
<div>Este es un elemento de bloque.</div>
<span>Este es un elemento en línea.</span>
Los elementos en línea incluyen <span>, <a>, <img>, <input>, <button>, <label>, <textarea> y <br>. La mayoría de los demás son de bloque. Familiarizarse con esta distinción es clave para controlar el diseño de una página.
Cómo comentar en HTML
Los comentarios en HTML se utilizan para agregar notas o explicaciones en el código sin que se muestren en el navegador. Se crean con los marcadores <!-- y -->. Por ejemplo:
<!-- Esto es un comentario -->
<p>Este texto sí se muestra.</p>
Los comentarios son útiles para documentar el código o desactivar temporalmente secciones sin eliminarlas.
Uso de entidades HTML
Las entidades HTML permiten mostrar caracteres especiales que el navegador podría interpretar como código. Por ejemplo, para mostrar <p> como texto, usamos:
<p>La etiqueta <p> define un párrafo.</p>
Aquí, < representa < y > representa >. Esto es útil para mostrar código HTML en la página sin que el navegador lo procese.
Uso de emojis en HTML
En 2025, los emojis son compatibles de forma nativa en HTML gracias al soporte de Unicode. Puedes incluirlos directamente en el texto:
<p>¡Hola! 😊🚀</p>
No se requieren configuraciones adicionales, ya que los navegadores modernos renderizan emojis correctamente.
Errores comunes de principiantes
Los principiantes en HTML suelen cometer errores que pueden evitarse con práctica. Aquí algunos de los más frecuentes:
-
Olvidar etiquetas de cierre: Siempre asegúrate de cerrar las etiquetas que no son vacías. Por ejemplo,
<p>Textoes incorrecto; debe ser<p>Texto</p>. -
Anidamiento incorrecto: Las etiquetas deben cerrarse en el orden inverso al que se abren:
<!-- Incorrecto -->
<div><span>Texto</div></span>
<!-- Correcto -->
<div><span>Texto</span></div>
- Uso inconsistente de comillas: Los valores de los atributos deben usar comillas dobles (
") o simples ('), pero no mezclarlas:
<!-- Incorrecto -->
<img src="imagen.jpg'>
<!-- Correcto -->
<img src="imagen.jpg" />
- Nombres de etiquetas incorrectos: Usa nombres en minúsculas y asegúrate de que sean válidos. Por ejemplo,
<ButTon>debería ser<button>.
Creación de un documento HTML
Para crear una página web, necesitas un documento HTML básico. En un editor de código como Visual Studio Code, crea un archivo llamado index.html con la siguiente estructura mínima:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Mi Página Web</title>
</head>
<body>
<h1>Bienvenido</h1>
</body>
</html>
Explicación de los componentes:
<!DOCTYPE html>: Declara que el documento usa HTML5.<html lang="es">: Define el idioma del documento como español.<head>: Contiene metadatos como el juego de caracteres (charset) y el título.<meta charset="UTF-8">: Permite el uso de caracteres internacionales.<meta name="viewport">: Optimiza la página para dispositivos móviles.<body>: Contiene el contenido visible de la página.
Construcción de una página de receta de panqueques
Para ilustrar cómo usar HTML en un proyecto real, crearemos una página web que muestre una receta de panqueques. Este ejemplo utiliza elementos comunes y sigue una estructura clara.
Estructura básica de la página
Comienza con la estructura mínima de un documento HTML y actualiza el título:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Receta de Panqueques Clásicos</title>
</head>
<body></body>
</html>
Dentro del <body>, agrega tres secciones principales: <header>, <main> y <footer>.
Construcción de la cabecera
La cabecera incluirá un logotipo y un menú de navegación:
<header>
<div>RECETAS DEL MUNDO</div>
<nav>
<ul>
<li><a href="#ingredientes">Ingredientes</a></li>
<li><a href="#pasos">Pasos</a></li>
<li><a href="#suscripcion">Suscripción</a></li>
</ul>
</nav>
</header>
El elemento <div> actúa como logotipo, mientras que <nav> contiene una lista de enlaces que apuntan a secciones específicas de la página mediante atributos id.
Construcción de la sección principal
La sección principal contendrá el título de la receta, una imagen y las listas de ingredientes y pasos:
<main>
<h1>Panqueques Clásicos</h1>
<img
src="https://images.unsplash.com/photo-1575853121743-60c24f0a7502"
alt="Panqueques"
width="250"
/>
<h2 id="ingredientes">Ingredientes</h2>
<ol>
<li><input type="checkbox" /> 1 ½ tazas de harina</li>
<li><input type="checkbox" /> 3 ½ cucharaditas de polvo de hornear</li>
<li><input type="checkbox" /> 1 cucharadita de sal</li>
<li><input type="checkbox" /> 1 cucharada de azúcar</li>
<li><input type="checkbox" /> 1 ¼ tazas de leche</li>
<li><input type="checkbox" /> 1 huevo</li>
</ol>
<h2 id="pasos">Pasos</h2>
<h4>Paso 1</h4>
<p>
En un tazón grande, tamiza la harina, el polvo de hornear, la sal y el
azúcar. Haz un hueco en el centro y agrega la leche, el huevo y la
mantequilla derretida; mezcla hasta que quede suave.
</p>
<h4>Paso 2</h4>
<p>
Calienta una sartén ligeramente engrasada a fuego medio-alto. Vierte
aproximadamente ¼ de taza de masa por panqueque. Cocina hasta que estén
dorados por ambos lados.
</p>
</main>
Los elementos <input type="checkbox"> permiten a los usuarios marcar los ingredientes, mientras que los atributos id aseguran que los enlaces de navegación funcionen correctamente.
Construcción del pie de página
El pie de página incluirá un formulario de suscripción y un texto de derechos de autor:
<footer>
<h6 id="suscripcion">Suscripción</h6>
<form onsubmit="alert('¡Suscrito!')">
<input type="text" placeholder="Ingresa tu correo" />
<button type="submit">Enviar</button>
</form>
<br />
<div>© Recetas del Mundo 2025</div>
</footer>
El formulario usa un atributo onsubmit para mostrar una alerta simple, y el símbolo de copyright se inserta con la entidad ©.
Código completo de la página
Aquí está el código completo para la página de la receta:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Receta de Panqueques Clásicos</title>
</head>
<body>
<header>
<div>RECETAS DEL MUNDO</div>
<nav>
<ul>
<li><a href="#ingredientes">Ingredientes</a></li>
<li><a href="#pasos">Pasos</a></li>
<li><a href="#suscripcion">Suscripción</a></li>
</ul>
</nav>
</header>
<main>
<h1>Panqueques Clásicos</h1>
<img
src="https://images.unsplash.com/photo-1575853121743-60c24f0a7502"
alt="Panqueques"
width="250"
/>
<h2 id="ingredientes">Ingredientes</h2>
<ol>
<li><input type="checkbox" /> 1 ½ tazas de harina</li>
<li>
<input type="checkbox" /> 3 ½ cucharaditas de polvo de
hornear
</li>
<li><input type="checkbox" /> 1 cucharadita de sal</li>
<li><input type="checkbox" /> 1 cucharada de azúcar</li>
<li><input type="checkbox" /> 1 ¼ tazas de leche</li>
<li><input type="checkbox" /> 1 huevo</li>
</ol>
<h2 id="pasos">Pasos</h2>
<h4>Paso 1</h4>
<p>
En un tazón grande, tamiza la harina, el polvo de hornear, la
sal y el azúcar. Haz un hueco en el centro y agrega la leche, el
huevo y la mantequilla derretida; mezcla hasta que quede suave.
</p>
<h4>Paso 2</h4>
<p>
Calienta una sartén ligeramente engrasada a fuego medio-alto.
Vierte aproximadamente ¼ de taza de masa por panqueque. Cocina
hasta que estén dorados por ambos lados.
</p>
</main>
<hr />
<footer>
<h6 id="suscripcion">Suscripción</h6>
<form onsubmit="alert('¡Suscrito!')">
<input type="text" placeholder="Ingresa tu correo" />
<button type="submit">Enviar</button>
</form>
<br />
<div>© Recetas del Mundo 2025</div>
</footer>
</body>
</html>
Conclusiones
HTML es la base del desarrollo web y un punto de partida esencial para cualquier persona interesada en crear sitios web. Con esta guía, has aprendido los fundamentos de HTML, incluyendo cómo estructurar elementos, usar atributos, anidar contenido y evitar errores comunes. La página de receta de panqueques demuestra cómo combinar estos conceptos para construir una página funcional y bien organizada.
Para llevar tus habilidades al siguiente nivel, considera aprender CSS para estilizar tu página y JavaScript para interactividad. Estos lenguajes complementan HTML y te permitirán crear sitios web modernos y dinámicos. Practica regularmente, experimenta con proyectos pequeños y consulta recursos como la documentación de Mozilla Developer Network para profundizar en cada elemento. ¡Sigue codificando y explorando el mundo del desarrollo web!
