HTML Head Elements

Explaining all the basic and commonly used HTML head elements

HTML Head Elements

HTML has mainly 1 parent container <html></html> and two second-parent container <head></head> and <body></body>. All the pages consist of this style. The head tag placed just before the body tag and just after the parent Html tag.

One important information about the head tag is, the head contains only the various information about the page. The head section is not visible in the browser window anyway.

Basic Structure

<!DOCTYPE html>
    <head>
        <!-- all head elements goes here -->
    </head>
    <body>
        <!-- all body elements goes here -->
    </body>
</html>

Cool! Every HTML page struct by the above page structure. Now specifically the head tag contains some basic elements. Mainly we will discuss them in this chapter.

Basic <head> Elements

The Head section contains several basic and common elements used by most of the pages. Some of the elements are required and some of the elements are optional, it depends on your needs. Look at the table below for mapping out easily.

Tag/ElementsScopeArgumentInfo/Description
<title>headRequiredIndicates the browser window title
<meta>headRequiredContains various information (eg: Description, charset)
<style>head/bodyOptionalDescribe the page style with CSS
<link>head/bodyOptionalLinks external resources including CSS (commonly)
<script>head/bodyOptionalLinks external Javascript file in the current page

Now you can see whats are the basic elements/tag in the head section. Let’s explain them individually.

HTML <title> Tag

The <title> tag represents the title of the current page. And the contents inside the <title> tag is shown in the browser’s tab. It is a required element of an HTML page. Another important thing is, only one  <title> element is allowed per page and that must reside in the head element.

Another importance of <title> tag is, if you want to create an SEO or search engine friendly page, the title will play the main role and tell the search engine what is the page about.

Example

<!DOCTYPE html>
    <head>
        <title>This is my First HTML page</title>
    </head>
    <body>
        /* all body elements goes here */
    </body>
</html>

Notice that “This is the first HTML page” is the title of the page that is enclosed in the <title> tag.

HTML <meta> Tag

<meta> tags are very useful to define various information about the page. There are many uses of meta tags. You can even define your own meta tags. Unlike title tags, multiple meta tags can be used in a single page. But meta tags are must be placed in the head section. Each meta tag represents a different kind of information about the page.

For example, search engines use meta tags to get information about page from specifically named meta tags. Meta tags are named using the name the attribute. Another example is, meta tag can define a page font’s charset.

Example

<!DOCTYPE html>
    <head>
        <html lang="en-US">
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="Keywords" content="HTML,CSS,JavaScript,SQL">
        <meta name="Description" content="PrograCoding - Best web development portal">
        <meta name="author" content="PrograCoding"/>        
    </head>
    <body>
        <!-- all body elements goes here -->
    </body>
</html>

Few notes about <meta> tags:

  • You can define your own meta with name and content attribute for specific server-side operation purpose (Advanced)
  • The meta name with viewport is mandatory if you are going to build the mobile responsive website.
  • <meta> tag also can be used for schema markup.

HTML <style> Tag

The <style> tag is used to design the page layout using CSS syntax and properties. CSS (Cascading stylesheet) is a stylesheet language used to design markup-based language like HTML. Here how can we use CSS in our HTML page;

<!DOCTYPE html>
    <head>
        <title>My first styled HTML page</title>
        <style>
            p {
                color: red;
                font-size: 20px;
                font-weight: bold;
            }
        </style>
    </head>
    <body>
        <p>Hello, I'm a paragraph!</p>
    </body>
</html>

Now, save the code in your_file_name.html and try to run in your web browser. You should get the following;

html head elements

Notice that we have changed the font color and size of <p> tag in the body section using CSS in the head tag. However, you can also use the <style> tag in the body tag. It will also work. An HTML page can contain multiple <style> tags both in the body and head section.

If you are interested to learn CSS, refer to our Complete CSS Tutorial.

HTML <link> Tag

HTML <link> tags are used to link various external resources. But the most common uses of <link> element is pointing external stylesheet. You can use the following method to point the CSS file instead of using <style> tag. Here how we can do this;

Index.html

<!DOCTYPE html>
    <head>
        <title>My first styled HTML page</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <h1>Hello, I'm a paragraph!</h1>
    </body>
</html>

style.css

p {
    color: red;
    font-size: 20px;
    font-weight: bold;
}

Save the two files in the same directory then run. You should get the same output as the image above.

Again one page can contain multiple <link> elements but they must be placed in the head section.

HTML <script> Tag

HTML <stript> tags are used to include Javascript code either internally (like the CSS <style> tag) or externally (like the CSS <link> tag). See the example below;

<!DOCTYPE html>
    <head>
        <title>My first interactive HTML page</title>
        <script type="text/javascript" src="myScript.js"></script>
        <!-- or -->
        <script>
            alert("Hello, World!");
        </script>
    </head>
    <body>
        <!-- all body elements goes here -->
    </body>
</html>

Save this on your computer and run in your browser, you will get a prompt with “Hello, World!” message.

To learn javascript, refer to our Complete Javascript Tutorial

Getting All Together

HTML is the building block of different kinds of tag/elements with their properties like attributes. So to build a complete HTML page we have to gather all the elements.

So far, we have learned about the head section. Now we will create a complete demo HTML page with some of the body content (We will learn more about body later).

For demonstration purpose see the example below;

<!DOCTYPE html>
    <head>
        <html lang="en-US">
        <meta charset="utf-8">
        <title>This is my First HTML page</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="Keywords" content="HTML,CSS,JavaScript,SQL">
        <meta name="Description" content="PrograCoding - Best web development portal">
        <meta name="author" content="PrograCoding"/>
        <style>
            p {
                color: red;
                font-size: 20px;
                font-weight: bold;
            }
        </style>
        <script>
            function myFunc() {
                alert("Hello, World!");
            }
        </script>       
    </head>
    <body>
        <p>I'm a stylish paragraph</p>
        <button onclick="myFunc()">Click me</button>
    </body>
</html>

Save this code and run in your browser the experience it yourself.

Posted in