Módulo 8: Buenas prácticas y publicación en HTML

En esta lección aprenderás las buenas prácticas para estructurar tu HTML de forma semántica y accesible, además de una introducción sencilla para publicar tu página web usando plataformas modernas.

Estructura semántica básica en HTML5

HTML5 introdujo etiquetas que ayudan a dar significado al contenido y mejoran la accesibilidad y SEO.

<header>: contiene el encabezado o introducción del sitio o sección.
<nav>: área con enlaces de navegación.
<main>: contenido principal único de la página.
<section>: secciones temáticas dentro del contenido.
<footer>: pie de página con información de contacto, derechos, etc.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Mi página web</title>
</head>
<body>
    <header>
        <h1>Bienvenidos</h1>
    </header>
    <nav>
        <ul>
            <li><a href="#">Inicio</a></li>
            <li><a href="#">Contacto</a></li>
        </ul>
    </nav>
    <main>
        <section>
            <h2>Sobre nosotros</h2>
            <p>Contenido principal aquí.</p>
        </section>
    </main>
    <footer>
        <p>Derechos reservados 2025</p>
    </footer>
</body>
</html>

Buenas prácticas para accesibilidad y SEO básico

Etiquetas alt: describen imágenes para lectores de pantalla y SEO.
Títulos coherentes: usa encabezados (<h1> - <h6>) en orden lógico.
Texto legible: evita bloques grandes de texto sin pausas.
Enlaces descriptivos: que indiquen claramente su destino.

<img src="foto.jpg" alt="Paisaje montañoso al atardecer">

Cómo publicar una página web simple

Existen servicios gratuitos para alojar sitios estáticos fácilmente:

GitHub Pages: ideal para proyectos con control de versiones.
Netlify: despliegue automático y sencillo desde repositorios.
Vercel: enfocado en proyectos modernos con integración continua.

Solo necesitas crear un repositorio, subir tus archivos HTML, CSS y JS, y conectar el repositorio al servicio elegido. En minutos tendrás tu sitio online.

Preguntas de Repaso

Pregunta 1

¿Cuál etiqueta representa el contenido principal único de una página?

A) <section>
B) <main>
C) <footer>
D) <header>

Pregunta 2

¿Por qué es importante usar el atributo alt en imágenes?

A) Para que la imagen se cargue más rápido
B) Para mejorar la accesibilidad y SEO
C) Para cambiar el color de la imagen
D) Para ocultar la imagen

Pregunta 3

¿Cuál etiqueta se usa para definir un área de navegación?

A) <nav>
B) <section>
C) <aside>
D) <footer>

Pregunta 4

¿Cuál de estas plataformas permite publicar sitios web gratuitos con repositorios de GitHub?

A) Netlify
B) Vercel
C) GitHub Pages
D) Dropbox

Pregunta 5

¿Cuál es una buena práctica para mejorar la accesibilidad en HTML?

A) Usar títulos en orden lógico
B) Usar solo imágenes sin texto
C) Ocultar texto importante
D) Ignorar el atributo alt

Esta lección forma parte del curso básico de HTML. ¡Felicidades por avanzar hasta aquí! Próximamente, aprenderemos sobre CSS básico para dar estilo a nuestras páginas.

Universo de unos y ceros

Módulo 8: Buenas prácticas y publicación en HTML