Etiquetas y elementos HTML
Aprenda qué son las etiquetas y los elementos, y cómo funcionan.
Etiquetas y elementos HTML es una lección gratuita de HTML for Kids en CoddyKit. Esta es la lección 3 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.
Etiquetas y elementos HTML
¡Le damos la bienvenida a la próxima lección! Hoy aprenderemos sobre las etiquetas y los elementos HTML. Estos son los bloques de construcción de todas las páginas web que creará.
¿Qué son las etiquetas HTML?
Las etiquetas HTML son palabras clave especiales encerradas entre corchetes angulares <>. Indican al navegador qué hacer con el contenido que contienen.
Ejemplo de una etiqueta:<h1>
Normalmente, las etiquetas aparecen en pares: una etiqueta de apertura y una etiqueta de cierre.
Ejemplo:
<h1>Hello</h1>¿Qué son los elementos HTML?
Un elemento HTML es la combinación de una etiqueta de apertura, contenido y una etiqueta de cierre.
Por ejemplo:
<h1>Welcome to My Page</h1>Tipos de etiquetas
Hay dos tipos principales de etiquetas:
- Etiquetas emparejadas: Tienen una etiqueta de apertura y otra de cierre. Ejemplo:
<p>Paragraph</p> - Etiquetas autocerradas: No necesitan una etiqueta de cierre. Ejemplo:
<img />
Etiquetas de uso frecuente
Estas son algunas etiquetas HTML básicas que utilizará con frecuencia:
<h1> to <h6>: Encabezados, del más grande al más pequeño<p>: Párrafo<a>: Enlace<img>: Imagen<br>: Salto de línea
Veamos un ejemplo:
<h1>Welcome!</h1>
<p>This is a paragraph of text.</p>
<a href="https://example.com">Click here</a>
<img src="image.jpg" alt="An example image" />
<br />Atributos en las etiquetas
Los atributos proporcionan información adicional sobre un elemento. Se colocan dentro de la etiqueta de apertura.
Ejemplo:
<a href="https://example.com"
target="_blank">Visit Example</a>
Anidamiento de etiquetas
Puede colocar una etiqueta dentro de otra. Esto se denomina anidamiento.
Ejemplo:
<p>This is a <strong>bold</strong> word.</p>
Orden de cierre de las etiquetas anidadas
Recuerde: Cierre siempre la etiqueta interna antes de cerrar la etiqueta externa.
Ejemplo: unir todas las partes
Este es un ejemplo que combina todo lo que hemos aprendido:
<!DOCTYPE html>
<html>
<head>
<title>My HTML Example</title>
</head>
<body>
<h1>Welcome to My Web Page</h1>
<p>This is a <strong>simple</strong> paragraph of text.</p>
<a href="https://example.com" target="_blank">Click here to learn more</a>
<br />
<img src="image.jpg" alt="A beautiful view" />
</body>
</html>¡Excelente trabajo!
¡Enhorabuena! Ha aprendido sobre las etiquetas, los elementos, los atributos y el anidamiento de HTML. Estos son los bloques de construcción de todas las páginas web que creará. En la próxima lección, escribiremos su primera página HTML con contenido real.
Preguntas frecuentes
¿La lección «Etiquetas y elementos HTML» es gratis?
Sí — el texto completo de «Etiquetas y elementos HTML» 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 «Etiquetas y elementos HTML»?
Aprenda qué son las etiquetas y los elementos, y cómo funcionan. 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 3 de 4.
¿Cuánto tiempo toma la lección «Etiquetas y elementos HTML»?
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