HTML Head: What Inside The Head Tag, Explanation Guide for Beginners

  • Post category:HTML
  • Post author:
  • Post last modified:April 3, 2022
  • Reading time:7 mins read
You are currently viewing HTML Head: What Inside The Head Tag, Explanation Guide for Beginners

If you are completely new to HTML you may probably know a little bit about HTML Head. Here I am going to give you a clear explanation of HTML Head. The HTML document is divided into two major parts one is the Head and another is the body. HTML body contains all the visible tags which are shown from the user side. And the HTML Head contains all the Invisible content on a website.

Here invisible means, HTML Head contains those tags that worked in the backend. As humans what our hands and legs do we can see, but what our heads do we can not see. Similarly, HTML Head contains the webpage Title, Internal style sheet, JavaScript code, Meta information, and Important resources link.

HTML Head

HTML head is a important section of every HTML document. It contains document title, meta information, an internal style sheet, external resources link, and JavaScript code. which are works in the backend Of a web browser.

Syntax of HTML Head tag

As you already have seen in the previous example the head tag is placed under the root element but before the body tag start.Similarly other HTML tag head tag starts with <head> opening tag and closed with the </head> closing tag. You can learn more from the below examples.

<head>...</head>

Head Tag Example

<head>
<title>Page title</title>
<meta charset="utf-8">
<meta name="description" content="Short_Description">
<meta name="author" content="author_name">
<style>...</style>
<script>...</script>
<link rel="stylesheet" href="css/style.css">
</head>

What HTML Head Tag Contain? (Head Section)

The HTML head tag itself does not contain any page content. The Head section of an HTML document contains a group of HTML tags. These are the document’s Title, Meta information, External resources link, Internal Style Sheet, and JavaScript code.

html-head
  1. Document Title
  2. Internal Style Sheet
  3. Internal JavaScript
  4. Resources Link
  5. Meta Information

HTML Head Title

The Title tag is a required tag in every HTML document. This tag represents your document title which is shown in the user’s browser window. And the title tag is an important part of SEO, the Title shown on search engine result pages. So try to make it attractive.

Remember when you give a title to any document it must be under 60 characters, it is recommended. The title tag starts with <title> and closed with </title> and writes your document title between the opening tag and closing tag.

<head>
<title>Your Document Title</title>
</head>

HTML Head Style

The style tag contains the Internal Style Sheet. Place the style tag after linking any external style sheet. The style tag’s style will apply only on this particular page. In many cases, some styles need only for a particular page.

You can learn more about HTML Style in the HTML style Tag tutorial. Why do you need to place the internal style after the external sheet.

<head>
<title>Write The Page title</title>
<link rel="stylesheet" href="css/style.css">
<style>
body{
background-color:gray;
font-size:14px;
}
</style>
</head>

Java Script in HTML Head

The script tag contains the JavaScript code for this particular document. Script tag can be placed under the body tag. Although you can also write the JavaScript codes under the head tag.

<head>

<script>
function MyAlert(){
         alert("Hello User");
}
</script>
</head>

Head Other Resources link

The link tag is used to link any external resource to the current document like Style Sheet, JavaScript, icons, external fonts, etc. Link tag has two attributes called rel and href. The rel attribute defines the relationship between the link and pages and the href attribute contains the resources link.

<head>
<title>Write The Page title</title>
<link rel="stylesheet" href="css/style.css">
</head>

HTML Head Meta Data

The meta tag gives extra information about the document. The meta tag contains a short description, author information, keyword, and the viewport setting of the document.

The meta-information is not displayed in the browser, but this information is used by browsers and search engines for better ranking. You can learn more in the meta tag tutorial.

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="descrption" content="write description">
<meta name="keyword" content="keyword1, keyword2">
</head>

Chapter Summary

  • Head tag placed in the <html> tag before starting the <body> tag.
  • The head element contains invisible parts of an HTML document.
  • This tag starts with <head> tag and closed with </head> tag.
  • Head tag contain <title>, <link>, <style>, <meta>, and the <script> tag.

Ashim Khatua

Professionally Web Developer since 2015, And also a Blogger. I am the founder of SiteCodings.com. I love to share my knowledge, which I earned the past few years. I want to share my knowledge with you through my Blog. Keep Reading.

Leave a Reply