Investigacin de Programacin para Web

Nombre: Joel Pinillo ID: 1-739-2176

Las nuevas etiquetas semnticas del HTML 5

Lo primero que conviene remarcar es que HTML5 no es un lenguaje nuevo en

contraposicin a HTML, sino una nueva versin del mismo lenguaje. Tambin hay
que recordar que HTML5 incorpora cambios en profundidad que los navegadores
antiguos no son capaces de mostrar, por lo tanto que hay que tener actualizado el
navegador.

Las etiquetas semnticas ayudan a definir la estructura del documento y permiten

que las pginas web sean mejor indexadas por los buscadores.

Una etiqueta se califica como semntica si tiene que ver el significado, es decir, si
nos informa sobre lo que trata su contenido. Por ejemplo, la etiqueta SECTION
nos dice que contiene una seccin o captulo dentro de la pgina.

Etiquetas semnticas de estructura HTML5

Ahora listamos las etiquetas para posteriormente hacer un breve resumen de cada
una de ellas:

header

nav

section

aside

article
 main

footer
 Etiqueta header HTML5:

Se utiliza como una introduccin del elemento que la contiene. Si colocamos un

HEADER en el BODY, a primer nivel, ser una introduccin o presentacin de toda
la pgina. Si colocamos un HEADER dentro de un SECTION, contendr una
introduccin a esa seccin. Tambin se pueden colocar dentro de un ARTICLE.

El HEADER suele llevar el ttulo, la descripcin corta y el logo de la pgina. El

HEADER por s mismo no separa contenidos, no se debe utilizar aislado, sino
dentro de otra etiqueta semntica, o a primer nivel en el BODY.

El HEADER no es equivalente a la parte superior de la pgina, aunque

frecuentemente est en esa posicin.

Contiene la agrupacin de cdigo HTML correspondiente a la cabecera de la web

o referencia descriptiva de artculos.

Su sintaxis es:

Etiqueta nav HTML5:

Esta etiqueta est pensada para contener la barra de navegacin o los enlaces a
las pginas del sitio web.

Normalmente va en la parte superior de la pgina o en un lateral. Suele estar

formada por una lista de enlaces con las etiquetas UL y LI. Aunque hay multitud de
diseos diferentes de barras de navegacin y mens.

Nos sirve para definir el conjunto de cdigo HTML de un men de

navegacin, solamente contiene enlaces a las diferentes secciones de la
web.

Su sintaxis es:
 Etiqueta section HTML5:

Una SECTION agrupa contenido con un tema comn, por ejemplo, las diferentes
partes de un peridico: poltica, sociedad, deportes.

Un sitio de cocina podra estar organizado en secciones. Una SECTION podra ser
recetas de carne, otra. Recetas de pescado y otra de verduras. Dentro de cada
SECTION tendramos un ARTICLE por cada receta.

Cada SECTION puede estar encabezada por una etiqueta H1, H2,... dentro de
una SECTION suelen haber etiquetas ARTICLE, y tambin etiquetas DIV y P.

Una SECTION no debe ser usada con el nico fin de dar formato, para eso se
utiliza la etiqueta DIV.

Sirve para definir en una seccin la agrupacin temtica del contenido de

una pgina web.

Su sintaxis es:

Etiqueta aside HTML5:

Define una seccin de la web donde el contenido no tiene que estar

necesariamente relacionado con el contenido principal de la web. Generalmente
suelen ser barras laterales o sidebars de una web (Plugins sociales,
publicidades).

La etiqueta <aside> se usa para marcar un trozo de contenido que est

relacionado con el contenido de la pgina web, pero que no es parte del mismo.
 Ejemplos de uso seran: glosario de trminos, grupos de enlaces a pginas
relacionadas, barras laterales, ...

Su sintaxis es:

Etiqueta article HTML5:

Representa una unidad de contenido, es decir, contenido que responde a un tema

concreto. El ejemplo ms claro es un artculo dentro de una revista, por ejemplo,
en una pgina de cocina, un ARTICLE sera cmo elaborar un determinado plato.
En un foro, un ARTICLE sera un post, o entrada en el foro.

Esta etiqueta nos ayuda a definir un contenido especfico dentro de una web
y que por s solo tiene sentido. Un cdigo independiente y con sentido
puede ser:

Mensajes de un foro.

Comentarios.

Artculos de peridicos, revistas y blogs.

Widget y similares.

Su sintaxis es:
 Etiqueta main HTML5

Sirve para definir el contenido principal o ms destacado de una url. Solo

puede haber una etiqueta main.

Dentro de esta nueva etiqueta HTML5 tenemos que tener elementos tales como:
cabecera de la web, men de navegacin, informacin legal de la web, pie de
pgina, barras laterales

Su sintaxis es:

Etiqueta footer HTML5

La etiqueta <footer>se usa para marcar el pie de una seccin o documento y que
contiene informacin sobre el mismo como el autor, licencia, trminos de uso, ...

Este es obvio. Es el pie de pgina y todo lo que lo compone.

Atencin <div> no est muerto:

Estas nuevas etiquetas no significan que ya no se use <div>. Div siempre debe
usarse cuando necesites una caja con objetivos de diseo grfico o cualquier
cosa que no tenga significado semntico.

Contiene la agrupacin de cdigo HTML correspondiente al pie de pgina que

suelen tener habitualmente todas las webs. Muy parecida a la etiqueta header.

Su sintaxis es:
 Infografa:

http://www.anerbarrena.com/nuevas-etiquetas-semanticas-estructura-html5-
4853/

http://www.aulaclic.es/articulos/html5-semantica_2.html