Estructura del documento: DOCTYPE, html, head y body
Escriba desde cero un documento HTML5 válido: la declaración DOCTYPE, la raíz html, head para los metadatos y body para el contenido.
Estructura del documento: DOCTYPE, html, head y body es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.
Todo documento HTML tiene el mismo esqueleto
Un documento HTML5 válido siempre comienza con una declaración DOCTYPE, contiene un elemento raíz html y, dentro de este, una sección head para los metadatos y una sección body para el contenido visible. Comprender esta estructura es el paso cero.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Page</title>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>La declaración DOCTYPE
<!DOCTYPE html> no es una etiqueta HTML, sino una instrucción para que el navegador muestre la página en modo de estándares. Sin ella, los navegadores recurren al «quirks mode», que muestra las páginas de forma incoherente. Colóquela siempre en la línea 1.
El elemento <html> y el atributo lang
El elemento <html> es la raíz del documento. Añada un atributo lang para declarar el idioma de la página. Los lectores de pantalla lo utilizan para elegir el motor de pronunciación correcto y los motores de búsqueda, para mostrar resultados localizados.
<html lang="en">
<!-- or -->
<html lang="fr">
<html lang="de">El elemento <head>
<head> contiene metadatos, es decir, información sobre la página en lugar del contenido de la página. Nada de lo que hay dentro de head es directamente visible para los usuarios, pero afecta a la forma en que el navegador y los motores de búsqueda tratan la página.
Etiquetas meta charset y viewport
<meta charset="UTF-8"> indica al navegador que debe decodificar el archivo como UTF-8, lo que permite utilizar todos los caracteres internacionales. <meta name="viewport"> hace posible el diseño adaptable en dispositivos móviles.
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">El elemento <title>
El texto de <title> aparece en la pestaña del navegador, los marcadores y los resultados de los motores de búsqueda. Manténgalo conciso (50–60 caracteres), descriptivo e incluya el nombre de la marca al final.
<title>Getting Started with HTML | CoddyKit</title>Enlazar CSS y fuentes
Enlace las hojas de estilos externas con <link> dentro de head. Utilice rel="stylesheet" y el href correcto. Google Fonts y otros servicios de fuentes también se enlazan de esta manera.
<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter&display=swap" rel="stylesheet">El elemento <body>
Todo lo visible en la página se encuentra dentro de <body>: encabezados, párrafos, imágenes, botones, formularios y scripts. El body es lo que el usuario ve y con lo que interactúa.
Etiquetas script: dónde colocarlas
Coloque <script src="app.js" defer></script> en <head>. El atributo defer descarga el script en paralelo y lo ejecuta después de que se haya analizado por completo el HTML; es la opción predeterminada más segura.
<head>
<script src="app.js" defer></script>
</head>Comentarios en HTML
Utilice <!-- comment --> para añadir notas a su HTML. Los comentarios no se muestran a los usuarios, pero son visibles en la vista del código fuente. Úselos para explicar la intención, marcar secciones o desactivar temporalmente código durante la depuración.
<!-- Navigation section -->
<nav>
...
</nav>
<!-- End navigation -->Validación: W3C Validator
Introduzca su HTML en validator.w3.org para comprobar si hay errores. Un HTML válido reduce las incoherencias entre navegadores, ayuda a los lectores de pantalla a analizar correctamente la página y demuestra un trabajo profesional.
Comprobación rápida
¿Dónde debe colocarse la etiqueta <meta charset="UTF-8">?
Repaso: el esqueleto del documento HTML
Todo archivo HTML necesita: → →
(charset, viewport, title, enlaces CSS) → (todo el contenido visible). Este esqueleto garantiza la coherencia entre navegadores, la accesibilidad y una indexación SEO adecuada.Preguntas frecuentes
¿La lección «Estructura del documento: DOCTYPE, html, head y body» es gratis?
Sí — el texto completo de «Estructura del documento: DOCTYPE, html, head y body» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Frontend Academy, actualiza a CoddyKit PRO. El curso de Frontend Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Estructura del documento: DOCTYPE, html, head y body»?
Escriba desde cero un documento HTML5 válido: la declaración DOCTYPE, la raíz html, head para los metadatos y body para el contenido. Practicas Frontend Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Frontend Academy?
No se requiere experiencia previa. Frontend Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.
¿Cuánto tiempo toma la lección «Estructura del documento: DOCTYPE, html, head y body»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Frontend Academy?
Sí. Cada lección de Frontend Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Estructura del documento: DOCTYPE, html, head y body
- Etiquetas semánticas: header, nav, main, article y footer
- Texto, imágenes, enlaces y listas
- Formularios: input, label y button