Cómo hacer maquetación semántica con HTML5 - Estructura semántica HTML5

Las páginas web hoy en día se han convertido en una herramienta fundamental para muchas personas. Pues en ella encontramos las alternativas y solucionas para casi todos nuestros problemas, existen páginas que te ayudan desde detectar el plagio de un trabajo, artículo o documento. Hasta las páginas de diseño para crear logotipos, imágenes, entre otros.

Y no solo esto, también hay otras que nos permiten poner a volar nuestra creatividad, y nos dan la opción de hacer tarjetas de visita, tarjetas navideñas, pósteres, entre otros elementos de diseño de forma digital.

Pero nada de esto sería posible sin la maquetación semántica, la cual da el código que va a utilizar el diseñador o creador de la página web, al momento de realizarla. Si estás interesado en el tema de la creación de nuevas páginas web, a continuación te vamos a explicar un poco cómo realizar el proceso de maquetación semántica con HTML5. Presta atención al tutorial.

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

Índice()
  1. ¿Qué es la maquetación una página web?
  2. ¿Por qué Utilizar HTML5 en vez de XHTML?
  3. Etiquetas con mayor sentido semántico

¿Qué es la maquetación una página web?

Antes de comenzar, es necesario dejar claro el hecho de qué. Maquetar una página web no es ni tan fácil, ni tan complicado como puede llegar a sonar. Se puede entender por Maquetar, 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.

hombre utilizando una laptop

¿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.

Volviendo a tocar el tema de 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 SEOS. Permitiendo que cualquier buscador web pueda determinar un cada parte de una página, aunque esta no tenga contenido. Como es lógico y necesario, vamos a definir cuáles son estas etiquetas que aportan mayor sentido semántico.

hombre utilizando un ordenador

Etiquetas con mayor sentido semántico

  1. Para definir cuál es la parte principal de la página web, y determinar que contenido está incluido en la misma, se utiliza la etiqueta header.
  2. 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.
  3. El término utilizado para agrupar y determinar los títulos de nuestra página web y darles la importancia respectiva es hgroup.
  4. 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.
  5. 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.
  6. Para poder definir y al mismo tiempo agrupar los elementos pertenecientes al pie de una página web, se utiliza la etiqueta.
Subir