Curso HTML MÓDULO 6

📖 Curso de HTML para Principiantes

Módulo 6: Buenas prácticas y semántica

🎯 Objetivo

Comprender cómo usar etiquetas semánticas para dar significado al contenido, mejorar la accesibilidad y favorecer el SEO.

1. ¿Qué es la semántica en HTML?

Semántica significa que las etiquetas describen el propósito del contenido.
Ejemplo: <header> indica un encabezado de página, mientras que <div> es solo un contenedor genérico.
Usar etiquetas semánticas ayuda a los navegadores, buscadores y lectores de pantalla a interpretar mejor la página.

2. Etiquetas semánticas principales

HTML5 introdujo etiquetas que reemplazan muchos <div> genéricos:

html

<header>
  <h1>Mi sitio web</h1>
</header>

<nav>
  <ul>
    <li><a href="index.html">Inicio</a></li>
    <li><a href="sobre.html">Sobre mí</a></li>
    <li><a href="contacto.html">Contacto</a></li>
  </ul>
</nav>

<main>
  <article>
    <h2>Mi primer artículo</h2>
    <p>Este es el contenido principal de la página.</p>
  </article>
</main>

<footer>
  <p>&copy; 2025 Mi sitio web</p>
</footer>

🔎 Explicación:

<header> → cabecera de la página o sección.
<nav> → menú de navegación.
<main> → contenido principal.
<article> → contenido independiente (artículo, entrada de blog).
<footer> → pie de página.

3. Accesibilidad básica

Usa siempre atributos alt en imágenes.
Relaciona etiquetas <label> con campos de formulario (for + id).
Estructura títulos en orden jerárquico (<h1>, <h2>, <h3>…).
Evita usar solo colores para transmitir información (añade texto o iconos).

4. SEO básico

Un solo <h1> por página, representando el tema principal.
Usa títulos claros y descriptivos.
Añade metaetiquetas en el <head>:

html

<meta name="description" content="Página personal de Ana, estudiante de programación.">
<meta name="keywords" content="HTML, programación, curso, principiantes">

5. Validación del código

Puedes comprobar si tu HTML está bien escrito con el W3C Validator. Esto ayuda a detectar errores y mejorar la compatibilidad.

6. Ejercicio práctico

👉 Crea un archivo semantica.html con:

Un <header> con el título de tu página.
Un <nav> con al menos 3 enlaces.
Un <main> con un <article> que tenga título y párrafo.
Un <footer> con tu nombre y el año actual.
Un comentario que diga: .

7. Conceptos clave del módulo

Las etiquetas semánticas dan significado al contenido.
Mejoran la accesibilidad y el SEO.
La estructura básica moderna incluye: <header>, <nav>, <main>, <article>, <footer>.
Validar el código asegura calidad y compatibilidad.

📌 Mini-reto: Añade un segundo <article> dentro de <main> con un título y párrafo sobre tu proyecto favorito.

HTML	MÓDULOS
Curso HTML	MÓDULO 7. Proyecto final
PÁGINA ANTERIOR	PÁGINA SIGUIENTE