Estructurando con HTML
¡Ahora vamos a aprender a organizar contenido de forma profesional!
HTML Semántico
Semántico = etiquetas que tienen significado.
En vez de usar <div> para todo, usamos etiquetas que describen el contenido:
html
<!-- ❌ No semántico --><div class="header">...</div><div class="nav">...</div><div class="main">...</div> <!-- ✅ Semántico --><header>...</header><nav>...</nav><main>...</main>¿Por qué importa?
- Accesibilidad - Lectores de pantalla entienden mejor la página
- SEO - Google prefiere sitios bien estructurados
- Mantenimiento - Más fácil entender el código
Principales Etiquetas Semánticas
Estructura de Página
html
<body> <header> Logo y navegación principal </header> <nav> Enlaces del menú </nav> <main> Contenido principal (único por página) </main> <aside> Barra lateral, contenido relacionado </aside> <footer> Créditos, redes sociales, copyright </footer></body>Organización de Contenido
html
<article> Post de blog, noticia, contenido independiente</article> <section> Sección de una página</section> <figure> <img src="foto.jpg" alt="Descripción"> <figcaption>Pie de imagen</figcaption></figure>Div y Span
Cuando no hay etiqueta semántica apropiada:
html
<!-- div: agrupación de bloque (ocupa todo el ancho) --><div class="card"> <h3>Título</h3> <p>Contenido</p></div> <!-- span: agrupación inline (no rompe línea) --><p>El precio es <span class="destacado">$99</span></p>Formularios
Esenciales para interactuar con usuarios:
html
<form action="/enviar" method="POST"> <label for="nombre">Nombre:</label> <input type="text" id="nombre" name="nombre" required> <label for="email">Email:</label> <input type="email" id="email" name="email" required> <label for="mensaje">Mensaje:</label> <textarea id="mensaje" name="mensaje"></textarea> <button type="submit">Enviar</button></form>Tipos de Input Útiles
html
<input type="text"> <!-- Texto simple --><input type="email"> <!-- Valida email --><input type="password"> <!-- Oculta caracteres --><input type="number"> <!-- Solo números --><input type="date"> <!-- Selector de fecha --><input type="checkbox"> <!-- Casilla de verificación --><input type="radio"> <!-- Selección única --><input type="file"> <!-- Subir archivos -->Tablas
Para datos tabulares (¡NO para layout!):
html
<table> <thead> <tr> <th>Nombre</th> <th>Edad</th> <th>Ciudad</th> </tr> </thead> <tbody> <tr> <td>María</td> <td>25</td> <td>Madrid</td> </tr> <tr> <td>Juan</td> <td>30</td> <td>Barcelona</td> </tr> </tbody></table>Ejemplo Práctico: Página de Blog
html
<!DOCTYPE html><html lang="es"><head> <meta charset="UTF-8"> <title>Mi Blog</title></head><body> <header> <h1>Mi Blog de Tech</h1> <nav> <a href="/">Inicio</a> <a href="/sobre">Sobre</a> <a href="/contacto">Contacto</a> </nav> </header> <main> <article> <h2>Aprendiendo HTML</h2> <p>Publicado el <time datetime="2026-01-15">15 ene 2026</time></p> <p>Hoy aprendí sobre etiquetas semánticas...</p> </article> <article> <h2>Mi Primer Sitio Web</h2> <p>Publicado el <time datetime="2026-01-10">10 ene 2026</time></p> <p>¡Creé mi primera página HTML!</p> </article> </main> <aside> <h3>Sobre</h3> <p>Un desarrollador en formación compartiendo mi jornada.</p> </aside> <footer> <p>© 2026 Mi Blog. Todos los derechos reservados.</p> </footer></body></html>Resumen
- ✅ Usa etiquetas semánticas siempre que sea posible
- ✅
header,nav,main,footerpara estructura - ✅
article,sectionpara contenido - ✅
divyspansolo cuando no hay alternativa semántica - ✅ Formularios con tipos de input correctos
¡En la próxima lección, haremos todo esto bonito con CSS! 🚀