Estructura de contenido (Layout) - Curso de HTML

Aprende como crear la estructura básica de contenido o Layout ✔ para un sitio web en HTML, a través ejemplos realizados desde cero.

Estructura de contenido (Layout)

Bueno ya esta casi terminando el curso de HTML, en esta sección te enseñare lo básico para que diseñes una página con los elementos que ayudan a describirle al navegador que representa cada parte de tu web.

Comenzamos con lo básico decirle al navegador que nuestro código esta en base a HTML con la etiqueta <!doctype html> para poder abrir la etiqueta <html> que es donde agregamos el código para la página, la etiqueta <html> tiene el valor "lang" que representa el lenguaje, por defecto se asocia al atributo "en". Ahora podemos abrir la etiqueta <head> que es donde agregamos los meta, el title, códigos de la search console, etc. Y llegamos por fin al fuerte de este capitulo elemento <body> que es donde agregamos el contenido que visualiza el usuario en la página. Todo este código queda representado de la siguiente forma:
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Mi página solo con HTML</title>
</head>
<body>
  
</body>
</html>

Crear el Header

Desde ahora iré describiendo en orden los elementos que agregaremos al <body>. La primera etiqueta a agregar es el <header> que es la cabecera de la página que es donde normalmente se agrega el logotipo o el nombre de la web junto a una descripción. Para esto agregamos un <div> que es simplemente un contenedor para agregar nuestra imagen o texto, a través del siguiente código:
<header>
    <div>
      <img src="logo.jpg" alt="logotipodemiweb">
    </div>
    o en su defecto
    <div>
      <h1>Título de mi página</h1>
    <div>
</header>
Además en el header agregamos la etiqueta <nav> que representa el menú de navegación en la web. Este se agrega a través de un lista donde agregamos cada elemento a través de un hipervínculo con el siguiente código:
<header>
    <div>
      <h1>Título de mi página</h1>
    <div>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Link menu 1</a></li>
        <li><a href="#">Link menu 2</a></li>
        <li><a href="#">Link menu 3</a></li>
      </ul>
    <nav>
</header>

Crear la sección de contenido y barra lateral

En esta parte trabajamos con la etiqueta <section> a la cual agregamos diferentes clases para indicarle al navegador que representa cada una. La primera clase es "wrapper", el cual representa el contenedor donde agregaremos el contenido principal y secundario.

Dentro del anterior section agregaremos otro más con la clase "main" el cual indica que adentro esta el contenido principal, como por ejemplo un articulo, por ende se utiliza la etiqueta <article> . A esta etiqueta agregamos un titulo (siempre h2, porque el h1 ya lo utilizamos en el header) y obviamente el contenido con la etiqueta <p> que representa un párrafo. El código a agregar es el siguiente:
<section class="wrapper">
    <section class="main">
      <article>
        <h2>Titulo de contenido 1</h2>
        <p>Aquí agrego el contenido principal</p>
      </article>
    </section>
 </section>
Para el contenido secundario utilizamos a etiqueta <aside> que representa nuestra barra lateral que es donde agregamos enlaces, publicidad, vídeos, imágenes, texto, contenido relacionado, etc. En este caso para el ejemplo solo agregare un titulo y un texto. Te dejo el código:
<aside>
        <h3>Mi primer sidebar</h3>
        <p>Aquí agrego el contenido secundario</p>
</aside>

Crear pie de página

Finalmente antes de cerrar el body utilizaremos la etiqueta <footer> donde se agregan los crétidos de tu página con un simple párrafo como se muestra en el siguiente código:
<footer>
    <p>Mipaginaweb.extensión 2020 todos los derechos reservados bla bla :D</p>
</footer>

Código HTML completo para el layout

Agrupando todo lo anterior el resultado tendrás ya tu web con el HTML básico para que funcione y optimizada para buscadores, pero recuerda que a todo esto le daremos vida (colores y diversos diseños) a través del CSS en el siguiente curso. Te dejo el resultado:

See the Pen Estructura de contenido HTML by DiegoPresol (@DiegoPresol) on CodePen.

Comentarios

Estas cordialmente invitado a compartir tu ideas y comentarios.