Разрешено ли использование <link>(не rel = "stylesheet") в <body>? - PullRequest
Новая
       2

Разрешено ли использование <link>(не rel = "stylesheet") в <body>?

40 голосов
/ 04 июня 2011

Новый schema.org от Google, Yahoo и MS рекомендует использовать атрибут <link> для отображения статуса товаров в интернет-магазине: 

<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>

Пока что, согласно w3schools.org <link> допускается только в разделах заголовка:

Примечание. Этот элемент добавляется только в раздел заголовка, но может появляться любое количество раз.

Я не привык к стилю W3C, поэтому я не смог понять точное определение по W3C .Кто-нибудь может мне помочь: действительно ли разрешено использовать <link> внутри тела (в HTML5, поскольку schema.org использует теги HTML5) или Google, Yahoo и MS нарушают стандарт?

Ответы [ 6 ]

54 голосов
/ 05 марта 2014

Ссылка разрешена в ТЕЛЕ.У меня была та же проблема с проверкой тега ссылки в HTML5, и я решил ее с помощью этого 

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

Необходимо иметь теги property и rel

ОБНОВЛЕНИЕ 2016 (спасибо yuyokk ниже): Недавно в спецификацию HTML5 было внесено изменение, позволяющее иметь ссылки в теле

29 голосов
/ 07 июня 2012

Спецификация WHATWG HTML упоминает, что LINK -элемент может иметь атрибут rel: 

<link rel="…" />

или itemprop -атрибут 

<link itemprop="…" />

но не оба.

Версия rel ограничена элементом HEAD, тогда как версия itemprop может появляться как в элементах HEAD, так и BODY.

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

Что это за спецификация WHATWG:

whatwg.org / функция / веб-приложения / текущие работы / многостраничные / introduction.html # это-это-html5?

10 голосов
/ 04 марта 2016

В последнее время произошли изменения в HTML5 spec , которые позволяют иметь ссылки в теле

4 голосов
/ 18 мая 2015

Я хотел бы добавить к ответам выше, вкратце 

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

устраняет ошибку проверки.Достаточно даже простого добавления атрибута property="" (синтаксис RDFa или itemprop="" (синтаксис микроформата). Как @ Юкка К. Корпела и @ sideshowbarker объясняют в своих ответах, причина кроется вв спецификации HTML5 + RDFa 1.1 .

Решение, приведенное выше, в основном является обходным решением, позволяющим валидатору игнорировать встроенные таблицы стилей по мере необходимости в реализациях критических путей. В будущих версиях валидаторов оно, надеюсь, устареет.

Кстати, в HTML5 вам не нужен ни атрибут type , ни самозакрывающийся тег синтаксис.

0 голосов
/ 17 сентября 2018

Чтобы убедиться, что код кросс-браузерно совместим, лучше включите вашу таблицу стилей, например: 

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

Размещение таблицы стилей в теле обычно считается плохой практикой, однако в некоторых случаях это может быть полезно:

  1. Вы хотите, чтобы стиль загружался до других элементов
  2. Если вы включили некоторые часто встречающиеся элементы веб-сайта (поле контактов, заголовок меню и т. Д.) По php, вы можете поместить ссылку на соответствующую таблицу стилей в шаблон php. После того, как вы включите шаблон, таблица стилей будет автоматически загружена без добавления чего-либо в раздел head.
0 голосов
/ 20 июня 2018

Как отмечают другие <link> можно использовать в организме, но только иногда. В этих случаях это называется «тело в порядке». Вот список типов ссылок, с которыми можно работать: https://html.spec.whatwg.org/multipage/links.html#body-ok

По состоянию на 20 июня 2018 года в теле может использоваться следующее: 

<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>
...