Contenido del Artículo
¿Qué es HTML realmente?
HTML (HyperText Markup Language) es el esqueleto de todas las páginas web. No es un lenguaje de programación, sino de marcado que define la estructura del contenido mediante etiquetas.
Cada elemento en una página web (textos, imágenes, enlaces) está envuelto en etiquetas HTML que los navegadores interpretan para mostrar la información correctamente.
Lenguaje de marcado
Define elementos mediante etiquetas como <code><p></code> para párrafos
Estructura jerárquica
Organiza contenido en una estructura de árbol (padres e hijos)
Base de la web
Fundamento combinado con CSS para diseño y JavaScript para interactividad
HTML es accesible por naturaleza - cuando se usa correctamente, crea una web inclusiva para todos los usuarios.
Anatomía de un documento HTML
Todos los documentos HTML siguen una estructura básica:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Mi Primera Página</title>
</head>
<body>
<!-- Contenido visible -->
<h1>¡Hola Mundo!</h1>
<p>Mi primera página web</p>
</body>
</html>| Etiqueta | Función |
|---|---|
| <code><!DOCTYPE html></code> | Define la versión de HTML (HTML5) |
| <code><html></code> | Elemento raíz que contiene todo el documento |
| <code><head></code> | Metadatos, enlaces a recursos y título |
| <code><body></code> | Contenido visible de la página |
Crea tu primera página en 5 pasos
Vamos a construir una página web funcional paso a paso:
Paso 1
Abre un editor de texto (VS Code, Sublime Text o incluso Bloc de notas)
Paso 2
Copia la estructura básica del ejemplo anterior
Paso 3
Agrega contenido dentro del <code><body></code>
Paso 4
Guarda el archivo con extensión .html (ej: mi-pagina.html)
Paso 5
Abre el archivo en tu navegador haciendo doble clic
¡Felicidades! Acabas de crear una página web válida. El navegador interpreta tu HTML y muestra el contenido estructurado.
Etiquetas esenciales para comenzar
Domina estas etiquetas para crear contenido significativo:
El atributo alt en imágenes es crucial para accesibilidad, describiendo contenido a usuarios con discapacidad visual.
| Etiqueta | Uso | Ejemplo |
|---|---|---|
| <code><h1> a <h6></code> | Encabezados (jerarquía) | <code><h1>Título principal</h1></code> |
| <code><p></code> | Párrafos de texto | <code><p>Texto descriptivo</p></code> |
| <code><a></code> | Enlaces | <code><a href="https://ejemplo.com">Enlace</a></code> |
| <code><img></code> | Imágenes | <code><img src="foto.jpg" alt="Descripción"></code> |
| <code><ul></code>/<code><ol></code> | Listas | <code><ul><li>Elemento</li></ul></code> |
| <code><div></code> | Contenedor genérico | <code><div>Contenido agrupado</div></code> |
¿Qué aprender después?
Con esta base puedes explorar:
- CSS para estilizar tu página
- HTML semántico usando etiquetas como
<header>,<article>,<footer> - Validación de HTML con herramientas como el Validador W3C
- Accesibilidad web implementando ARIA y buenas prácticas
HTML es solo el comienzo. La combinación con CSS y JavaScript forma el trío fundamental del desarrollo web frontend.
