📄
HTML
El Lenguaje de la Web
Guía Práctica para Principiantes
Aprende desde cero cómo funciona el lenguaje que da forma a todas las páginas web del
mundo
HTML: El Lenguaje de la Web | Guía para Principiantes
Introducción a HTML
El HTML (HyperText Markup Language) es el lenguaje estándar con el que se construyen todas las
páginas web del mundo. No es un lenguaje de programación en el sentido tradicional, sino un
lenguaje de marcado: su propósito es describir la estructura y el contenido de un documento web.
Cada vez que abres una página en tu navegador, lo que ves es el resultado de interpretar un
archivo HTML. Los navegadores como Chrome, Firefox o Edge leen ese archivo y lo traducen
visualmente en lo que conocemos como una página web.
💡 Dato clave
HTML fue creado por Tim Berners-Lee en 1991 como parte del proyecto World Wide Web.
Desde entonces ha evolucionado constantemente. La versión actual, HTML5, fue publicada en
2014 y sigue siendo el estándar hoy en día.
HTML trabaja siempre en conjunto con otras dos tecnologías web fundamentales: CSS (para los
estilos y diseño visual) y JavaScript (para la interactividad y comportamiento dinámico). Sin
embargo, HTML es el primero que debes aprender, ya que es la base de todo.
¿Qué puede hacer HTML?
Con HTML puedes estructurar y organizar contenido de muy diversas formas:
• Crear títulos, párrafos y secciones de texto
• Insertar imágenes, videos y audios
• Crear listas ordenadas y desordenadas
• Construir tablas para mostrar datos
• Crear formularios para recibir información del usuario
• Enlazar páginas entre sí mediante hipervínculos
• Organizar el contenido en secciones semánticas
Página 2 de 14
HTML: El Lenguaje de la Web | Guía para Principiantes
Capítulo 1: Estructura de un documento HTML
Todo documento HTML tiene una estructura básica fija que debe respetarse. Esta estructura le
indica al navegador cómo interpretar el archivo.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi primera página</title>
</head>
<body>
<h1>¡Hola, mundo!</h1>
<p>Esta es mi primera página web.</p>
</body>
</html>
Partes de la estructura
<!DOCTYPE html> — Declara al navegador que el documento es HTML5. Siempre debe ser la
primera línea.
<html> — Es el elemento raíz. Todo el contenido del documento va dentro de él.
<head> — Contiene metainformación: el título de la página, el juego de caracteres, enlaces a
estilos, etc. No se muestra visualmente.
<body> — Aquí va todo el contenido visible de la página: textos, imágenes, tablas, etc.
⚠️Importante
Aunque los navegadores son permisivos y pueden mostrar páginas con errores de estructura,
siempre es buena práctica escribir HTML correcto y bien formado.
Página 3 de 14
HTML: El Lenguaje de la Web | Guía para Principiantes
Capítulo 2: Etiquetas y Elementos
En HTML, todo gira en torno a las etiquetas (tags). Una etiqueta es una instrucción encerrada
entre corchetes angulares < y > que le indica al navegador qué tipo de contenido va a mostrar.
Anatomía de una etiqueta
<p class="intro">Este es un párrafo de texto.</p>
─┬─ ──┬──────── ──────────────────────── ──┬─
│ │ │
│ atributo etiqueta de cierre
│
etiqueta de apertura
La mayoría de los elementos HTML tienen una etiqueta de apertura y una etiqueta de cierre. El
contenido va entre ambas. Las etiquetas de cierre llevan una barra: </etiqueta>.
Algunas etiquetas son autocerradas (no necesitan cierre), como <br>, <img> o <input>.
Atributos
Los atributos añaden información adicional a una etiqueta. Se escriben en la etiqueta de apertura
con la forma nombre="valor":
<a href="[Link] target="_blank">Visitar Google</a>
<img src="[Link]" alt="Mi foto" width="300">
<input type="text" placeholder="Escribe tu nombre">
Página 4 de 14
HTML: El Lenguaje de la Web | Guía para Principiantes
Capítulo 3: Etiquetas Principales
A continuación se presentan las etiquetas más usadas en HTML, organizadas por categoría.
Etiquetas de texto y encabezados
Etiqueta Descripción
<h1> – <h6> Encabezados del nivel 1 (más importante) al 6 (menos importante)
<p> Define un párrafo de texto
<strong> Texto en negrita con énfasis semántico
<em> Texto en cursiva con énfasis semántico
<span> Contenedor en línea para estilizar fragmentos de texto
<br> Salto de línea dentro de un texto
<blockquote> Cita en bloque (texto resaltado como cita)
<code> Muestra código con fuente monoespaciada
Etiquetas de listas
HTML ofrece dos tipos de listas principales: la lista desordenada (con puntos) y la lista ordenada
(con números).
<!-- Lista desordenada -->
<ul>
<li>Manzana</li>
<li>Banana</li>
<li>Naranja</li>
</ul>
<!-- Lista ordenada -->
<ol>
<li>Primero</li>
<li>Segundo</li>
<li>Tercero</li>
</ol>
Página 5 de 14
HTML: El Lenguaje de la Web | Guía para Principiantes
Capítulo 4: Hipervínculos e Imágenes
Hipervínculos – La etiqueta <a>
Los hipervínculos son la esencia de la web: permiten navegar de una página a otra. Se crean con
la etiqueta <a> y el atributo href (Hypertext Reference).
<!-- Enlace a una página externa -->
<a href="[Link] Wikipedia</a>
<!-- Enlace que abre en una nueva pestaña -->
<a href="[Link] target="_blank">Google</a>
<!-- Enlace a otra página del mismo sitio -->
<a href="/[Link]">Ir a Contacto</a>
<!-- Enlace a una sección de la misma página -->
<a href="#seccion2">Ver sección 2</a>
Imágenes – La etiqueta <img>
Para insertar imágenes se usa <img>. Es una etiqueta autocerrada que requiere el atributo src (la
ruta de la imagen) y el atributo alt (texto alternativo para accesibilidad).
<!-- Imagen local -->
<img src="imagenes/[Link]" alt="Foto de perfil" width="200"
height="150">
<!-- Imagen desde internet -->
<img src="[Link] alt="Logo de la empresa">
♿ Accesibilidad
El atributo alt no es opcional. Los lectores de pantalla para personas con discapacidad visual
dependen de él para describir la imagen. Siempre escribe un texto descriptivo y útil.
Página 6 de 14
HTML: El Lenguaje de la Web | Guía para Principiantes
Capítulo 5: Tablas
Las tablas en HTML permiten mostrar datos en formato de filas y columnas. Aunque a veces se
usaron (incorrectamente) para diseñar layouts, hoy su uso correcto es exclusivamente para datos
tabulares.
Estructura de una tabla
<table>
<thead>
<tr>
<th>Nombre</th>
<th>Edad</th>
<th>Ciudad</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ana García</td>
<td>28</td>
<td>Madrid</td>
</tr>
<tr>
<td>Carlos López</td>
<td>34</td>
<td>Barcelona</td>
</tr>
</tbody>
</table>
Etiqueta Descripción
<table> Contenedor principal de la tabla
<thead> Agrupa las filas del encabezado de la tabla
<tbody> Agrupa el cuerpo principal de datos
<tfoot> Agrupa las filas del pie de la tabla
<tr> Table Row – define una fila
<th> Table Header – celda de encabezado (negrita y centrada por defecto)
<td> Table Data – celda de datos
Página 7 de 14
HTML: El Lenguaje de la Web | Guía para Principiantes
Capítulo 6: Formularios
Los formularios permiten al usuario ingresar datos que luego pueden enviarse a un servidor. Son
fundamentales en páginas de registro, inicio de sesión, búsqueda, contacto, entre otros.
Estructura de un formulario
<form action="/enviar" method="POST">
<label for="nombre">Tu nombre:</label>
<input type="text" id="nombre" name="nombre" placeholder="Ej: Ana">
<label for="email">Correo electrónico:</label>
<input type="email" id="email" name="email">
<label for="mensaje">Mensaje:</label>
<textarea id="mensaje" name="mensaje" rows="4"></textarea>
<label for="pais">País:</label>
<select id="pais" name="pais">
<option value="mx">México</option>
<option value="es">España</option>
<option value="ar">Argentina</option>
</select>
<button type="submit">Enviar formulario</button>
</form>
Tipos de input
Etiqueta Descripción
type="text" Campo de texto libre de una sola línea
type="email" Campo de correo electrónico (valida formato automáticamente)
type="password" Campo de contraseña (oculta los caracteres)
type="number" Campo numérico con controles de incremento
type="checkbox" Casilla de verificación (puede seleccionarse o no)
type="radio" Botón de opción (solo una opción por grupo)
type="file" Selector de archivos para subir documentos o imágenes
type="date" Selector de fecha con calendario
type="submit" Botón para enviar el formulario
type="reset" Botón para limpiar todos los campos del formulario
Página 8 de 14
HTML: El Lenguaje de la Web | Guía para Principiantes
Página 9 de 14
HTML: El Lenguaje de la Web | Guía para Principiantes
Capítulo 7: HTML Semántico
El HTML semántico es una de las características más importantes de HTML5. Consiste en usar
etiquetas que describen con palabras el tipo de contenido que contienen, en lugar de usar
etiquetas genéricas como <div> para todo.
¿Por qué es importante?
• Mejora la accesibilidad: los lectores de pantalla entienden mejor la página
• Mejora el SEO: los motores de búsqueda indexan mejor el contenido
• Facilita el mantenimiento del código
• Hace el código más legible y comprensible
Etiquetas semánticas principales
Etiqueta Descripción
<header> Encabezado de la página o de una sección
<nav> Zona de navegación (menús y enlaces de navegación)
<main> Contenido principal de la página (único por documento)
<section> Sección temática del contenido
<article> Contenido independiente (como una noticia o entrada de blog)
<aside> Contenido secundario relacionado (como una barra lateral)
<footer> Pie de página del documento o sección
<figure> Agrupa una imagen con su descripción
<figcaption> Descripción de una figura o imagen
<time> Representa una fecha u hora
Ejemplo de estructura semántica
<body>
<header>
<nav>
<a href="/">Inicio</a>
<a href="/sobre">Sobre nosotros</a>
</nav>
</header>
<main>
<article>
Página 10 de 14
HTML: El Lenguaje de la Web | Guía para Principiantes
<h1>Título del artículo</h1>
<p>Contenido del artículo...</p>
</article>
<aside>
<p>Artículos relacionados...</p>
</aside>
</main>
<footer>
<p>© 2024 Mi sitio web</p>
</footer>
</body>
Página 11 de 14
HTML: El Lenguaje de la Web | Guía para Principiantes
Capítulo 8: HTML, CSS y JavaScript
Las tres tecnologías fundamentales de la web son HTML, CSS y JavaScript. Cada una tiene un rol
específico y se complementan entre sí.
HTML CSS JavaScript
Estructura Estilo Comportamiento
El esqueleto La apariencia La interaccion
Enlazar CSS a un documento HTML
<!-- En el <head> del HTML -->
<link rel="stylesheet" href="[Link]">
<!-- También se puede escribir CSS directo (no recomendado) -->
<style>
h1 { color: orange; font-size: 2em; }
p { line-height: 1.6; }
</style>
Enlazar JavaScript a un documento HTML
<!-- Al final del <body> (recomendado) -->
<script src="[Link]"></script>
<!-- También se puede escribir JS directo -->
<script>
alert('¡Página cargada!');
[Link]('Hola desde JavaScript');
</script>
Página 12 de 14
HTML: El Lenguaje de la Web | Guía para Principiantes
Capítulo 9: Buenas Prácticas
Escribir código HTML de calidad no solo implica que funcione, sino que sea legible, accesible y
fácil de mantener. Aquí las prácticas más importantes:
1. Siempre usa DOCTYPE
<!DOCTYPE html> debe ser la primera línea de todo documento. Sin él, el navegador puede entrar
en 'modo quirks' y comportarse de forma impredecible.
2. Usa etiquetas semánticas
Prefiere <header>, <nav>, <main> sobre <div> para todo.
3. Añade siempre el atributo alt en imágenes
El atributo alt es esencial para la accesibilidad. Descríbelo con precisión.
4. Indenta tu código correctamente
El código bien indentado es más fácil de leer y depurar. Usa 2 o 4 espacios por nivel.
5. Cierra siempre tus etiquetas
Aunque el navegador pueda interpretar código sin cerrar, siempre cierra tus etiquetas para evitar
comportamientos inesperados: <p>texto</p>.
6. Escribe en minúsculas
Por convención, las etiquetas HTML se escriben en minúsculas. Aunque no es obligatorio, es la
práctica estándar.
7. Valida tu código
Usa el validador oficial del W3C ([Link]) para revisar que tu HTML sea correcto y no
tenga errores.
🎯 Consejo final
La mejor manera de aprender HTML es practicando. Abre un editor de texto, escribe código y
ábrelo en tu navegador. Herramientas como VS Code con la extensión Live Server hacen este
proceso muy sencillo.
Página 13 de 14
HTML: El Lenguaje de la Web | Guía para Principiantes
Capítulo 10: Resumen y Recursos
Resumen de lo aprendido
A lo largo de este libro has aprendido los fundamentos de HTML:
• Qué es HTML y cuál es su función dentro de la web
• La estructura básica de un documento HTML5
• Cómo usar etiquetas y atributos para marcar contenido
• Las etiquetas más importantes: textos, listas, tablas, formularios
• La importancia de los hipervínculos y las imágenes
• HTML semántico y por qué usarlo
• La relación de HTML con CSS y JavaScript
• Buenas prácticas para escribir código de calidad
Recursos para seguir aprendiendo
Etiqueta Descripción
MDN Web Docs [Link] — La referencia más completa sobre HTML, CSS
y JavaScript
W3Schools [Link] — Tutoriales interactivos ideales para principiantes
freeCodeCamp [Link] — Curso gratuito y completo de desarrollo web
W3C Validator [Link] — Valida que tu HTML cumpla los estándares oficiales
CSS-Tricks [Link] — Excelente recurso para aprender CSS junto a HTML
[Link] [Link]/frontend — Ruta de aprendizaje visual para desarrollo
frontend
¡Felicitaciones!
Ahora tienes los fundamentos para crear tus primeras páginas web. El siguiente paso es
practicar, practicar y practicar. Cada línea de código que escribas te acercará más a
convertirte en un desarrollador web.
Página 14 de 14