Ardilla Quio Ardilla Quio

29 de Agosto de 2012

HTML5: Nuevas etiquetas semánticas y estructurales

Después de nuestro artículo de introducción a HTML5, vamos a hacer un repaso a algunas de las nuevas etiquetas que nos trae esta revisión del lenguaje. En particular, en este artículo, nos centraremos en las que han aparecido para añadir valor semántico y estructural a la web.

Algunas de las más importantes etiquetas introducidas en HTML5 son las que añaden valor semántico y estructural, es decir, indican de forma inequívoca las distintas partes de las que consta un página: cabecera, pie, navegación, ...

<header>

La etiqueta <header> se usa para marcar un grupo de elementos de introducción o de navegación dentro de una sección o documento. Normalmente se usa para incluir los encabezados (<h1><h6> o <hgroup>) pero no es obligatorio. También puede contener otras cosas como el índice de una sección, un formulario de búsqueda, logos relevantes, ...

El uso de la etiqueta <header> no está restringido a una por documento, sino que se puede usar una por cada sección del mismo, de esta forma:

<header>
	<h1>Título del documento</h1>
	<p>Más información</p>
</header>

<article>
	<header>
		<h1>Título del artículo</h1>
		<p>Autor del artículo</p>
	</header>
	<p>Texto del artículo</p>
</article>

Podemos ver además en el ejemplo que en HTML5 el uso de múltiples <h1> es válido.

Una cosa a tener en cuenta es que la etiqueta <header> se usa para marcar un grupo de elementos; es decir, si sólo tenemos un elemento no es necesario usar esta etiqueta. Por ejemplo, en este código no sería necesario:

<article>
	<header>
		<h1>Título del artículo</h1>
	</header>
	<p>Texto del artículo</p>
</article>

Sería más correcto de esta forma:

<article>
	<h1>Título del artículo</h1>
	<p>Texto del artículo</p>
</article>

<hgroup>

La etiqueta <hgroup> se usa para agrupar un conjunto de uno o más elementos de encabezado (<h1><h6>).

El uso más típico de esta etiqueta es para agrupar el título de la página con su eslogan. Antes de HTML5 lo más típico era que este tipo de estructura se marcase así:

<div id="header">
	<h1>Nombre de la empresa</h1>
	<p>Eslogan de la empresa</p>
</div>
<div id="content">
	<h2>Noticia 1</h2>
	<p>Desarrollo de la noticia 1</p>

	<h2>Noticia 2</h2>
	<p>Desarrollo de la noticia 2</p>
</div>

Este tipo de estructura dejaba el eslogan al nivel de cualquier otro texto de la web, cuando es evidente que es un texto más importante. Marcarlo con un <h2> no era correcto ya que crearía una nueva sección que en realidad no existe. Con HTML5 podemos usar <hgroup> para darle la importancia que realmente tiene, asociándolo al título:

<hgroup>
	<h1>Nombre de la empresa</h1>
	<h2>Eslogan de la empresa</h2>
</hgroup>

<nav>

La etiqueta <nav> se usa para marcar una sección del documento cuya función es la navegación por la página web.

Esta etiqueta no debe ser usada para marcar todos los grupos de enlaces, únicamente los bloques principales de navegación por la página. Por ejemplo, los típicos enlaces que hay en el pie de página no se deben marcar con <nav>.

<article>

La etiqueta <article> se usa para marcar contenido independiente que tendría sentido fuera del contexto de la página actual y que podría sindicarse, por ejemplo: una noticia, un artículo en un blog o un comentario.

Normalmente un <article> tendrá, además de su propio contenido, también una cabecera (a menudo con <header>) y posiblemente un pie (<footer>).

<section>

La etiqueta <section> se usa para marcar una sección genérica de un documento o aplicación. Una sección, en este contexto, es una agrupación temática del contenido, típicamente con un encabezado.

Ejemplos de uso de <section> podrían ser: capítulos, las pestañas en un menú tabulado o, en la página principal de un sitio web, la introducción, lista de noticias e información de contacto. Sólo se debería usar <section> para contenido independiente al que se podría poner un encabezado y que no sea susceptible de ir marcado con <article>, <aside> o <nav>.

Existe cierta confusión sobre cuándo usar <article> y cuándo <section> ya que ambos se parecen bastante. En general, se debe usar <article> cuando el contenido sea susceptible de ser sindicado (por ejemplo en unas RSS). Un ejemplo de uso de las dos etiquetas podría ser en la página principal de una web con un listado de noticias, de esta forma:

<h1>Título de la página</h1>
<section id="news-list">
	<h2>Noticias</h2>

	<article>
		<h3>Noticia 1</h3>
		<p>Desarrollo de la noticia 1</p>
	</article>

	<article>
		<h3>Noticia 2</h3>
		<p>Desarrollo de la noticia 2</p>
	</article>
</section>

<aside>

La etiqueta <aside> se usa para marcar un trozo de contenido que está relacionado con el contenido de la página web, pero que no es parte del mismo. Ejemplos de uso serían: glosario de términos, grupos de enlaces a páginas relacionadas, barras laterales, ...

<footer>

La etiqueta <footer> se usa para marcar el pie de una sección o documento y que contiene información sobre el mismo como el autor, licencia, términos de uso, ...

Más información

48 comentarios

Anónimo

13/08/2018 19:51:31

Me gusto mucho la explicación me sirvió de mucho en mi tarea

Anónimo

16/03/2018 19:27:19

Gracias, lo hice ahorita en clase

seraven

15/09/2017 00:50:22

Gracias por la aclaracion de la esctructura semanticas

Anónimo

06/11/2015 19:03:13

esta interesante y kiero hacer una pagina casi igual a esta me podrian ayudar es para un proyecto de la universidad

Anónimo

25/08/2015 22:49:27

Las etiquetas estructurales pueden tener un identificador?

cindy nuñez amador

28/07/2015 17:18:51

no me gusto esa chanchada

Anónimo

28/07/2015 17:18:13

casi no le entendi lo mere complicado un poco pero leendo y leendo le boy a entender

Roxana Baldeti

12/05/2015 00:15:51

Oye tio

muy buenisimo

excelente yo me caso contigo XD

Anónimo

06/05/2015 22:08:04

hola buenas,tengo un problema con una duda respecto a un test que no encuentro su respuesta,no se si esta bien o mal,le comento:

Me preguntaron esto:

El elemento aside se utiliza para:

-Caracterizar un contenido independiente respecto al resto de la página web

-contener un banner en un lateral de la página web

-caracterizar un contenido relacionado directamente con el resto de la página web

-Contener un banner en un lateral de la página web

-Caracterizar un contenido que guarda relacion con el de la seccion que le contiene

yo puse esta:

Caracterizar un contenido independiente respecto al resto de la página web (es correcta¿? o seria otra)

espero su respuesta,gracias

Anónimosd

24/02/2015 19:18:14

Hola, necesito saber como relacionar clases en una hoja de estilos, condicionando a como debe actuar una clase segun la clase que tenga su clase hermana.

Anónimo

05/02/2015 14:41:15

Eso es bueno para los diseñadores y también para las arañas que tienen que rastrear las páginas y entenderlas. ¿Para qué sirve? El HTML 5 disminuye el tiempo de carga de tus páginas

Yónatan Sales

05/02/2015 14:38:21

HTML5 es la versión mas reciente que define la norma HTML, que viene ayudar en la tecnología de la informática ya que nos permite utilizar nuevos elementos para los desarolladores de paginas Web. Esta ya permite hacer el nuevo elemento <canvas> que se utiliza para dibujar con secuencias de comando a través de JavaScrip.

AnónimoEscobar Marvin

05/02/2015 14:33:45

HTML5 es un lenguaje en el que se escriben las páginas Web, que permite hacer enlaces (hipertexto) y que es leído por los navegadores para poder mostrar la información en la pantalla del ordenador de una forma correcta.

La información que dice de las nuevas etiquetas, semánticas y estructurales , tiene una buena redacción ,

es una manera mas fácil de explicar las etiquetas.

Roberto Escobar

05/02/2015 14:30:04

esta buena la informacion solo faltaria agregar la etiqueta <title> ya que tambien es de suma importancia.

Nacho

05/02/2015 14:28:49

Me ha gustado el articulo, muy bueno.

e aprendido mas de lo que es html5 espero tener mas información

acerca de ello

Adolfo-Lopez

05/02/2015 14:27:46

La Información que redacta sobre la nuevas etiquetas, semánticas y estructurales tiene una buena explicación y contiene buen contenido de información que tiene como fin el aprendizaje del tema nos permite una mayor interacción entre nuestras páginas web y contenido media (vídeo, audio, entre otros) así como una mayor facilidad a la hora de codificar nuestro diseño básico.

Milton-Girón

05/02/2015 14:27:18

La información sobre las nuevas etiquetas semánticas y estructurales esta muy bien explicado, su importancia, su finalidad y las relaciones que existen. También , ofrece versatilidad en el manejo y animación de objetos simples, imágenes etc.

Angel Ajanel

05/02/2015 14:25:57

La información está muy bien, pero está algo incompleta. Tiene las etiquetas más utilizadas pero hace falta una que también es importante, como <!DOCTYPE html>, necesita especificar un poquito más la información que ya tiene.

Anónimo

05/02/2015 14:22:42

Esta muy bien todo el contenido , me parece muy útil para saber que es HTML y muchas gracias por la información se le agradece.

Mayron Vasquezmo

05/02/2015 14:22:21

HTML5 es el lenguaje que se emplea para el desarrollo de páginas de Internet. Está compuesto por una seríe de etiquetas que el navegador interpreta y da forma en la pantalla. HTML5 dispone de etiquetas para imágenes, hipervínculos que nos permiten dirigirnos a otras páginas, saltos de línea, listas, tablas, etc

mi.pc

14/11/2014 05:48:45

Me encanta toda la información.

Luis

30/06/2014 10:27:26

Hola abr4xas.

<article class="post">

...

</article >

es correcto. El <div> puedes añadirlo si lo necesitas para algún retoque en la presentación, pero no es necesario.

Un saludo.

abr4xas

29/06/2014 02:05:58

Saludos,

Tengo una duda y quizas puedas ayudarme... Estoy haciendo una plantilla para mi blog y tengo mis etiquetas de la siguiente forma:

<div class="post">

...

</div>

Seria correcto hacer:

<article class="post">

...

</article >

O simplemente hacer

<article>

<div class="post">

...

</div>

</article>

Gracias :)

isaac

13/03/2014 21:56:13

Hola compañeros por mas que leo no llego a conprender el tema de HTML5: Modelos de contenido, categorias, Metadata content y Flow content.

Quien sepa de tema podria dar una buena explicación o algun post donde de explique bien.

http://articulosbase.com/internet/diseno-web/html5-modelo...

isaac

13/03/2014 21:55:21

Voy a intentar contestarme un poco yo, ya que nadie parece saber del tema, me gustaría que alguien me dijera si estoy en lo cierto y aportara algo de información al respecto por favor:

Antiguamente html4 definía así los elementos de bloque y en line:

La mayoría de elementos de bloque pueden contener en su interior elementos en línea y otros elementos de bloque. Los elementos en línea sólo pueden contener texto u otros elementos en línea. En otras palabras, un elemento de bloque no puede aparecer dentro de un elemento en línea. En cambio, un elemento en línea puede aparecer dentro de un elemento de bloque y dentro de otro elemento en línea.

Los elementos en línea definidos por HTML son: a, abbr, acronym, b, basefont, bdo, big, br, cite, code, dfn, em, font, i, img, input, kbd, label, q, s, samp, select, small, span, strike, strong, sub, sup, textarea, tt, u, var.

Los elementos de bloque definidos por HTML son: address, blockquote, center, dir, div, dl, fieldset, form, h1, h2, h3, h4, h5, h6, hr, isindex, menu, noframes, nos-cript, ol, p, pre, table, ul.

Ahora html5 los define como he puesto en el enlace y los divide en categorias:

Categorías

• Metadata content

• Flow content

• Sectioning content

• Heading content

• Phrasing content

• Embedded content

• Interactive content

Por ejemplo cuando nos vamos a la especificación por ejemplo del elemento h1, http://www.w3.org/TR/html-markup/h1.html, podemos ver que sale esto;

Elementos primarios permitidos

Cualquier elemento que puede contener elementos de flujo , hgroup

Según entiendo un h1 puede ser contenido por un hgrop y por cualquier elemento que pueda contener elementos de flujo, vale. Si nos vamos al listado de elementos de flujo vemos que la etiqueta <a> se considera en esta categoría. Hice una prueba y metí h1 dentro de una etiqueta <a>, le paso el validador w3c y no me da ningún fallo al validarlo en htm5, si lo pasamos a validar en htm4 si da un error, “un elemento en línea no puede contener un elemento de bloque”

1. ¿Significa esto que html5 permite que elementos en línea contenga elementos de bloque?

2. Si esta respuesta es cierta comprendería mejor ahora ahora todo el tema de las categorías, Modelos de contenido..

isaac

13/03/2014 21:54:55

hola de nuevo luis te escribo porque llevo dias estudiando lo ultimo que te comente sobre el flujo de contenido el cual me mandastes un link. llevo dias estudiandolo ya que para mi es importante y la verdad que me cuesta comprender todo este tema, para asi poder saber que etiqueta puede contener a un aside por ejemplo, h1...he puesto en la web un mensaje sobre esto y parece que nadien sabe del tema, te lo voy a exponer aqui las conclusiones que he sacado del link que me enviastes, ya que la verdad hay muy poca informacion googleando sobre esto:

lo pego en otro mensaje ya que no cabe todo..

isaac

11/03/2014 21:34:55

Hola Luis, lo de ingles si es verdad que tengo que darle un poquito de caña, pero aun así llevo 8 años diseñando webs con lo básico de ingles, porque todo lo que he aprendido ha sido de artículos en español, pero hay cosas que a veces es difícil encontrarlas en español. Pero bueno...

Todo esto de html5 la verdad que es un poco lio, las explicaciones de aquí y allá, que al final es normal que uno se líe. Voy a intentar estudiar lo del tema del flujo de contenido a ver si lo comprendo un poco mejor y buscar algunos artículos en español, gracias de nuevo.

Luis

11/03/2014 10:50:24

Hola isaac.

1.- http://www.w3.org/TR/2011/WD-html5-20110525/content-model...

2.- Necesitas aprender más inglés; para este trabajo es necesario. Traducir las cosas con Google Translator hace que no se entienda nada. Lo que significa es que esta etiqueta (<aside> o <figure>) puede ir dentro de (o ser hija de) ... Sí, en tu ejemplo el elemento padre es el <div> (es su primer ancestro) y la etiqueta <span> es el hijo (primer descendiente). Te comento lo de los ancestros y descendientes porque puedes verlo así en otros sitios y se refiere a todo el árbol, no sólo a padres/hijos.

3.- La traducción de "flow content" por "contenido dinámico" es confusa. Yo lo traduciría más bien como "contenido de flujo". Lo que se conoce como "contenido dinámico" es contenido que de alguna forma se modifica (normalmente con javascript). A lo que se refiere en este caso es a los elementos de la respuesta 1 (etiqueta de flujo de contenido) entremezclados con texto normal (esto que estoy escribiendo, por ejemplo).

De todas formas, creo que te estás metiendo en unos lios tremendos. Me da la impresión de que estás procastinando. Para hacer empezar a hacer páginas web no hay necesidad de meterse tan a fondo con la teoría pura. Lo que estás haciendo es como si para hacer una casa estuvieses estudiando de qué están hechos los ladrillos.

isaac

10/03/2014 20:44:21

Hola Luis, perdona por ser tan insistente, pero eres de los pocos en la web que contestas las preguntas de las personas que menos sabemos y nos ayuda a aprender más, gracias.

Se me olvidaron unas preguntas en el último mensaje ya que tus respuestas me llevan a llenarme de algunas preguntas y quiero exponértelas aquí , ya que no encuentro información sobre el tema. Cuando me pusiste en el último mensaje esto:

La definición oficial es que se puede poner donde se pueda poner una etiqueta de flujo de contenido: http://www.w3.org/TR/html-markup/aside.html

1. ¿Que es esto de etiquetas de flujo de contenido? Entiendo el flujo de html, ese si. Entro en la página en ingles que me enviaste y veo que habla de contenido de flujo y veo etiquetas de bloque y en línea, que es todo esto no lo comprendo:

Elementos de flujo

Flow elements

phrasing elements or a or p or hr or pre or ul or ol or dl or div or h1 or h2 or h3 or h4 or h5 or h6 or hgroup or address or blockquote or ins or del or object or map or noscript or section or nav or article or aside or header or footer or video or audio or figure or table or form or fieldset or menu or canvas or details

2. Tambien en la especificación de aside, figure….. sale un apartado que pone “elementos primarios permitidos”, esto se refiere a los elementos padre de un elementos, es decir, dentro de un div tengo un span, ¿el elementos primario es el div? al estar esto en ingles también me confunde un poco.

3. Despues también sale otro apartado:

Contenidos permitidos:

Por ejemplo en algunos sale; cero o más estilo de los elementos , seguidos de contenido dinámico

¿Que es esto de contenido dinamico? Según la traducción pone esto que no entiendo:

El contenido dinámico se compone de elementos de flujo entremezclados con datos de caracteres normales

mil gracias de nuevo

Luis

10/03/2014 20:12:58

Hola isaac.

Me refiero a que tiene las mismas restricciones que un elemento <section>.

Comentario anónimo
Comentar como usuario