Cómo estructura correctamente el contenido de una página web o sitio web con HTML5

Total
0
Shares

Las secciones son las partes temáticas en las que se puede dividir el contenido de una página web.

En las versiones anteriores la única etiqueta para definir agrupaciones de contenido era prácticamente la etiqueta <div>.

Las páginas estaban compuestas por elementos <div>, en algunos casos para estructurar el contenido de la página.

Para organizar las diferentes partes de la página web se tenían que crear varias divisiones <div> y distinguirlas mediante los atributos CSS que en otro post explicaré como hacerlo.

Un ejemplo sería

<body>

<div class=”cabecera”>

<p>Soy una cabecera</p>

</div>

<div class=”menu”>

<p>Soy un párrafo dentro del Menu</p>

</div>

<div class=”contenido”>

<p>Soy un párrafo dentro del contenido</p>

</div>

<div class=”apartado”>

<p>Soy un párrafo dentro de un apartado</p>

</div>

<div class=”pie”>

<p> Soy un párrafo dentro del pie de pagina</p>

</div>

</body>

Con la actualización de HTML a HTML5 se organizo esta situación introduciendo nuevas etiquetas para reorganizar los diferentes tipos de secciones que se pueden encontrar en una pagina web o sitio web , estas nuevas etiquetas serian <article>, <section>, <nav>, <aside>, <header> y <footer> , también hay que tener en cuenta la etiqueta <main>, que es considerada de bloque “porque ocupa un espacio entero” más que de sección “que no ocupa espacio dimensional en el documento” pero para estructurar elementos es muy valida.

Un ejemplo con las muevas etiquetas sería este:

<body>

<header>

<h1>Soy una cabecera</h1>

</header>

<nav>

<p>Soy un párrafo dentro del Menu</p>

</nav>

<section>

<p>Soy un párrafo dentro del contenido</p>

</section>

<aside>

<p>Soy un párrafo dentro de un apartado</p>

</ aside>

<footer>

<p> Soy un párrafo dentro del pie de pagina</p>

</footer >

</body>

Utilizar estas etiquetas específicas, se mejora la legibilidad y facilidad de reutilización tanto del código HTML5 como de las hojas de estilo de CSS.

Se sigue manteniendo la etiqueta <div> en HTML5 porque así resulta más fácil la potabilidad de una versión anterior de HTML a la nueva versión de HTML5 , si no fuera así sería muy costoso pasar todas las etiquetas <div> a las nuevas etiquetas de secciones de HTML5.

Secciones , títulos y esquema del documento

A partir de HTML5 , las secciones de un documento digital ya no se deberían de definir mediante las etiquetas de título, sino mediante las cuatro etiquetas anteriormente mencionadas como son  <article>, <section>, <nav> y <aside>.

Eso quiere decir que por ejemplo, que HTML 5 permite que en esas cuatro etiquetas se incluyan elementos <header>, <footer> o etiquetas especiales para títulos  como son <h1>…. <h6>, que se usan como encabezados de páginas, pies, títulos de la sección en el que se inserten, independientes de los elementos en su conjunto de diseño.

Encabezamiento: <header>

Está pensada para agrupar el contenido inicial de una página web.

Puede contener únicamente los elementos que aparecen en las páginas de un sitio como por ejemplo el logotipo y un menú general, incluir también elementos distintos de la página como son el título principal <h1> de la página, los enlaces de navegación dentro de la página, texto de introducción , etc.

El elemento <header> puede estar dentro de un <body> , esto muestra que es el encabezado de la página forma parte del conjunto de esta pero también se puede incluir en <article>, <section>, <nav> y <aside> , esto significa que también forma parte del encabezado de la pagina web.

Títulos: <h1> <h2> <h3> <h4> <h5> <h6>

Las etiquetas <h1>, <h2>, <h3>, <h4>, <h5> y <h6>  se usan exclusivamente para los títulos y subtítulos de los distintos encabezados <header> y apartados del documento.

<h1>Título 1</h1>

<h2>Título 2</h2>

<h3>Título 3</h3>

<h4>Título 4</h4>

<h5>Título 5</h5>

<h6>Título 6</h6>

Los títulos <h1>, …, <h6> se deben utilizar de forma jerárquica, no saltándose los niveles y utilizando títulos del mismo nivel para el contenido de una misma categoría para crear apartados principales, subapartados, etc.

  • <h1> se usa para el título principal del documento.
  • <h2> para los demas títulos de los apartados del documento.
  • <h3> para los subapartados de cada apartado.
    • Los siguientes elementos del <h4> <h5> y <h6> seguirían la misma filosofía de estructuración del documento.

Los navegadores web definen de forma implícita las secciones anidadas dentro del esquema de la página web.

Navegación: <nav>

Está pensada para agrupar los enlaces a otras páginas web o enlaces a los  distintos apartados de la propia página web.

Una página web puede contener varios elementos <nav>, aunque no es necesario que todos los grupos de enlaces estén en elementos <nav> , un ejemplo seria, los enlaces de contacto que se suelen incluir en el elemento <footer> no requieren el uso de <nav>.

  • El <nav> de <header> puede contener enlaces globales a otras páginas de sitio web.
  • El <nav> de <body> puede contener enlaces a las secciones de la página web.
  • El <nav> de <aside> puede contener enlaces a otros sitios webs relacionados con el contenido de la página.

Sección: <section>

Esta etiqueta está pensada para agrupar los apartados del contenido principal del documento.

La etiqueta <section>empiezan con un título <h1>, <h2>, etc. que hace referencia al tema tratado en cada sección.

Un elemento <section> puede contener otros elementos <section>.

Las secciones interiores se entienden como subsecciones de la sección exterior.

Un elemento <section> puede contener elementos <article> 

Las etiquetas <section> y <article> llegan a ser similares.

Las posible diferencias que se pueden encontrar es que la etiqueta <article> es para partes que forman una unidad en sí mismas y <section> es para partes de elementos de una unidad mayor.

Artículo: <article>

Se usa para agrupar el contenido de la página web que forma una unidad en sí misma desde el punto de vista temático.

Un artículo debería poder publicarse y leerse como documento independiente de los elementos principales del contenido de la misma página web, aunque una página web puede estar formada por varios artículos de temática relacionada o no.

Esta etiqueta puede contener otros elementos <article> que pueden estar relacionados con el contenido del <article> que los contiene.

También <article> puede contener elementos <section>.

Las etiquetas <article> y <section> son similares.

La posible diferencia entre estas 2 etiquetas es que <article> se usa para partes que forman una unidad en sí mismas y <section> es para partes de una unidad de contenido mayor.

Como consejo para estructurar los elementos, si la página trata de un único tema y se va a utilizar un único elemento <article>, es preferible utilizar la etiqueta <main> para englobar ese contenido.

Lateral: <aside>

Este elemento esta pensado para agrupar contenido secundario  al contenido que lo acompaña , un ejemplo sería un bloque de anuncios, un grupo de enlaces externos relacionados, una cita del texto , etc.

Se suele mostrar en los lados del documento creado.

Los <aside> pueden estar incluido en el <body> y se entiende que se trata de contenido secundario con respecto a la página en su conjunto principal,  aunque también se puede incluir dentro de <article> o <section> , entonces aquí se vería como un contenido secundario con respecto al elemento principal que lo contiene.

Pie: <footer>

Se usa para contener información general sobre el documento, información que se suele poner al final del documento como suele ser el autor, direcciones de contacto, licencia o condiciones de uso, enlaces a otros documentos relacionados.

El elemento <footer> puede estar incluido en las etiquetas como :

<body>  <article>, <section>, <nav> , <aside> y daría a entender que se trata de un pie de página del elemento que lo contiene.

Dirección <address>

Se usa para contener la información de contacto de un autor como es la dirección de correo, teléfono, etc.

Normalmente se incluye en el pie de página  junto con el <footer> o dentro de algún elemento de tipo <article>.

Los navegadores web suele mostrar el bloque de dirección <address> en cursiva sin tener que aplicarle una hoja de estilo CSS.

7 comentarios
Deja un comentario
También puede interesarte