Inicia sesión


Se puede utilizar meta en el body

Se puede utilizar meta en el bodyLa 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">
  </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="2019-03-25">25 de Marzo de 2019</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="2019-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>.


  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-08-08
  • Categorias: Diseño Web html5 WebSite webmasters Tutorial




Información
Usuarios que no esten registrados no pueden dejar comentarios, te invitamos a que te registre!






Crecimiento mundial en el mercado de software de diseño PCB para el 2020 - 2029

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-11-13
  • Categorias: Desarrolladores Lenguajes De Programacion Software Noticias Tutorial

Historia de los sistemas operativos

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-11-12
  • Categorias: Microsoft Windows Apple Ordenador Noticias Tutorial Informatica

Vacía tu mente, no tengas forma, ni figura

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-11-12
  • Categorias: Estilo Noticias Tutorial

Curso de iniciación de JavaScript

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-10-21
  • Categorias: Lenguajes De Programacion javascript Cursos Noticias Tutorial

Cómo insertar código JavaScript

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-10-21
  • Categorias: Lenguajes De Programacion javascript Cursos Noticias Tutorial

Expresiones JavaScript para especificar valores de atributos en HTML

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-10-21
  • Categorias: Lenguajes De Programacion javascript Cursos Noticias Tutorial