tags?

votes

What's the difference between HEAD tags and BODY tags?

most HTML books only 'briefly' mentions <head> and <body> tags...but they just go away really fast.

Do they affect how browsers render web pages?

Also, do they affect the order in which javascripts are run?

(I mean, if I have a javascript inside a <head> tag, would it run BEFORE another javascript inside <body> tag? Even when <body> came BEFORE <head>?)

This is too confusing--I haven't ever used a head/body tags, but i never had any trouble with it. But while reading Jquery tutorial, I saw people recommending putting some codes inside <head> and the others inside <body> tags.

Thank you!!!

javascripthtml

I've never seen a document where body comes before head. Is that even valid? – CodesInChaos

possible duplicate of Should I write script in the body or the head of the html? – Wesley Murch

8 Answers

votes

Generally javascript code will function in the head before code in the body. The head section is usually used to contain information about the page that you dont neccessarily see like the meta keywords meta description or title of a page. You would also link to any external files like .css .js files in the head section as they need to load before the page is displayed.

Anything in the body section is what you would expect to be see on screen.

votes

Things in the head tag are things that shouldn't be rendered: information about the page and how to process it.
Things in the body tag are the things that should be displayed: the actual content.
Javascript in the body is executed as it is read and as the page is rendered.
Javascript in the head is interpreted before anything is rendered.

votes

<script> tags are run when the browser encounters them when loading the page. The <head> can't contain content for the page, it can only contain meta-information (titles, descriptions, etc), styles and scripts. Therefore if you place a <script> tag in the <head>, you are ensuring that it is run before the browser has started loading the content of the page (which must go in the <body>).

If you want to manipulate the content of the page, you need to make sure your script appears after the content you are manipulating. This is why people chose to put scripts at the end of the <body>.

If your code is sloppy (for example, with tags not closed properly), this can cause problems. This is why libraries like jQuery have features to help you run code manipulating the document at the right time.

votes

In my little knowledge:

JavaScript in the head section is usually meant to preload certain files (usually procedures or functions as the case may be). For example, a website that utilizes the Time() or Date() function would require that the .js file that contains those functions be called before the website is fully loaded allowing the instance to be available (preloaded) before imminent usage. Same also applies to other custom functions.

JavaScript in the body section is primarily for adding extra functionality to a website. An example is in the case of a custom .js file where a function is to check for correctness of words in an input string or matching all characters entered in an input string to be of a certain length.

The downside of using either of these two conventions is in calling a custom .js file (meant for website functionality) from the head section. The implication is that the JS file would've already exhausted it's functionality before the website contents are fully loaded.

votes

http://www.w3schools.com/js/js_whereto.asp

You can place an unlimited number of scripts in your document, and you can have scripts in both the body and the head section at the same time.

It is a common practice to put all functions in the head section, or at the bottom of the page. This way they are all in one place and do not interfere with page content.

The main difference in head and body scripts is that usually people who prefer functions use javascript in the whereas people who prefer inline practices will mostly use it below the document.

Functional

<html>
<head>
<script type="text/javascript">
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
</script>
</head>

<body>

<h1>My First Web Page</h1>

<p id="demo"></p>

<button type="button" onclick="displayDate()">Display Date</button>

</body>
</html>

Inline

<html>
<body>
<h1>My First Web Page</h1>

<p id="demo"></p>

<script type="text/javascript">
document.getElementById("demo").innerHTML=Date();
</script>

</body>
</html>

votes

A HTML file has headers and a "body" (payload) — just like a HTTP request.

The <body> encapsulates the contents of the document, while the <head> part contains meta elements, i.e., information about the contents. This is (typically) title, encoding, author, styling etc.

As for your question about JavaScript: In general JavaScript is evaluated as it is (loaded and) parsed. So, if you embed JavaScript in the <head> section it should be parsed immediately.

votes

The browser will process what's in the <head> to show the <body> accurately.

The <head> holds stuff like what character set your page uses, when to refresh, external sheets or scripts you may want to include, and information about your page.

The <body> holds only display-oriented stuff, usually HTML based.

It's important to keep the model (i.e. the information) and the view (i.e. the HTML) separate. Why? Later, you might want to update a style, and you don't want to chase it down through all of your HTML, each time it happens. Better to do it at one place for the whole document, in the <head>.

votes

The Head tag is typically used to import other files and define attributes of your page that are not displayed, like meta data. So you could place CSS/Javascript files that you webpage requires in your Head section and they would load before the your page displays.

The body Tag is where you you place the Parts of your website that you want displaed, like p tags, divs, etc.