head element in HTML

We already have seen the structure of HTML page. The structure should be followed. <head> element contains all the elements related to HTML document.
<head> element contains <title>, <meta>, <link>, <style>, <script> elements.
We already have seen <meta> tags. So we will not cover that in this section.

<title> element

<title> element specifies the title of HTML document. Please have a look at an example.

This document is titled.


<!DOCTYPE html>
<html>
    <head>
        <title> <head> element - HTML </title>
    </head>
    <body>
        <p>This document is titled.</p>
    </body>
</html>
                        

<style> element

There are many ways to add CSS to the HTML document. We will see two of them.

  • <style> (ineternal style)
  • <link> (external file style)

We have added some css rules in our example. We can include css in <head> element via <style> element.
Let us have a look at an example.

This paragraph has gray background via css added in head.


<!DOCTYPE html>
<html>
    <head>
        <style>
            #new-style-back{
                background: gray;
            }
        </style>
    </head>
    <body>
        <p id="new-style-back">
            This paragraph has gray background via css added in head.
        </p>
    </body>
</html>
                        

If you see the above code, <p> has id="new-style-back". And id is used to style the paragraph. <style> element is added into <head>.

<link> is used to add the reference of external file to the HTML document. You can link external css file to the HTML document using <link>.

This paragraph has gray background via css added in head.


<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="./css/example.css" <
    </head>
    <body>
        <p id="new-style-back">
            This paragraph has gray background via css added in head.
        </p>
    </body>
</html>
                        

#new-style-back{
    background: gray;
}
                        

The file content of css/example.css is written in css tab.
In the above code, we have added css/example.css file to current document and this CSS file has a rule with id to make the particular element's background gray.
href is the path to that css file and rel is the type of file you are referencing.

<script> element

<script> tag is used to add JavaScript into document. You can reference the external JavaScript file or write JavaScript code directly into the HTML document. Let us have a look at the example.


<!DOCTYPE html>
<html>
    <head>
        <script>
            function handShake(){
                alert("Hello, How are you?");
            }
        </script>
    </head>
    <body>
        <button onclick="return handShake()">Click Me!</button>
    </body>
</html>
                        

In the above example, JavaScript is added to the HTML document. It is okay if you don't understand the JavaScript code, it is okay.
Now let us have a look at the example and how to link the external JavaScript file.


<!DOCTYPE html>
<html>
    <head>
        <script src="./js/hello.js"></script>
    </head>
    <body>
        <button onclick="return handShake()">Click Me!</button>
    </body>
</html>
                        

function handShake(){
    alert("Hello, How are you?");
}
                        

In above code, handShake() function is written in js/hello.js file. js/hello.js file is added through <script> element and src attribute is the path to that file.

Conclusion

In this section, we learned about <head> element in HTML. And what elements are into <head>.
In next section, we will learn about iframe in HTML.