Módulo 1: HTML5 Elementos y Atributos

Ya hablamos de qué es HTML5 y su estructura básica, pero ahora vamos a meternos más a fondo en tres partes clave: los elementos, los atributos, y cómo se dividen entre estructurales y de línea. Esto es como aprender a usar más herramientas de tu caja de Lego para construir cosas aún más geniales. ¡Vamos a ello!

Elementos de HTML – Los Bloques Básicos de tu Web

Los elementos son como los ladrillos de una página web. Cada uno tiene un trabajo específico y está definido por etiquetas (esas palabras entre < y >). Algunos tienen contenido dentro (como un párrafo), otros no (como una imagen). Lo importante es que trabajan juntos para armar la estructura y el contenido que ves en el navegador.

¿Cómo funcionan?

Etiqueta de apertura: <p> (dice «empieza aquí»).
Contenido: El texto o lo que quieras mostrar.
Etiqueta de cierre: </p> (dice «termina aquí»).
Anidamiento: Puedes poner elementos dentro de otros, como capas de una cebolla.

Ejemplo básico:

<p>Este es un párrafo con <strong>texto en negrita</strong>.</p>

<p> crea un párrafo.
<strong> (anidado dentro) pone parte del texto en negrita.
El navegador muestra: «Este es un párrafo con texto en negrita.»

Tipos de elementos

Con contenido: Tienen apertura, contenido y cierre. Ejemplo: <h1>Título</h1>.
Vacíos: No tienen contenido ni cierre, como <img> o <br> (salto de línea).

Anidamiento en acción

El anidamiento es cuando metes un elemento dentro de otro. Es súper común y hace que tu página tenga jerarquía, como un árbol: el tronco es <html>, las ramas son <body> o <head>, y las hojas son cosas como <p> o <a>.

Ejemplo de anidamiento:

<div>
    <h2>Mi Lista de Compras</h2>
    <ul>
        <li>Pan</li>
        <li>Leche</li>
        <li><strong>Café</strong> (¡urgente!)</li>
    </ul>
</div>

<div> es el contenedor principal (como una caja).
Dentro hay un título <h2> y una lista <ul>.
La lista tiene elementos <li>, y uno tiene <strong> para resaltar «Café».
Resultado: Un título seguido de una lista con «Café» en negrita.

Reglas importantes

Cierra en orden: Si abres <div> y luego <p>, cierra primero </p> y después </div> (como apilar platos: el último que pones, lo quitas primero).
No te saltees cierres: Aunque algunos navegadores «perdonan» errores, es mejor ser ordenado para evitar problemas.

Ejemplo mal cerrado (¡no hagas esto!):

<div>
    <p>Texto aquí
</div>
</p> <!-- Esto está mal, <p> debe cerrarse antes que <div> -->

Esto confunde al navegador y tu página puede verse rara.

Los Atributos – Personalizando tus Elementos

Los atributos son como los ajustes de tus elementos. Les das instrucciones extra para que hagan cosas específicas o se vean de cierta manera. Van dentro de la etiqueta de apertura y tienen este formato: nombre="valor".

¿Para qué sirven?

Añaden detalles (como la dirección de una imagen).
Cambian comportamientos (como abrir un enlace en una pestaña nueva).
Dan info extra (como descripciones para accesibilidad).

Ejemplos comunes

src: Dice dónde está un archivo (para imágenes o videos).

<img src="foto.jpg">

href: La URL a la que lleva un enlace.

<a href="https://www.google.com">Ir a Google</a>

alt: Texto alternativo para imágenes (útil si no carga o para lectores de pantalla).

<img src="perrito.jpg" alt="Un perrito feliz">

. id o class: Identifican elementos para usarlos con CSS o JavaScript.

<p id="parrafo-especial">Texto único</p>

style: Añade estilos directamente (aunque normalmente usas CSS aparte).

 <p style="color: blue;">Texto azul</p>

Ejemplo práctico con varios atributos

<a href="https://www.youtube.com" target="_blank" title="Videos geniales">Mira YouTube</a>

href: Lleva a YouTube.
target="_blank": Abre en una pestaña nueva.
title: Muestra un tooltip al pasar el ratón.
Resultado: Un enlace que dice «Mira YouTube» y te lleva a otro sitio sin cerrar tu página.

Atributos en formularios

Los formularios usan atributos para controlar cómo funcionan los campos:

<input type="text" placeholder="Escribe tu nombre" required>

type="text": Es un campo de texto.
placeholder: Muestra un texto guía que desaparece al escribir.
required: Obliga a llenarlo antes de enviar el formulario.

Consejo

Los atributos siempre van en la etiqueta de apertura, nunca en la de cierre.
Usa comillas alrededor de los valores ("valor"), aunque a veces funciona sin ellas (pero es buena práctica usarlas).

Elementos Estructurales y de Línea

En HTML, los elementos se dividen en dos tipos según cómo se comportan en la página: estructurales (o de bloque) y de línea. Es como la diferencia entre paredes grandes y decoraciones pequeñas en una casa.

Elementos Estructurales (de Bloque)

Estos son los «pesos pesados». Ocupan todo el ancho disponible y siempre empiezan en una nueva línea. Sirven para estructurar tu página en secciones grandes.

Ejemplos clave:

<div>: Una caja vacía para agrupar cosas.
<h1> a <h6>: Títulos de diferentes tamaños ( <h1> es el más grande).
<p>: Párrafos de texto.
<ul> y <ol>: Listas no ordenadas (con puntos) y ordenadas (con números).
<li>: Elementos dentro de una lista.
<section>: Una sección temática (como «Sobre mí»).
<header>: La cabecera de la página (logo, menú, etc.).
<footer>: El pie de página (contacto, derechos).

Ejemplo en acción:

<header>
    <h1>Mi Blog</h1>
</header>
<section>
    <h2>Última Entrada</h2>
    <p>¡Hoy aprendí HTML y estoy emocionado!</p>
</section>
<footer>
    <p>© 2025 - Yo</p>
</footer>

Cada elemento empieza en una nueva línea y organiza la página en bloques claros: cabecera, contenido y pie.

Elementos de Línea

Estos son más «pequeños» y se quedan en la misma línea que el texto o elementos alrededor. Sirven para detalles o cambios dentro de un bloque.

Ejemplos clave:

<a>: Enlaces a otros sitios.
<strong>: Texto en negrita.
<em>: Texto en cursiva (énfasis).
<span>: Un pedacito de texto para darle estilo o usarlo con JavaScript.
<br>: Salto de línea (sin cierre, es un elemento vacío).

<p>Me gusta <strong>aprender</strong> HTML y <a href="https://google.com">buscar</a> más info.</p>

<strong> y <a> no rompen la línea; todo sigue en el mismo párrafo.
Resultado: «Me gusta aprender HTML y buscar más info.»

Diferencia en práctica

<p>Primera línea<br>Segunda línea</p>
<div>Este es un bloque</div>
<div>Otro bloque</div>

<br> fuerza un salto dentro del párrafo.
Cada <div> aparece en una línea nueva, porque es de bloque.

Combinando ambos

Puedes mezclarlos para armar algo más complejo:

<section>
    <h2>Mis Hobbies</h2>
    <p>Me encanta <strong>programar</strong>, <em>leer</em> y <a href="#">viajar</a>.</p>
</section>

<section> y <h2> son estructurales (bloques).
<strong>, <em> y <a> son de línea, ajustándose dentro del párrafo.

Ejemplo ampliado para practicar

Aquí tienes una página que usa todo lo que vimos:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Mi Web Genial</title>
</head>
<body>
    <header>
        <h1>Bienvenidos a mi mundo</h1>
    </header>
    <section>
        <h2>Sobre mí</h2>
        <p>Soy <strong>Juan</strong>, y me gusta <em>crear</em> cosas.</p>
        <p>Mira mi <a href="https://github.com" target="_blank">GitHub</a>.</p>
    </section>
    <footer>
        <p>Contacto: <span style="color: blue;">juan@email.com</span></p>
    </footer>
</body>
</html>

Elementos: <header>, <section>, <p>, etc.
Atributos: lang, href, target, style.
Estructurales: <header>, <section>, <footer>.
De línea: <strong>, <em>, <a>, <span>.

Consejos finales

Experimenta: Cambia atributos como style="color: red;" o añade más etiquetas.
Piensa en bloques: Usa estructurales para organizar, de línea para detalles.
Valida tu código: Si algo se ve raro, revisa cierres y anidamiento.

Con los elementos armas tu página, con los atributos la personalizas, y con la diferencia entre estructurales y de línea controlas cómo se ve todo. Ahora tienes más herramientas para jugar y crear. el siguientes capitulos tocaremos que son los comentario en html

Estructura basica de html

Comentarios en HTML