web-dev-qa-db-fra.com

<Link> (non rel = "stylesheet") est-il autorisé à être utilisé dans <body>?

Le nouveau schema.org de Google, Yahoo et MS recommande l'utilisation de l'attribut <link> pour afficher le statut des produits dans une boutique en ligne:

<div itemscope itemtype="http://schema.org/Offer">
  <span itemprop="name">Blend-O-Matic</span>
  <span itemprop="price">$19.95</span>
  <link itemprop="availability" href="http://schema.org/InStock"/>Available today!
</div>

Pourtant, selon w3schools.org<link> n'est autorisé que dans les sections de tête:

Remarque: cet élément ne figure que dans la section de tête, mais il peut apparaître autant de fois que nécessaire.

Je ne suis pas habitué au style W3C, je ne pouvais donc pas comprendre la définition exacte de par W3C . Quelqu'un peut-il m'aider: est-il vraiment permis d'utiliser <link> dans le corps (en HTML5, car schema.org utilise des balises HTML5) ou Google, Yahoo et MS enfreignent-ils la norme?

40
Aufziehvogel

La spécification HTML WHATWG mentionne que l'élément LINK- peut soit avoir un attribut rel-:

<link rel="…" />

ou un attribut itemprop-

<link itemprop="…" />

mais pas les deux.

La version rel- est limitée à l'élément HEAD-, alors que la version itemprop- peut apparaître à la fois dans les éléments HEAD et BODY-.

http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-link-element

Quelle est cette spécification WHATWG:

whatwg.org/specs/web-apps/current-work/multipage/introduction.html#is-this-html5?

29
feeela

Le lien est autorisé dans BODY . J'ai eu le même problème en validant la balise link en HTML5 et je l'ai résolu avec ceci

<link rel="stylesheet" property="stylesheet" href="css/homepage.css">

Besoin d'avoir les balises property et rel

MISE À JOUR 2016 (grâce à yuyokk ci-dessous):

52

Il y a eu un changement dans HTML5 spec récemment qui permet d'avoir des liens dans le corps 

10
iurii

J'aimerais ajouter aux réponses ci-dessus, en bref

<body>
    <link rel="stylesheet" property="stylesheet" href="pathto.css">
</body>

fait disparaître l'erreur de validation. Même le simple ajout de l'attribut property="" (syntaxe RDFa ou itemprop="" (syntaxe Microformat) est suffisant. Comme @Jukka K. Korpela et @sideshowbarker expliquer dans leurs réponses, la raison réside dans le HTML5 + RDFa 1.1. spec

La solution ci-dessus est essentiellement une solution de contournement consistant à laisser le validateur ignorer les feuilles de style en ligne, le cas échéant, dans les implémentations de chemins critiques ..___ Dans les futures versions des validateurs, il devient, espérons-le, obsolète.

En passant, en HTML5, vous n'avez pas besoin d'attribut type ni de balise à fermeture automatique syntaxe.

4
Volker E.

Pour vous assurer que le code est compatible avec plusieurs navigateurs, incluez plutôt votre feuille de style comme ceci:

<style>
   @import url(style.css);
</style>

Mettre une feuille de style dans le corps est généralement considéré comme une mauvaise pratique, mais cela peut être utile dans certains cas:

  1. Vous voulez que le style soit chargé avant d'autres éléments
  2. Si vous incluez certains éléments du site Web fréquemment rencontrés (une boîte de contact, un en-tête de menu, etc.) par php, vous pouvez insérer le lien vers la feuille de style correspondante dans le modèle php. Une fois que vous avez inclus le modèle, la feuille de style sera automatiquement chargée sans rien ajouter à la section head.
0
Akim

Comme indiqué par les autres, <link> peut être utilisé dans le corps, mais seulement parfois. Dans ces cas, on parle de "body-ok". Voici une liste des types de lien corps-ok: https://html.spec.whatwg.org/multipage/links.html#body-ok

À compter du 20 juin 2018, les éléments suivants peuvent être utilisés dans le corps:

<body>
    <link rel="dns-prefetch">
    <link rel="modulepreload">
    <link rel="pingback">
    <link rel="preconnect">
    <link rel="prefetch">
    <link rel="preload">
    <link rel="prerender">
    <link rel="stylesheet">
</body>
0
irnikola