I know that internal CSS should be in the <head></head> section of a (X)HTML document, but does it need to be before/after certain <meta> or <title> elements or can it be any order?
According to the HTML5 spec, non-scoped <style> elements can go basically anywhere in the <head>.
It doesn't matter. As long as it's in the head, it can be before all the <meta> tags, or after the <title> and <script>s.
In short: <style> elements can be anywhere in the <head> element.
The elements in the head tag can be placed in any order.
Any order, if memory serves. However, I've generally experienced the common practice to be after the meta data and title
I assume that it is valid in any order, but you can confirm using: W3C's validator: http://validator.w3.org/
As long as elements in the head tag doesn't rely on each other (for example when a script relies on another script being loaded first), the order doesn't matter.
The browser will be looking for the meta tag that contains the content type and encoding, before decoding the file, so it's good to have that early in the file.
Related
I know I can just put the <link> tag in the body and apparently it works, but I know it's not "valid" html and I want to avoid issues with strict browsers like firefox, which ignore every behavior a web designer expects if it's not defined in the official specification.
So is there some official way to load a stylesheet in the body area of the html?
You can add your css in the head dynamically as well like below:
jsCode:
var head = document.getElementsByTagName("head")[0],
cssLink = document.createElement("link");
cssLink.href = "path/to/filenam.css";
cssLink.id="dynamic-css";
cssLink.media="screen";
cssLink.type="text/css";
head.appendChild(cssLink);
document.head.appendChild( linkElement );
…where linkElement is your style link. Nobody's forcing you to add stuff to the body, just add it to the head.
It is valid to link to a stylesheet in the body
The stylesheet keyword may be used with link elements. This keyword creates an external resource link that contributes to the styling processing model. This keyword is body-ok.
https://html.spec.whatwg.org/multipage/semantics.html#body-ok
https://html.spec.whatwg.org/multipage/links.html#link-type-stylesheet
Actually in older versions of HTML it was illegal to put a link element in the body element and must be only in the head section of the HTML document. From this link, there is a section that states this
it may only appear in the HEAD section of a document
So, just simply load the stylesheet into the head element, there is no possible reason for you, or for anyone to write illegal documents that do not satisfy the rules of W3.org.
<head>
<link rel="stylesheet" href="~/css/file.css" />
</head>
However, there is another question that you might be interested in reading, and in which condition you can add link element to the body section. Read the answer here.
This question already has answers here:
Does <STYLE> have to be in the <HEAD> of an HTML document?
(10 answers)
Closed 9 years ago.
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...
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.
<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.
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
Is type=“text/css” necessary in a <link> tag?
Do we need type="text/css" for <link> tag in HTML5?
The HTML5 spec says that the type attribute is purely advisory and explains in detail how browsers should act if it's omitted (too much to quote here). It doesn't explicitly say that an omitted type attribute is either valid or invalid, but you can safely omit it knowing that browsers will still react as you expect.
Don’t need to specify a type value of “text/css”
Every time you link to a CSS file:
<link rel="stylesheet" type="text/css" href="file.css">
You can simply write:
<link rel="stylesheet" href="file.css">
For LINK elements the content-type is determined in the HTTP-response so the type attribute is superfluous. This is OK for all browsers.
You don't really need it today, because the current standard makes it optional -- and every useful browser currently assumes that a style sheet is CSS, even in versions of HTML that considered the attribute "required".
With HTML being a "living standard" now, though -- and thus subject to change -- you can only guarantee so much. And there's no new DTD that you can point to and say the page was written for that version of HTML, and no reliable way even to say "HTML as of such-and-such a date". For forward-compatibility reasons, in my opinion, you should specify the type.
Let's say I begin an HTML file with the usual DOCTYPE declaration. However, let's also assume that another instance of a DOCTYPE tag is introduced inside the body of that document via some soft of included content (eg. a content template).
From my testing this doesn't seem to be a problem. But I was wondering if anyone know of a situation where this would cause problems?
Thanks,
John
The <DOCTYPE> declaration is required to be the first thing in the document. I don't even think it tolerates whitespace before it very well. Subsequent DOCTYPE declarations will be ignored.
<style type="text/css">..</style>
From the above HTML, I think there should be, but I've never seen it, is there?
Netscape 4 (only) supported Javascript Style Sheets.
As of HTML5, you don't need to supply a type any more, since there are no other relevant style types. The same goes for script.
As far as I know, not in HTML, but XML (and consequently XHTML) support XSL stylesheets using XML style sheet definitions:
<?xml-stylesheet type="text/xsl" href="foo.xsl" title="XSL Rules"?>
It's worth mentioning because the same PI will allow you to attach CSS style sheets to XML documents as well.
There are lots, but CSS is pretty much it as far as browser support goes.
The way less is added to a web page makes it look as if it were a separate kind of style sheet.
<link rel="stylesheet/less" type="text/css" href="styles.less" />
Of course it is just Javascript making a css on the fly.