Can the <link> tag be used outside the <head> tag?

Asked

Viewed 384 times

6

Practically all documentation relating to tag <link> suggest her call inside the block <head></head>.

Example:

<head>
  <link rel="stylesheet" type="text/css" href="theme.css">
</head>

Source: w3schools: HTML Tag

But, after testing in Chrome (updated), I realized that the call works anywhere in HTML.

The question is: even if it works, is it irregular, bad practice or simply normal?! There may be incompatibility with some browser?

An example is the tag <script> which, usually when calling a file, is used within the tag <head>. When you’re a script incorporated, normally used in any part of the code (according to the context of the script)...

html

2 answers

7


Yes, can be used outside the element <head>, but it depends on the use. To import a CSS file, as mentioned, it is recommended to leave it at the top of the document, inside the element <head> for various considerations.

There are types of <link> that are considered body-ok that, when possessing one of these types, it is acceptable (or expected) that the element is in the HTML body. It is they:

  • dns-prefetch
  • modulepreload
  • pingback
  • preconnect
  • prefetch
  • preload
  • prerender
  • stylesheet

In addition, the most common use of the element <link> in the <body> is when he uses the attributes itemprop to assist in the construction of the document’s Microdata. For example, the schema product brings the following example:

<div itemscope itemtype="http://schema.org/ItemList">
  <link itemprop="url" href="http://multivarki.ru?filters%5Bprice%5D%5BLTE%5D=39600" />
  <span itemprop="numberOfItems">315</span>
  <div itemprop="itemListElement" itemscope itemtype="http://schema.org/Product">
    <img alt="Photo of product" itemprop="image"
     src="http://img01.multivarki.ru.ru/c9/f1/a5fe6642-18d0-47ad-b038-6fca20f1c923.jpeg" />
    <a itemprop="url" href="http://multivarki.ru/brand_502/">
      <span itemprop="name">BRAND 502</span>
    </a>
    <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
      <span itemprop="price">4399 р.</span>
    </div>...
    <div itemprop="itemListElement" itemtype="http://schema.org/Product">
    ...
    </div>
  </div>
</div>

Or the schema event mixing the use of elements <link> and <meta>:

<div itemscope="" itemtype="http://schema.org/MusicEvent">
  <div itemprop="location" itemscope="" itemtype="http://schema.org/MusicVenue">
    <meta itemprop="name" content="Chicago Symphony Center"/>
    <link itemprop="sameAs" href="http://en.wikipedia.org/wiki/Symphony_Center"/>
    <meta itemprop="address" content="220 S. Michigan Ave, Chicago, Illinois, USA"/>
  </div>
  <div itemprop="offers" itemscope="" itemtype="http://schema.org/Offer">
    <link itemprop="url" href="/examples/ticket/12341234" />
    <meta itemprop="price" content="40"/>
    <meta itemprop="priceCurrency" content="USD" />
    <link itemprop="availability" href="http://schema.org/InStock"/>
  </div>
  <h2 itemprop="name">Shostakovich Leningrad</h2>
  <div>
    <div itemprop="startDate" content="2014-05-23T20:00">May<span>23</span></div>
    <div>8:00 PM</div>
    <div>
      <strong>Britten, Shostakovich</strong>
    </div>
  </div>
  <div>
    <p>Jaap van Zweden conducts two World War II-era pieces showcasing the glorious sound of the CSO.</p>
  </div>
  <div>
    <h3>Program</h3>
    <ul>
      <li itemprop="workPerformed" itemscope="" itemtype="http://schema.org/CreativeWork">
        <link itemprop="sameAs" href="http://en.wikipedia.org/wiki/Peter_Grimes" />
        <span itemprop="name"><strong>Britten</strong> Four Sea Interludes and Passacaglia from <em itemprop="name">Peter Grimes</em></span>
  </li>
      <li itemprop="workPerformed" itemscope="" itemtype="http://schema.org/CreativeWork">
      <link itemprop="sameAs" href="http://en.wikipedia.org/wiki/Symphony_No._7_(Shostakovich)" />
      <span itemprop="name"><strong>Shostakovich</strong> Symphony No. 7 <em>(Leningrad)</em></span>
  </li>
    </ul>
  </div>
  <div>
    <h3>Performers</h3>
    <div itemprop="performer" itemscope="" itemtype="http://schema.org/MusicGroup">
      <img src="/examples/cso_c_logo_s.jpg" alt="Chicago Symphony Orchestra" />
      <link itemprop="sameAs" href="http://cso.org/" />
      <link itemprop="sameAs" href="http://en.wikipedia.org/wiki/Chicago_Symphony_Orchestra" />
      <div>
        <a href="examples/Performer?id=4434"><span itemprop="name">Chicago Symphony Orchestra</span></a>
      </div>
    </div>
    <div itemprop="performer" itemscope="" itemtype="http://schema.org/Person">
      <link itemprop="sameAs" href="http://www.jaapvanzweden.com/" />
      <img itemprop="image" src="/examples/jvanzweden_s.jpg" alt="Jaap van Zweden"/>
      <div>
        <a href="/examples/Performer.aspx?id=11324"><span itemprop="name">Jaap van Zweden</span></a>
      </div>
      <div>conductor</div>
    </div>
  </div>
</div>

5

According to the documentation of him (corroborated with the specification) it is possible to use inside the <body> also, but it is not recommended even because it does not make sense. Your function is something that should be executed before any rendering and put afterwards you cannot change values already associated with the document before.

What I usually say is just use what brings you a clear advantage and that you understand well what you are doing. I can’t see an advantage to using it on <body>, then ignore that it is possible and treat it as if it were forbidden, until you can give a good justification. Other people tried and did not find.

There may be incompatibility with some browser always, because no browser is required to follow all rules of the W3C, only should to maintain the standard.

<script> makes a little more sense because it has the scope issue, even though it should not be used so loosely, in more organized code need not be in other parts of HTML code. There is even a performance issue.

Browser other questions tagged html

You are not signed in. Login or sign up in order to post.