Can the link tag be used outside the head tag?

Navigation
7

Virtually all documentation related to tag <link> suggests calling it inside the block <head></head> .

Example: 

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

Source: w3schools: HTML Tag

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

The question is: even if it works, is it irregular, bad practice or just plain normal ?! Can there be incompatibility with any browser?

An example is the tag <script> which, normally when calling a file, is used inside the tag <head> . When it is an embedded script , it is usually used in any part of the code ( according to the script context ) ...

    
asked by anonymous 16.12.2018 / 14:24

2 answers

7

Yes, it can be used outside the <head> element, but it depends on usage. To import a CSS file as quoted, it is recommended that you leave it at the top of the document, within the <head> element for various considerations.

There are <link> types that are considered to be body-ok which, when having one of these types, is acceptable (or expected) for the element to be in the body of HTML. They are:

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

In addition, the most common use of the <link> element in <body> is when it uses the itemprop attributes to aid in the construction of the document microdata. For example, the product schema gives 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"/><aitemprop="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 that blends the use of <link> and <meta> elements: 

<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>
    
17.12.2018 / 19:06
5

According to documentation of it (corroborated with specification ) it is possible to use within <body> as well, but it is not recommended because it does not makes sense. Its function is something that should be executed before any rendering and then put you can not change values already associated with the document before.

What I usually say is to use only what gives you a clear advantage and you understand well what you are doing. I can not see an advantage to using it in <body> , so ignore that it's possible and treat it as if it's forbidden, until you get a good justification. Other people tried and did not find it.

There may be incompatibility with any browser at all times, because no browser is required to follow all W3C rules, it should only stick to the default.

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

    
16.12.2018 / 14:40
Differences between declarations of variables in C # Sort placement of the DIV in CSS