Las etiquetas header (cabecera) se usan por ejemplo para la cabecera principal del sitio y si el/los artículos tienen un contenido lo suficientemente importante como para distinguirlo como cabecera, footer lo mismo pero para los pie de página. article para los artículos o noticias en caso de hacer algo tipo blog. main se suele usar una sola vez y es para especificar el contenido principal (los artículos van dentro de este). aside se suele usar similar a footer y header pero como columna lateral o campo donde van a ir enlaces relacionados con el artículo o cosas así.

Guiándote por sus nombres en ingles es fácil ir agregando las etiquetas de manera semántica, que signifiquen algo. Poner una etiqueta div o section a la barra de navegación no le genera nada ni le dice a los buscadores, lectores, etc. para que sirve esa sección especifica, usar una etiqueta nav y dentro ahí agregar solo enlaces o una lista ul es más amigable.

Un ejemplo:

<body>
    <header>
        <a href="#">Logo del sitio</a>
        <nav>
            <ul>
                <li><a href="inicio">Inicio</a></li>
                <li><a href="noticias">Noticias</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <article>Lorem ipsum......</article>
        <aside> Info útil: ......</aside>
    </main>

    <section>
        Acá puede ir info no relacionada directamente con el/los artículos. Banner, publicidad, etc.
    </section>

    <footer>
        <p>Mi super web © 2019 | Todos los derechos reservados.</p>
    </footer>
</body>

PD: Los div suelen ser muy útiles para encerrar contenido ya sea para darle estilos, ancho máximo, etc. Estos "contenedores" no necesitan ser semánticos.

Muy buena respuesta Marcos, clara y sencilla, me ayudaste mucho a resolver algunas dudas. Sólo tengo una duda más, entiendo que <div> sólo sirve como contenedor para posteriormente manipularlo por CSS o JS, pero si no uso etiquetas <div> y uso etiquetas semánticas como <header> etc, cómo accedo a ellos con CSS o JS?

saludos.no logro colocar el logo en visual studio cod

Las etiquetas header (cabecera) se usan por ejemplo para la cabecera principal del sitio y si el/los artículos tienen un contenido lo suficientemente importante como para distinguirlo como cabecera, footer lo mismo pero para los pie de página. article para los artículos o noticias en caso de hacer algo tipo blog. main se suele usar una sola vez y es para especificar el contenido principal (los artículos van dentro de este). aside se suele usar similar a footer y header pero como columna lateral o campo donde van a ir enlaces relacionados con el artículo o cosas así.

Guiándote por sus nombres en ingles es fácil ir agregando las etiquetas de manera semántica, que signifiquen algo. Poner una etiqueta div o section a la barra de navegación no le genera nada ni le dice a los buscadores, lectores, etc. para que sirve esa sección especifica, usar una etiqueta nav y dentro ahí agregar solo enlaces o una lista ul es más amigable.

Un ejemplo:

<body>
    <header>
        <a href="#">Logo del sitio</a>
        <nav>
            <ul>
                <li><a href="inicio">Inicio</a></li>
                <li><a href="noticias">Noticias</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <article>Lorem ipsum......</article>
        <aside> Info útil: ......</aside>
    </main>

    <section>
        Acá puede ir info no relacionada directamente con el/los artículos. Banner, publicidad, etc.
    </section>

    <footer>
        <p>Mi super web © 2019 | Todos los derechos reservados.</p>
    </footer>
</body>

PD: Los div suelen ser muy útiles para encerrar contenido ya sea para darle estilos, ancho máximo, etc. Estos "contenedores" no necesitan ser semánticos.

Muy buena respuesta Marcos, clara y sencilla, me ayudaste mucho a resolver algunas dudas. Sólo tengo una duda más, entiendo que <div> sólo sirve como contenedor para posteriormente manipularlo por CSS o JS, pero si no uso etiquetas <div> y uso etiquetas semánticas como <header> etc, cómo accedo a ellos con CSS o JS?

saludos.no logro colocar el logo en visual studio cod

Las etiquetas header (cabecera) se usan por ejemplo para la cabecera principal del sitio y si el/los artículos tienen un contenido lo suficientemente importante como para distinguirlo como cabecera, footer lo mismo pero para los pie de página. article para los artículos o noticias en caso de hacer algo tipo blog. main se suele usar una sola vez y es para especificar el contenido principal (los artículos van dentro de este). aside se suele usar similar a footer y header pero como columna lateral o campo donde van a ir enlaces relacionados con el artículo o cosas así.

Guiándote por sus nombres en ingles es fácil ir agregando las etiquetas de manera semántica, que signifiquen algo. Poner una etiqueta div o section a la barra de navegación no le genera nada ni le dice a los buscadores, lectores, etc. para que sirve esa sección especifica, usar una etiqueta nav y dentro ahí agregar solo enlaces o una lista ul es más amigable.

Un ejemplo:

<body>
    <header>
        <a href="#">Logo del sitio</a>
        <nav>
            <ul>
                <li><a href="inicio">Inicio</a></li>
                <li><a href="noticias">Noticias</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <article>Lorem ipsum......</article>
        <aside> Info útil: ......</aside>
    </main>

    <section>
        Acá puede ir info no relacionada directamente con el/los artículos. Banner, publicidad, etc.
    </section>

    <footer>
        <p>Mi super web © 2019 | Todos los derechos reservados.</p>
    </footer>
</body>

PD: Los div suelen ser muy útiles para encerrar contenido ya sea para darle estilos, ancho máximo, etc. Estos "contenedores" no necesitan ser semánticos.

Muy buena respuesta Marcos, clara y sencilla, me ayudaste mucho a resolver algunas dudas. Sólo tengo una duda más, entiendo que <div> sólo sirve como contenedor para posteriormente manipularlo por CSS o JS, pero si no uso etiquetas <div> y uso etiquetas semánticas como <header> etc, cómo accedo a ellos con CSS o JS?

saludos.no logro colocar el logo en visual studio cod