Estructura básica de una página web en HTML

1. Creación del header

El header es la parte superior de la página web. En HTML se utiliza la etiqueta <header> para definirlo, y dentro del header es recomendable tener un solo <h1> para el título principal de la página:

<header>
    <h1>Formación <span>Online</span></h1>
</header>

El elemento <span> se utiliza aquí para aplicar estilos específicos a la palabra «Online».

2. Barra de navegación

La barra de navegación se puede definir utilizando la etiqueta <nav>. En este tutorial, simplemente incluimos un marcador para la navegación que se completará más adelante con enlaces:

<nav>
    Navegación
</nav>

3. Sección de presentación con subtítulo, texto y botón

Para incluir una sección con subtítulo, texto y botón, utilizamos la etiqueta <section>, que permite agrupar contenido:

<section>
    <h2>Formación Online a tu ritmo</h2>
    <p>Aprende desde casa</p>
</section>

4. Sección principal (main) con contenido

La sección principal de la página se define con la etiqueta <main>. Aquí se incluyen tres subsecciones: Cursos, Tutoriales y Blog.

<main>
    <h2>Mi contenido</h2>
    <section>
        <h3>Cursos</h3>
        <p>Lorem ipsum dolor sit amet.</p>
    </section>
    <section>
        <h3>Tutoriales</h3>
        <p>Lorem ipsum dolor sit amet.</p>
    </section>
    <section>
        <h3>Blog</h3>
        <p>Lorem ipsum dolor sit amet.</p>
    </section>
</main>

Cada subsección contiene un título (<h3>) y un párrafo explicativo.

5. Sección de contacto

La sección de contacto también se ubica dentro del <main> y se define con una nueva sección para mantener la estructura coherente:

<section>
    <h2>Contacto</h2>
    <!-- Aquí irá el formulario de contacto -->
</section>

En vídeos posteriores se verá cómo crear el formulario de contacto.

6. Footer

El footer es el pie de página, donde normalmente se incluyen derechos de autor u otra información de cierre de la web:

<footer>
    <p>Todos los derechos reservados</p>
</footer>

7. Conclusión

Este es el esqueleto básico de una página HTML. Aún faltan imágenes, estilos y funcionalidad, los cuales serán añadidos en los próximos vídeos, pero ahora ya tienes la estructura principal de una página web.

HTML completo

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi Página Web</title>
</head>
<body>

    <header>
        <h1>Formación <span>Online</span></h1>
    </header>

    <nav>
        Navegación
    </nav>

    <section>
        <h2>Formación Online a tu ritmo</h2>
        <p>Aprende desde casa</p>
    </section>

    <main>
        <h2>Mi contenido</h2>
        <section>
            <h3>Cursos</h3>
            <p>Lorem ipsum dolor sit amet.</p>
        </section>
        <section>
            <h3>Tutoriales</h3>
            <p>Lorem ipsum dolor sit amet.</p>
        </section>
        <section>
            <h3>Blog</h3>
            <p>Lorem ipsum dolor sit amet.</p>
        </section>

        <section>
            <h2>Contacto</h2>
            <!-- Aquí irá el formulario de contacto -->
        </section>
    </main>

    <footer>
        <p>Todos los derechos reservados</p>
    </footer>

</body>
</html>

Comentarios

No comments found.