Hey guys, today in this post we discuss about the <head> element in HTML. In my Previous post, we talked about the HTML Elements and HTML Attributes. Click the link to go through it. Or you may continue reading. 

The purpose of this post is to help beginners master and understand web development and it is also beneficial to other higher level developers because I will continue to make good use of my time to give detailed explanation about all topics related to coding.

HTML head element


The HTML document comprises of two primary elements nested in the <html> tags. You can check what we mean by nested elements from our previous post. These two elements are the <head> and <body> element. Our main focus of discussion is the <head> element.

HTML <head> Elements

The HTML <head> elements is an element nested inside the <html> tags and it is not visible in body content of the webpage.

The contents in the <head> elements can be seen by viewing the source code of the webpage or by looking at the top of the browser tabs.

The HTML <head> elements contains metadata and it is written just after the <html> opening tag. The metadata are data that describes the HTML documents and also makes it easy for SEO to index the HTML documents

Tags use in <head> Elements

The following tags can be present inside the <head> element: <meta>, <link>, <title>, <style>, <script>, <base> etc.

We are going to be discussing the above tags in the next section of this post.

The <meta> Element

The <meta> element is use to store information about the webpage or html document like character set, keywords, page description, viewport settings and other necessary info, and this information is very useful for web services (one of which is the search engines)

Examples:

<meta> tag for character set:

<meta charset="UTF-8">

<meta> tag for search engines:

<meta name="keywords" content="HTML Elements">

<meta> tag for viewport. This settings enable your website look good in all devices

<meta name="viewport" content="width=device-width, initial-scale=1">

The <title> Element

The <title> element is very important and required element in the <head> element. It defines the title of the document and displayed in the browser's title bar. It also helps search engines to identify and decide the order when listing pages on search results.

Examples:

<title>My beautiful website</title>

The <style> Elements

The style elements is use to declare the styling of a single HTML webpage. This kind of styling is called the internal styling. 

Examples:

<style>

body{ background-color: red;}

h1 { color: blue;

     font-family: Arial;}

p { text-transform: uppercase;

    text-decoration: underline;}

</style>

The <link> Element

The <link> element use in the <head> is use to link to an external stylesheet, document or file either locally (that is another document from the root folder) or online (that is another web source).

Example:

<link rel="stylesheet" href="style.css">

The <script> Element

The <script> element is use to define the JavaScript program in an html documents

Let's now put together all into one Example below:

<!Doctype html>

<html lang="en-US">

    <head>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <title>My Webpage Title</title>

        <style>

          body { background: magenta;}

          h1 { color: red;

                  text-align: center;

               }

          p {color: blue;}

        </style>

        <script> JavaScript codes goes here..</script>

    </head>

    <body>

        <h1>The Heading</h1>

        <p>The heading is color red and at center of the page. While this is paragraph is color blue</p>

    </body>

</html>

You can copy the code into your text editor and try the codes on your browser to see the result.

I hope this little explanation is resourceful, we will be moving on in the next post. And don't forget to leave your for any doubt or difficulty. Thanks.