¿Se puede utilizar <meta> en el <body>? HTML

  • Publicado el 19 mayo, 2016 - Actualizado el

La etiqueta <meta> es utilizada para representar metadatos, comúnmente definidos como «datos de datos», así de redundante es la cosa. Por ejemplo, tomemos como dato a una persona; puede tener un nombre identificativo y una descripción junto a un conjunto de metadatos como puede ser la estatura o la edad.

Un documento HTML tiene muchos metadatos, algunos de ellos con etiquetas propias, como la etiqueta <title>, y otros sin etiquetas propias que se representan en etiquetas más genéricas, como <link>, <style>, <command> o la etiqueta que nos ocupa este post, la etiqueta <meta>.

Cuándo se diseñaron los primeros estándares HTML, la etiqueta <meta> se pensó para representar metadatos del documento y como tales solo se permitían dentro del <head>:

<!doctype html>
<html lang="es-ES">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="twitter:card" content="summary">
    <meta name="twitter:site" content="@cybmeta">
  </head>

Pero un documento HTML puede contener a su vez datos que tengan sus propios metadatos. HTML5 tomó nota de esta situación y a partir de esta versión la etiqueta <meta> puede ser utilizada también en el <body> sin ningún tipo de problema. Pero de momento solo si el atributo itemrpop está presente.

Microdata y etiqueta <meta>

El atributo itemprop forma parte de la sintaxis de los microdatos, introducidos en HTML5 precisamente para permitir grupos anidados de metadatos dentro de un documento. Una de las especificaciones más conocidas de microdatos es la establecida por schema.org.

Los microdatos pueden formar parte del propio documento. Por ejemplo:

<div itemprop="reviews" itemscope itemtype="http://schema.org/Review">
  <span itemprop="name">Opinión</span> de <span itemprop="author">Antonio</span>,
  <time itemprop="datePublished" content="2018-03-25">25 de Marzo de 2018</time> 
  <div itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
    <span itemprop="ratingValue">3</span> estrellas
  </div>
  <span itemprop="description">Bla bla bla bla.</span>
</div>

O puede que no. Por ejemplo, imagina que en el código anterior no quieres mostrar la fecha en la que «Antonio dejó su opinión». Esta fecha ya no sería parte del documento pero sigue siendo un metadato del elemento Review que se ha definido con itemscope itemtype="http://schema.org/Review".

Para representar metadatos cuando no forman parte del documento podemos utilizar la etiqueta <meta>. Por ejemplo, la fecha en la que «Antonio dejó su opinión» se podría representar del siguiente modo:

<div itemprop="reviews" itemscope itemtype="http://schema.org/Review">
  <span itemprop="name">Opinión</span> de <span itemprop="author">Antonio</span>,
  <meta itemprop="datePublished" content="2018-03-25">
  <div itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
    <span itemprop="ratingValue">3</span> estrellas
    <meta itemprop="worstRating" content="1">
    <meta itemprop="bestRating" content="5">
  </div> <span itemprop="description">Bla bla bla bla.</span>
</div>

Antes de HTML5 los navegadores hacían lo que querían con las etiquetas meta que se encontraban en el <body>, aunque generalmente las movían al <head>. Pero a partir de HTML5 la etiqueta <meta> afecta al modelo de contenido cuándo:

  1. contiene el atributo itemprop
  2. contiene el atributo name
  3. no contiene el atributo content
  4. no contiene el atributo http-equiv
  5. no contiene el atributo charset

Esto implica que la etiqueta <meta> es válida fuera del <head> solo si contiene el atributo itemprop y, por tanto, solo si se utiliza para el marcado de microdatos, al menos por ahora, que es cuándo la etiqueta meta entra dentro de las categorías flow content y phrasing content y se hace válida fuera del <head>.