HTML5 está aquí para quedarse

Las especificaciones de HTML5 todavía se están definiendo (en borrador – draft) por tanto tenemos que ir echando un ojo a la evolución de estas especificaciones.

En HTML4 existen dos modelos de contenido, inline y block.

Block: div, form, h1..h6, li, ol, p, pre, table, ul
Inline: e, em, img, input, label, span

Estos elementos definen la estructura y lógica del contenido. Debido a la semántica del contenido para buscadores el modelo de contenido es vital en HTML5. Es muy importante comprender la diferencia entre estos tipos de modelos de contenido.

En HTML5 existen varios tipos de modelos de contenido:

  • Metadata
  • Embedded
  • Interactive
  • Heading
  • Phrasing
  • Flow
  • Sectioning

Es muy importante tener en cuenta que todo el contenido que metamos en nuestras web está englobado dentro de esta categorias. A continuación paso a explicar cada uno de ellos.

Metadata

Este modelo de contenido define la presentación y el comportamiento del resto del contenido, son:

base, command, link, meta, noscript, style, title

Embeded

Ese contenido que importa o trae otros recursos a los documentos, son:

audio, canvas, embed, iframe, img, math, object, svg, video

Interactive

Ese contenido especialmente relacionado con la interacción del usuario, son:

a, audio, button, details, embed, iframe, img, input, label, menu, object, select, textarea, video

Heading

Define las cabeceras de las secciones, son:

h1, h2, h3, h4, h5, h6, hgroup

Phrasing

Es el texto del documento también usado para marcar el texto dentro de los párrafos, es lo que se denominaba en HTML4 contenido inline, son:

a, abbr, area, audio, b, bdo, br, button, canvas, cite, code, command, datalist, del, dfn, em, embed, i, iframe, img, input, ins, kbd, keygen, label, link, map, mark, math, meta, meter, noscript, object, output, progress, q, ruby, samp, script, select, small, span, strong, sub, sup, svg, textarea, time, var, video, wbr

Flow

Cubre la mayor porte de los elementos en HTML5, son aquellos que forman parte del flujo del documento, son:

a, abbr, address, area, article, aside, audio, b, bdo, blockquote, br, button, canvas, cite, code, command, datalist, del, details, dfn, div, dl, em, embed, fieldset, figure, footer, form, h1,..h6, header, hgroup, hr, i, iframe, img, input, ins, kbd, keygen, label, link, map, mark, math, menu, meta, meter, nav, noscript, object, col, ol, output, p, pre, progress, q, ruby, samp, script, section, select, small, span, strong, style, sub, sup, svg, table, textarea, time, ul, var, video, wbr

Sectioning

El contenido que define el ámbito de cabeceras y pies. Usando estos elementos se crearán nuevas secciones en el documento, son:

article, aside, nav, section

Algunos elementos aparecen en varios módulos de contenido. Casi todo es contenido dentro del modelo Flow (Flujo), Phrasing, Interactive, Metadata y embedded comparten elementos y heading y sectioning son ambas independientes.

Estos son los distintos modelos de contenido que presenta HTML5. Es muy importante saber cómo usar cada elemento porque la información que enviamos a los navegadores es la que se usará, entre otras cosas, para posicionar en buscadores o dar importancia a una información u a otra.

Recursos para estudiar más

Esta entrada fue publicada en CSS3. Guarda el enlace permanente.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

*

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>