Saltar al contenido

¿Cómo Hacer Maquetación Semántica con HTML5?

10 junio, 2019

Antes de comenzar, es necesario dejar claro el hecho de que. Maquetar una página web no es ni tan fácil, ni tan complicado como puede llegar a sonar. Se puede entender por Maquetar una página web, a la acción de llevar un diseño o idea de una página web al código HTML.

En otras palabras, sería traducir la idea o diseño del creador de la página al código que le dará vida la misma. Determinando la ubicación de todos los elementos que van a pertenecer a esta. Además de los estilos, efectos, animaciones, y prácticamente la totalidad de los contenidos que está poseer.

De modo que si quieres empaparte en los principios básicos para poder Maquetar una página web. Utilizando el código HTML5 y que esta mantenga un completo sentido semántico, resultando útil para los buscadores web. Entonces has llegado al lugar indicado, esta guía es para ti.

¿Por qué Utilizar HTML5 en vez de XHTML?

A pesar de que muchos desarrolladores utilizan tanto HTML como XHTML, existe cierta diferencia entre ellas. Quienes las utilizan, suelen agrupar o separar elementos utilizando div para ponerlos en capas. Lo cual resulta funcional, incluso si se tienen unos 40 div definiendo la estructura de un proyecto o página web.

Para quien tenga conocimiento de lo que esto significa, no habrá nada extraño o difícil de entender. Pero, para los buscadores web resulta difícil llegar a comprender el contenido dentro de estas líneas de código. Puesto que no puede distinguir entre los diferentes contenidos de la plataforma electrónica por la manera la que está escrita.

Recayendo en ese pequeño detalle el hecho que marca la diferencia entre HTML5 y XHTML. Debido a que el primero mencionado posee etiquetas para definir o una estructura de manera semántica. En contraparte a su competidor, que no tiene la capacidad o soporte para estas etiquetas.

Considerando a HTML5 como un código semántico, debido a que su estructura base posee sentido para los buscadores. Y por ende, dentro de la temática de este escrito, posee sentido para los SEO. Permitiendo que cualquier buscador web pueda determinar un cada parte de una página, aunque ésta no tenga contenido.

Como es lógico y necesario, vamos a definir cuáles son estas etiquetas que aportan mayor sentido semántico:

  • Para definir cuál es la cabecera de la página web, y determinar que contenido está incluido en la misma, se utiliza la etiqueta header.
  • La etiqueta nav es la encargada de representar a un menú. Siendo reconocido por los buscadores como la estructura de la navegación de la página web.
  • El término utilizado para agrupar y determinar los títulos de nuestra página web y darles la importancia respectiva es: hgroup.
  • Section y article es la etiqueta que reemplaza las capas div que antes se encargaban de definir los elementos de una página web. Siendo estas etiquetas nuevas de mucha más utilidad debido a que permiten definir artículos base y secciones dentro de estos.
  • Aside está encargada de definir y al mismo tiempo agrupar cierto tipo de elementos en una página web. Específicamente el contenido secundario tal y como columnas laterales o paneles de información lateral.
  • Para poder definir y al mismo tiempo agrupar los elementos pertenecientes al pie de una página web, se utiliza la etiqueta
¿Nos das 5 estrellas? ?