Does ≪Style≫ Have to Be in the ≪Head≫ of an HTML Document

Does STYLE have to be in the HEAD of an HTML document?

style is supposed to be included only on the head of the document.

Besides the validation point, one caveat that might interest you when using style on the body is the flash of unstyled content. The browser would get elements that would be styled after they are displayed, making them shift on size/shape/font and/or flicker. It is generally a sign of bad craftsmanship. Generally you can get away with putting style anywhere you want, but try to avoid it whenever it is possible.

HTML 5 introduced a scoped attribute that allowed style tags to be included everywhere in the body, but then they removed it again.

Is it correct to use the style tag outside of the head element?

style is supposed to be included only on the head of the document.

Besides the validation point, one caveat that might interest you when using style on the body is the flash of unstyled content. The browser would get elements that would be styled after they are displayed, making them shift on size/shape/font and/or flicker. It is generally a sign of bad craftsmanship. Generally you can get away with putting style anywhere you want, but try to avoid it whenever it is possible.

HTML 5 introduced a scoped attribute that allowed style tags to be included everywhere in the body, but then they removed it again.

According to the W3 specs, <link> tags are only supposed to go in the <head> section:

References

For HTML 4.01: http://www.w3.org/TR/html401/struct/links.html#edef-LINK

For HTML5: http://www.w3.org/TR/html5/document-metadata.html#the-link-element

Validation Issues

If you put a tag within the body of the HTML document, it will not validate using validate.w3.org

Why is `style` declared inside `head` of the HTML file?

The head contains general information about the whole document.

The body contains the content.

A stylesheet isn't the content, it is information about how the content should look.

A script element going at the end of the body is a performance hack.

It is allowed in the body in the first place because it can inject content directly into its current position (with document.write), although that isn't considered good practice today.

I would typically put the <script> in the <head>, but set the async attribute and use a DOMContentLoaded event listener to make it run when the content has loaded.

Does CSS have to be defined within head tags?

For HTML 4 the spec says:

The STYLE element allows authors to put style sheet rules in the head of the document. HTML permits any number of STYLE elements in the HEAD section of a document.

Reference: http://www.w3.org/TR/html4/present/styles.html#h-14.2.3.

Their specification of "head of the document", rather than simply 'document' strongly suggests that elsewhere is inappropriate.

For HTML 5, however, this is relaxed and the style element can be placed within the document itself:

The style element allows authors to embed style information in their documents. The style element is one of several inputs to the styling processing model. The element does not represent content for the user.

Reference: http://www.w3.org/TR/html5/semantics.html#the-style-element.

Does the HTML base tag have to be in the head?

When present, the BASE element must appear in the HEAD section of an HTML document, before any element that refers to an external source.

From the HTML4 specification. Similarly worded in the specs of HTML5

It may be that browsers don't ignore <base> placed somewhere else in a page. It is quite common that browser are tolerant to possible deviations from specifications

How style tag is working inside body tag?

Because style contains style information for a document, or part of a document. so no matter where you have the h1 (in this case), although you shouldn't have inside head because it is invalid HTML , it will be styled. check more info here

The <style> element can be included inside the <head> or <body> of the
document, and the styles will still be applied, however it is
recommended that you include your styles in the <head> for
organizational purposes — it is a lot better to separate your content
from your presentation as much as possible. Even better, put your
styles in external stylesheets and apply them using <link> elements.

Is it necessary to write HEAD, BODY and HTML tags?

Omitting the html, head, and body tags is certainly allowed by the HTML specifications. The underlying reason is that browsers have always sought to be consistent with existing web pages, and the very early versions of HTML didn't define those elements. When HTML first did, it was done in a way that the tags would be inferred when missing.

I often find it convenient to omit the tags when prototyping and especially when writing test cases as it helps keep the markup focused on the test in question. The inference process should create the elements in exactly the manner that you see in Firebug, and browsers are pretty consistent in doing that.

But...

Internet Explorer has at least one known bug in this area. Even Internet Explorer 9 exhibits this. Suppose the markup is this:

<!DOCTYPE html>
<title>Test case</title>
<form action='#'>
   <input name="var1">
</form>

You should (and do in other browsers) get a DOM that looks like this:

HTML
    HEAD
        TITLE
    BODY
        FORM action="#"
            INPUT name="var1"

But in Internet Explorer you get this:

HTML
    HEAD
       TITLE
       FORM action="#"
           BODY
               INPUT name="var1"
    BODY

See it for yourself.

This bug seems limited to the form start tag preceding any text content and any body start tag.

What's the difference if I put css file inside head or body?

Just to add on to what jdelStrother has mentioned about w3 specs and ARTstudio about browser rendering.

It is recommended because when you have the CSS declared before <body> starts, your styles has actually loaded already. So very quickly users see something appear on their screen (e.g. background colors). If not, users see blank screen for some time before the CSS reaches the user.

Also, if you leave the styles somewhere in the <body>, the browser has to re-render the page (new and old when loading) when the styles declared has been parsed.

Does ≪Style≫ Have to Be in the ≪Head≫ of an HTML Document