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 iremos 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>
<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>
<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 la estructura de contenido o Layout, 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.
Más del Curso de HTML:
- Introducción
- Enlaces
- Tablas
- Listas
- Imágenes
- Formularios (solo la arquitectura con HTML)
- Layout (estás aquí)
- Extra: Atributo HTML LazyLoading Nativo