HTML5 - NUEVAS ETIQUETAS SEMÁNTICAS - codeAb | Tecnología, programación y más

Hola amigos lo que haremos hoy en este artículo es aprender un poco de teoría sobre la estructura de HTML5 y en el siguiente artículo haremos un poco de practica no te pierdas.

En 2004, Ian Hickson, el autor de la especificación de HTML5, analizó 1.000.000.000 de
páginas web utilizando el motor de Google, intentando identificar la manera en la que la
web real estaba construida. Uno de los resultados de este análisis, fue la publicación de
una lista con los nombres de clases más utilizados. Este estudio revela que los
desarrolladores utilizan clases o IDs comunes para estructurar los documentos. Esto
llevó a considerar que quizás fuese una buena idea crear etiquetas concretas para
reflejar estas estructuras.
Este tipo de etiquetas que componen la web semántica nos sirven para que cualquier
mecanismo automático (un navegador, un motor de búsqueda, un lector de feeds...) que
lea un sitio web sepa con exactitud qué partes de su contenido corresponden a cada una
de las partes típicas de un sitio. Observando esas etiquetas semánticas estructurales,
cualquier sistema podrá procesar la página y saber cómo está estructurada. Veamos
algunas de estas etiquetas que introduce HTML5 en este sentido.

<section></section>: se utiliza para representar una sección "general" dentro de
un documento o aplicación, como un capítulo de un libro. Puede contener
subsecciones y si lo acompañamos de h1-h6 podemos estructurar mejor toda la
página creando jerarquías del contenido, algo muy favorable para el buen
posicionamiento web.

<article></article>: representa un componente de una página que consiste en
una composición autónoma en un documento, página, aplicación, o sitio web con la
intención de que pueda ser reutilizado y repetido. Podría utilizarse en los artículos
de los foros, una revista o el artículo de periódico, una entrada de un blog, un
comentario escrito por un usuario, un widget interactivo o cualquier otro artículo
independiente de contenido. Cuando los elementos de <article> son anidados, los
elementos interiores representan los artículos que en principio son relacionados con
el contenido del artículo externo. Por ejemplo, un artículo de un blog que permite
comentarios de usuario, dichos comentarios se podrían representar con <article>.

<aside></aside>: representa una sección de la página que abarca un contenido
relacionado con el contenido que lo rodea, por lo que se le puede considerar un
contenido independiente. Este elemento puede utilizarse para efectos tipográficos,
barras laterales, elementos publicitarios, para grupos de elementos de la
navegación, u otro contenido que se considere separado del contenido principal de
la página.

<header></header>: representa un grupo de artículos introductorios o de
navegación. Está destinado a contener por lo general la cabecera de la sección (un
elemento h1-h6 o un elemento hgroup), pero no es necesario.

<nav></nav>: representa una sección de una página que enlaza a otras páginas o a
otras partes dentro de la página. No todos los grupos de enlaces en una página
necesita estar en un elemento nav, sólo las secciones que constan de bloques de
navegación principales son apropiados para el elemento de navegación.

<footer></footer>: representa el pie de una sección, con información acerca de la
página/sección que poco tiene que ver con el contenido de la página, como el autor,
el copyright o el año.

<hgroup></hgroup>: representa el encabezado de una sección. El elemento se utiliza
para agrupar un conjunto de elementos h1-h6 cuando el título tiene varios niveles,
tales como subtítulos o títulos alternativos.

<time>: representa o bien una hora (en formato de 24 horas), o una fecha precisa
en el calendario gregoriano (en formato ISO), opcionalmente con un tiempo y un
desplazamiento de zona horaria.

POR: ARKAITZ GARRO:

http://www.arkaitzgarro.com

<--- artículo anterior - - - Siguiente artículo--->