Estructura de HTML: los componentes básicos
Comprenda la estructura básica de un documento HTML.
Estructura de HTML: los componentes básicos es una lección gratuita de HTML for Kids en CoddyKit. Esta es la lección 2 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 HTML for Kids, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de HTML for Kids incluye 4 lecciones en total.
Estructura de HTML: los bloques de construcción
¡Le damos la bienvenida a la segunda lección! Hoy aprenderemos sobre la estructura de un documento HTML y cómo encajan sus partes. Considérelo como aprender el esqueleto de una página web.
La estructura de un documento HTML
Un documento HTML tiene una estructura específica que el navegador entiende. Es como una receta que le indica al navegador qué hacer.
Las partes básicas de un documento HTML son:
- Declaración de tipo de documento: Indica al navegador que se trata de un documento HTML.
- Etiqueta HTML: Contiene todo el contenido de la página.
- Head: Contiene información sobre la página, como el título.
- Body: Contiene el contenido visible para el usuario.
¿Cómo es la estructura?
Así es la estructura básica de un documento HTML:
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<h1>Welcome to My Page</h1>
<p>This is the content of my web page.</p>
</body>
</html>
La declaración de tipo de documento
La declaración <!DOCTYPE html> aparece al principio de todos los documentos HTML. Indica al navegador que debe esperar HTML5, la versión más reciente de HTML.
¡Considérela el punto de partida de su receta HTML!
La etiqueta HTML
La etiqueta <html> es el contenedor principal de todo el código del documento. Le indica al navegador: «Todo lo que hay aquí dentro es HTML».
Así es como se ve:
<html>
<!-- All other HTML tags go here -->
</html>
La sección Head
La sección <head> contiene información sobre la página web que no es visible en la propia página. Por ejemplo:
- Título: El texto que se muestra en la pestaña del navegador.
- Información meta: Datos adicionales, como la descripción de la página.
Ejemplo:
<head>
<title>My Cool Web Page</title>
</head>
La sección Body
La sección <body> contiene todo lo que es visible para el usuario, como texto, imágenes y enlaces. Esta es el área de contenido principal.
Ejemplo:
<body>
<h1>Welcome!</h1>
<p>This is my awesome web page.</p>
</body>
Unir todas las partes
Este es un ejemplo completo de un documento HTML con todas las partes que acabamos de aprender:
<!DOCTYPE html>
<html>
<head>
<title>All About Me</title>
</head>
<body>
<h1>Hi, I’m a Web Creator!</h1>
<p>This is my first structured HTML page.</p>
</body>
</html>
¡Excelente trabajo!
¡Enhorabuena! Ha aprendido la estructura de un documento HTML. Ahora sabe cómo encajan todas las partes para crear una página web. En la próxima lección, comenzaremos a añadir contenido real a nuestras páginas. ¡Prepárese para crear su primera obra maestra web!
Preguntas frecuentes
¿La lección «Estructura de HTML: los componentes básicos» es gratis?
Sí — el texto completo de «Estructura de HTML: los componentes básicos» 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 HTML for Kids, actualiza a CoddyKit PRO. El curso de HTML for Kids incluye 4 lecciones en total.
¿Qué aprenderé en «Estructura de HTML: los componentes básicos»?
Comprenda la estructura básica de un documento HTML. Practicas HTML for Kids 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 HTML for Kids?
No se requiere experiencia previa. HTML for Kids 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 2 de 4.
¿Cuánto tiempo toma la lección «Estructura de HTML: los componentes básicos»?
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 HTML for Kids?
Sí. Cada lección de HTML for Kids 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
- ¿Qué es HTML?
- Estructura de HTML: los componentes básicos
- Etiquetas y elementos HTML
- Configuración de su primera página HTML