Placing the Code in the Right Place for the right effect
HTML is the language that plays a major role in the rendering of a web page. To emphasize the strength of the role it plays, HTML forms the skeleton of the web page over which other code are dressed as skin and accessories to make it look great!
The Basic Skeleton of an HTML document or page
In order to write code that can efficiently serve its purpose, it is always good to have a glimpse of what happens behind the scenes. So, we saw that whenever a client requires a service, the client requests the same from a web server. The client requests the service through a user agent which is usually a web browser.
So, whenever the web browser requests a web page, it gets the HTML code as the response. Then it is the responsibility of the web browser to parse (in layman terms, read the code line by line) the HTML code and render the web page accordingly.
The Declaration block tells the browser information about the page it has received. Information like the type of page, the version of the language, and other information go into this section.
The Head section is like a header section to the page. It contains the title to the page as well as any references to code files, style sheets and so on. The code in this section is first executed and then the body of the page is loaded.
The main section of the page is the Body section. Here the contents of the page are put in along with any specific styling information and code to be executed.
Same file or not
Script code can be blended with the HTML document in a flow or it can be placed separately in a file and then linked to the HTML file.
People who are more organized consider putting the code in a separate file, a best practise. Thinking why so? When you separate code from mark up, it will be easy to maintain and keep it clean. But, if the script is light weight, meaning, just a line or two, then creating a separate file and linking it to the HTML code, would be an overhead.
Placing the code inside the HTML file itself
Suppose, we would like to pop up a welcome message to the user, we can use an alert function.
alert(“Welcome!”) would display the message Welcome in a pop up box to the user. When we place this line of code in between the <script> and </script> tag set, this will help the browser identify that it is a piece of script and has to be executed.
Of course, Yes! It all depends on when you want the code to be executed. There are certain pieces of code that you would want to be executed when the page loads or when it has finished loading. Sometimes it may be a mouse move or a hover. In these cases, we will place them into event handlers as they are to be executed after an event or during it.
Within the <head>…</head> tag
So, usually when you want the code to be executed before even the Body section is loaded, then we place it in the Head section. Here is an example.
Within the <body>…</body> tag
his section is concerned with the contents of the page. So any script embedded here would be executed when the body section of the page is being rendered.
Just notice the difference between the two pages. The first example displays the welcome message from the Head section while the second message displays the same while the body is being loaded. Now, to test this order of execution, shall we try to put alerts in both the head and body section to see how things work?
Now, try out this following example and check for yourself if you get dialog boxes similar to the ones shown here.
Notice that the script in the head section has been executed first.
Now, the body section script has been executed. This shows the page is rendered line by line and not in some random order.
After the <body>…</body> tag
This is the ideal place for code to be put if it is okay for the script can be executed after the page has been displayed to the user. Ideally for the pages that have code in the same page, this is the best place unless and until there is a necessity.
Thinking why? Remember, the browser switches from HTML to Script and then back to HTML as and when required? If a script requires additional assets like images to display, then this interrupts the load of the page. This enables the page to be displayed without much delay.
Placing code in a separate file and linking it
Whenever you want to put either your style sheets or scripts in a separate file, you can link it to the web page using the <script> tag.
Now that we have an idea of how and when each section’s code executes, we will be able to code better! Don’t you think? In our further tutorials, we will see how to write code that dynamically alters pages, execute based on conditions and other things.