web-dev-qa-db-ja.com

<link>（rel = "stylesheet"ではない）を<body>で使用できますか？

Google、Yahoo、MSによる新しい schema.org では、<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>は、ヘッドセクションでのみ使用できます。

注：この要素はheadセクションにのみありますが、何度でも表示できます。

私はW3Cスタイルに慣れていないため、正確な W3Cによる定義 を理解できませんでした。誰でも私を助けることができます：<link>（HTML5では、schema.orgはHTML5タグを使用するため）またはGoogle、Yahoo、MSは標準を破りますか？

html5w3c-validation
40
Aufziehvogel

WHATWG HTML仕様では、LINK- elementにはrel- attributeを含めることができます：

<link rel="…" />

またはitemprop- attribute

<link itemprop="…" />

両方ではありません。

rel- versionはHEAD- elementsに制限されていますが、itemprop- versionはHEAD要素とBODY- elementsの両方に表示されます。

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

このWHATWG仕様とは：

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

29
feeela

リンクはBODYで許可されています。 HTML5でリンクタグの検証と同じ問題が発生しましたが、これで解決しました

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

propertyとrelタグの両方が必要です

PDATE 2016（以下のyuyokkに感謝）：最近、HTML5仕様に変更があり、本文にリンクを含めることができます

54
Mladen Janjetovic

HTML5仕様 に変更があり、最近は本文にリンクを含めることができます

10
iurii

簡単に言えば、上記の答えに追加したいと思います

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

検証エラーを解消しています。 property=""（RDFa構文またはitemprop=""（Microformat構文）属性を追加するだけでも十分です。 @ Jukka K. Korpela および @ sideshowbarker 彼らの答え、理由は HTML5 + RDFa 1.1仕様 にあります。

上記のソリューションは基本的に、クリティカルパスの実装で必要に応じてバリデーターがインラインスタイルシートを無視できるようにするための回避策です。バリデータの将来のバージョンでは、できれば時代遅れになるでしょう。

ちなみに、HTML5では type属性 も 自己終了タグ 構文も必要ありません。

4
Volker E.

コードがクロスブラウザー互換であることを確認するには、次のようにスタイルシートを含めます。

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

ボディにスタイルシートを配置することは通常、悪い習慣と見なされますが、場合によっては役立ちます。

  1. 他の要素の前にスタイルをロードする必要がある
  2. 頻繁に発生する特定のWebサイトの要素（連絡先ボックス、メニューヘッダーなど）をphpで含めると、対応するスタイルシートへのリンクをphpテンプレートに配置できます。テンプレートを含めると、ヘッドセクションに何も追加することなくスタイルシートが自動的にロードされます。
0
Akim

他の人が述べたように<link>は本体で使用できますが、ときどき使用できます。これらの場合、「body-ok」と呼ばれます。 body-okのリンクタイプのリストを次に示します。 https://html.spec.whatwg.org/multipage/links.html#body-ok

2018年6月20日の時点で、以下を本文で使用できます。

<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