Como crear la estructura básica de una página

992

Paso a paso
Para crear un gran sitio web necesitas ir paso a paso, es decir, crear página por página en donde cada una tendrá una función y un objetivo diferente. Sin embargo, tener la estructura básica de una página te servirá entre otras cosas para planear el contenido y saber que partes cambiarán constantemente y cuáles no.

Las etiquetas semánticas te permitirán tener una apariencia estructurada en cada página con un header, main, footer y nav por ejemplo.

Etiquetas semánticas más comunes

Header. Encabezado de la página o sección.
Nav. La etiqueta de navegación se utiliza para los enlaces de navegación.
Main: contiene el contenido principal
Article. La etiqueta artículo define el contenido independiente de la página o web en la que se encuentra.
Section. Agrupar contenidos que tratan sobre temas similares.
Aside. Es para el contenido de menor importancia como información complementaria, pero no esencial.
Footer. Va en la parte inferior de una página. La etiqueta suele incluir información de contacto, derechos de autor y navegación por la web.

Ejemplo de como crear una estructura base

<main><header>Encabezado de la página o sección.header>
        <nav>La etiqueta de navegación se utiliza para los enlaces de navegación.  <ahref="">Enlace 1a><ahref="">Enlace na>nav>
        <section>Agrupación de contenidossection>
        <article>Contenido independiente de la páginaarticle>
        <footer>Información de contacto como email, redes sociales, etc. entre otras cosasfooter>  
    main>
    <aside>Info complementariaaside>  
body>```

Estilos para darnos una idea visual 
<style>aside{
            border-color: blue;
            border-style: solid;
            border-width: 3px;
        }
        main{
            border-color: green;
            border-style: solid;
            border-width: 3px;
        }
        header{
            border-color: cyan;
            border-style: solid;
            border-width: 1px;
        }
        nav{
            border-color: papayawhip;
            border-style: solid;
            border-width: 1px;
        }
        section{
            border-color: orangered;
            border-style: solid;
            border-width: 1px;
        }
        article{
            border-color: papayawhip;
            border-style: solid;
            border-width: 1px;
        }
        footer{
            border-color: red;
            border-style: solid;
            border-width: 1px;
        }
    style>