En este artículo, se hablará sobre la etiqueta body y se enunciarán las etiquetas más utilizadas para generar contenidos en una página web.
La etiqueta <body></body>, representa todo lo visible de la página web y dentro de esta importante etiqueta se agregan las etiquetas que estructuran el contenido del sitio web.
Existen dos tipos de etiquetas
Etiquetas de tipo container o contenedoras
Las etiquetas contenedoras tienen más etiquetas adentro y ayudan a darle estructura a los contenidos web, tal y como se observó en el artículo sobre anatomía de un sitio web. Estas etiquetas, son la maquetación del sitio web.
Existen etiquetas específicas para cada lugar que estructuran la anatomía de una página web. Y debe estructurarse así por buenas prácticas. Estas etiquetas son semánticas, lo que significa que a través de estas, se le informa al navegador qué tratamiento debe aplicarle a estas etiquetas. Así mismo ocurre con el posicionamiento SEO.
Etiqueta <header></header>
La etiqueta <header></header>, es la etiqueta contenedora de todos los elementos que componen el encabezado visible de la página web.
Etiqueta <nav></nav>
La etiqueta <nav></nav>, es la etiqueta contenedora de los elementos de navegación. Por lo general, esta etiqueta está contenida dentro de la etiqueta header.
Etiqueta <main></main>
La etiqueta <main></main>, es donde se ubica todo el contenido principal de la página web, esta etiqueta es hermana de la etiqueta header, es decir tienen la misma jerarquía.
Etiqueta <section></section>
La etiqueta <section></section>, divide en varios grupos la estructura de la información y adentro se le agregan más etiquetas que siguen proporcionando estructura a los contenidos agregados. Esta etiqueta se puede repetir muchas veces.
Etiqueta <article></article>
La etiqueta <article></article>, le indica al navegador web que dentro de esa etiqueta hay un artículo.
Etiqueta <ul></ul> (unordered list)
La etiqueta <ul></ul>, estructura en la página web listas desordenadas. Esta lista se representa con bullets al inicio de cada elemento de la lista.
Etiqueta <ol></ol> (ordered list)
La etiqueta <ol></ol>, estructura en la página web listas ordenadas, y hace, que todos los elementos de la lista estén ordenados por números.
Etiqueta <div></div>
La etiqueta <div></div>, es una etiqueta contenedora para agregar otros demás contenidos deseados a la página web.
Etiqueta <footer></footer>
La etiqueta <footer></footer>, es la contenedora de todos los elementos del pie de página visible de la página web.
Etiquetas de contenido
Las etiquetas de contenido dentro del body, son visibles y permiten agregar: texto, imágenes, videos o cualquier otro elemento que necesite ser visualizado a través del navegador web.
Etiqueta <li></li> (list item)
La etiqueta <li></li>, es una etiqueta que está dentro del contenedor de lista ordenada o desordenada y es, cada item de la lista que se debe mostrar en el navegador web.
Etiqueta <p></p>
La etiqueta <p></p>, es la etiqueta encargada de agregar un contenedor de párrafo de contenido en texto.
Etiqueta <h1></h1>
Las etiquetas de encabezado <h1></h1>, le indican al navegador web que el texto dentro de la etiqueta es un encabezado.
Existen diferentes jerarquías de encabezado, que van desde h1 hasta h6, lo importante, es tener en cuenta el “h1” solo debe aparecer una vez en cada página web describiendo el título principal del documento .html, y el resto, si se puede repetir. Esto es bueno para la semántica y el SEO del sitio web.
Por lo general la etiqueta “h1” es la de tamaño más grande y la etiqueta “h6” es la más pequeña. Sin embargo, estos tamaños se pueden modificar aplicando CSS.
Etiqueta de ancla <a href=”url”></a>
Esta etiqueta <a href=”url”></a>, permite generar un hipervínculo interno o externo dentro de la página web. Dentro de la etiqueta iría el texto que se desea mostrar como descripción del hipervínculo en el navegador.
Ejemplo
<a href=”https://escuelawow.com”>ir a Escuela wow</a>, coloca en la página web un texto con una línea debajo indicando que se trata de un hipervínculo. Al hacer clic sobre este texto, el navegador interpreta que debe abrir la página que se haya establecido en la propiedad “href”.
Ejemplo completo de la estructura básica de una página web hecha con HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="description" content="En este artículo conocerás las etiquetas básicas de la página index.html">
<meta name="robots" content="index, follow">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./src/style.css">
<title>Nombre de la página</title>
</head>
<body>
<header>
<nav>
</nav>
</header>
<main>
<section>
<article>
<h1>Recibe la bienvenida a Escuela Wow</h1>
<h2>Este es un segundo título</h2>
<h3>Este es un tercer título</h3>
<p>Párrafo I de contenido en texto</p>
<p>Párrafo II de contenido en texto</p>
<ul>
<li>Algo desordenado aquí I</li>
<li>Algo desordenado aquí II</li>
</ul>
<ol>
<li>Algo ordenado aquí I</li>
<li>Algo ordenado aquí II</li>
</ol>
</article>
</section>
</main>
<footer>
<div>
<a href="https://escuelawow.com">Este hipervínculo va a escuela Wow</a>
</div>
</footer>
</body>
</html>Copia y pega este código HTML en tu editor de texto, guárdalo como index.html y abrelo con tu navegador para ver el resultado.
Conclusiones
Las etiquetas de tipo contenedoras son semánticas porque le indican al navegador cómo interpretar el contenido y tiene beneficios en SEO.
las etiquetas contenedoras o semánticas no necesariamente muestran contenido, existen para definir la estructura.
En este artículo se expresaron algunas de las etiquetas más utilizadas para crear la estructura básica de una página web. Existen muchas más.