- <!DOCTYPE html>: Declaración del tipo de documento
- <html>: La raíz del documento
- <head>: Información de la página
- <body>: Contenido visible de la página
Cuando creamos una página web, necesitamos seguir una estructura específica para que los navegadores puedan interpretarla correctamente. En esta lección, aprenderemos sobre la estructura básica de un documento HTML y la función de cada una de sus etiquetas esenciales.
A continuación, puedes ver un ejemplo de la estructura mínima que debe tener cualquier página web:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Mi primera página</title>
</head>
<body></body>
</html>
Aunque este código parece simple, cada línea tiene un propósito. Vamos a explorarlas una por una.
<!DOCTYPE html>: Declaración del tipo de documento
La primera línea del documento HTML es <!DOCTYPE html>. Su función es informar al navegador que el archivo usa HTML5, la versión más reciente de este lenguaje.
<!DOCTYPE html>
No es una etiqueta HTML como las demás y no se muestra en la página; simplemente indica que estamos usando la versión estándar de HTML.
<html>: La raíz del documento
Todo el contenido de la página se encuentra dentro de la etiqueta <html>.
<html lang="es">
...
</html>
Aquí el atributo lang="es" indica que la página está escrita en español. Definir el idioma es importante porque ayuda a los buscadores y lectores de pantalla a interpretar el contenido correctamente.
Otros ejemplos de valores para lang:
| Idioma | Código |
|---|---|
| Inglés | en |
| Alemán | de |
| Francés | fr |
| Ruso | ru |
<head>: Información de la página
Entre las etiquetas <head> y </head> colocamos información que no se muestra directamente en la página, pero que es útil para el navegador y los buscadores.
Codificación de caracteres: <meta charset="UTF-8">
Este elemento le indica al navegador cómo interpretar los caracteres del texto:
<meta charset="UTF-8">
La codificación UTF-8 permite representar correctamente caracteres especiales como tildes (á, é, í, ó, ú) y símbolos específicos de otros idiomas.
<title>: Título de la página
El título de la página es el texto que aparece en la pestaña del navegador:
<title>Mi primera página</title>
Por ejemplo, si abrimos la página en un navegador, veremos el siguiente resultado:
<body>: Contenido visible de la página
Todo lo que el usuario puede ver en la página debe estar dentro de la etiqueta <body>. Esto incluye textos, imágenes, botones, enlaces y cualquier otro elemento visual.
Veamos una estructura sencilla con contenido dentro del <body>:
👉 Haz clic para ver el ejemplo: Ver ejemplo en CodePen
En este ejemplo el <body> contiene:
- Un título principal (
<h1>). - Una lista de temas sobre maquetación y CSS (
<ul>).
Resumen
<!DOCTYPE html>indica que estamos usando HTML5.<html>es la etiqueta que engloba toda la estructura del documento.- El atributo
lang="es"define el idioma de la página. - Dentro de
<head>ponemos información que no se muestra directamente pero que es esencial, como:<meta charset="UTF-8">para definir la codificación de caracteres.<title>para establecer el título de la pestaña del navegador.
- El contenido visible de la página debe estar dentro de
<body>. Aquí se incluyen todos los elementos que los usuarios pueden ver e interactuar, como encabezados, párrafos, imágenes, enlaces y botones.
