7

So first off, I know that the <link> tag to link a CSS external style sheet should be in the <head> section, and that it is very unorthodox to place it outside the head.

However, I am using head and footer includes for modular web design, and there are some CSS stylesheets which apply to certain pages and not others.

Having placed some <link> tags within the <body> section of a certain page, thanks to the sweet accommodation of modern browsers I have so far experienced nothing wrong except in IE.... but, personally I don't care too much about IE at the moment.

So, apologies to the HTML purists, but I must ask: what negative consequences are there for linking CSS external stylesheets outside of <head>?

In my research, people have usually just stuck to referencing w3schools as stating "link your CSS stylesheet in the head", but not elaborating too much on why: Do <link href=""> tags only go in the <head> tag?

"Validity" is given as one answer, but what does that entail? Search engine friendliness? I don't see any benefit to me if search engines read my stylesheets or not...

Community
  • 1
  • 1
LazerSharks
  • 3,089
  • 4
  • 42
  • 67
  • 1
    Is this a duplicate? The referenced question specifies the – Dan Eastwell Nov 28 '14 at 15:21
  • Agreed... not a duplicate. Different answers to different questions. In this case, it's allowed in HTML5. In the other question's case, it's only allowed in scoped elements. – Marcin N. May 04 '16 at 17:43

2 Answers2

17

Quoted from the HTML 4.01 Specification

This element defines a link. Unlike A, it may only appear in the HEAD section of a document, although it may appear any number of times.

The HTML5 specification however does not mention the tag must appear in the HEAD section. So if you use them inside the body make sure you use the HTML5 DOCTYPE e.g.

<!DOCTYPE html>

The HTML5 specification states the following.

A link element must have a rel attribute.

And also

Note

If the rel attribute is used, the element is restricted to the head element.

Bart
  • 17,070
  • 5
  • 61
  • 80
1

<Link> element defines the relationship between the current document and another resource i.e. style sheet.

<head> tag is the container for all head elements like script,link, title and meta tags. These head elements are not being displayed in the document when viewed in browser.

We can place the <link> elements in the body section also but we can't place the other html elements in the <head> section. For example if include <a> element in the <head> section then we can't view i in browser as it's not part of the document <body> section.

Best practice is to keep the <link> elements at the top of the document i.e in <head> section so that all elements which has styles in style sheet will get applied before loading the page itself. If we keep <link> at the bottom or middle of the <body> section then document will display all the content first and styles will get applied later.

rene
  • 41,474
  • 78
  • 114
  • 152
web2008
  • 914
  • 4
  • 11