1. Home
HTML

Learn HTML: A Comprehensive Tutorial for Beginners | Step-by-Step Guide

Learn HTML from scratch! Our tutorial covers basics to advanced concepts. Start coding websites today with step-by-step guidance.

  • 49
  • 12 Hours
right-top-arrow
9. 

HTML Head

Updated on 30/07/2024434 Views
Content

An HTML code is split into a lot of parts like the HTML head and body. Each section has a specific function. In this tutorial, we will talk about the HTML head section of an HTML program. HTML head is important because it contains structural information like the title of the website, metadata and so much more. In this tutorial, Let me teach you how you can efficiently use the head tag in HTML to its fullest potential in your next HTML project.

Being a web developer myself, I use the HTML head element in all my HTML projects. Now let me pass on my knowledge to you!

HTML Head Element List 

The HTML head just like the HTML body contains a lot of elements. In this section of the tutorial, I will discuss with you the elements which make up the HTML head section.

  1. The <title> element: specifies the title of the webpage, which appears in the browser's title bar or tab.
  2. Metadata: The <meta> tags give information about an HTML document. Common characteristics include: 
  • charset: Indicates the character encoding for the document.
  • Viewport: Sets the viewport settings for responsive design.
  • summary: Gives a brief summary of the page for search engines.
  • Keywords: Keywords related to the page's content.
  • author: Identifies the page's author.
  • robots: Determines how search engines index and follow links on a page.
  1. Links: External resources can be linked using <link> tags, such as stylesheets (rel="stylesheet"), icon files (rel="icon"), or alternative versions of the page (rel="alternate").
  2. Scripts: Use the <script> element to embed or reference JavaScript code. Place it in the <head> element to load scripts before rendering page content and ensure proper operation.
  3. Base URL: defines the base URL for all relative URLs in the page, such as links or images.
  4. Styles: <style> tags carrying internal CSS styles are optional in the <head> section.

HTML <title> element

An HTML document's <head> section requires the HTML head title element to function properly. Its major function is to specify the title of the webpage, which appears in the browser's title bar or tab. Here are some important points about the <title> element. Let me explain with the help of an example of code for header in HTML.

Code:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <title> Welcome to My HTML title example </title>

</head>

<body>

    <h1>Hello, World!</h1>

    <p>This is an example of the HTML title element.</p>

</body>

</html>

In the above example,

  • The <title> element includes the words "Welcome to My HTML title example" which will appear as the webpage title in the browser's title bar or tab.
  • The <meta> tags define the character encoding (UTF-8) and viewport parameters for responsive designs.

HTML <link> Element

The HTML <link> element links a page to external resources, including stylesheets, icons, or alternate versions.

Let me share a header tag in HTML example to explain the HTML link element.

Code:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <title> Welcome to My HTML title example </title>

</head>

<body>

    <h1>Hello, World!</h1>

    <p>This is an example of the HTML title element.</p>

</body>

</html>

In the above example,

  • The <link> element links an external stylesheet (styles.css) to the HTML content.
  • The rel="stylesheet" property identifies the referenced file as a stylesheet.
  • The href="styles.css" attribute provides the location of the external stylesheet file.

You would substitute "styles.css" with the actual path of your stylesheet. This method keeps your HTML code clean and separates styling from content, making it easier to manage and maintain your website's appearance.

HTML <meta> Element

The HTML <meta> element is a useful tool for providing metadata about HTML content. Metadata is information about the data contained in a document, not the document's actual content.

Let me explain with the help of an example.

Code:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <meta name="description" content="This is a sample HTML document with metadata.">

    <title>HTML Meta Element Example</title>

</head>

<body>

    <h1>Hello, Welcome to HTML meta example!</h1>

    <p>This is an example of the HTML meta element.</p>

</body>

</html>

In the above example, 

  • The <meta charset="UTF-8"> tag indicates that the document's character encoding is UTF-8. This ensures proper text encoding and display.
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">. configures the viewport for responsive design, ensuring that the page works effectively on a variety of devices.
  • <meta name="description" content=" This is a sample HTML document with metadata."> gives a brief description of the document, which search engines can use to index and display results.

HTML <base> Element

The HTML <base> element sets a default base URL for all relative URLs in a page. This element is located in the HTML head section of an HTML document.

Let me explain with the help of an example.

Code:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>HTML Base Element Example</title>

    <!-- Specify base URL -->

    <base href="https://example.com/">

</head>

<body>

    <h1>Hello, welcome to html base example !</h1>

    <!-- Relative URL using base URL -->

    <a href="page.html"> Go to Page(example) </a>

    <!-- Resulting absolute URL: https://example.com/page.html -->

</body>

</html>

In this example, the <base> element sets the base URL to https://example.com/. The relative URL in the <a> element (page.html) is resolved relative to this base URL, yielding the absolute URL https://example.com/page.html.

HTML <head> vs HTML <header>

The <head> and <header> elements in HTML serve different purposes and are used in different places. Let me discuss the differences between them in detail.

Point of difference

HTML <head>

HTML <header>

Location

The <head> element is part of the overall document structure but does not appear in the browser window. The <head> element before the <body> element includes metadata, connections to external resources (e.g. stylesheets and scripts), and other information that impacts the entire document.

The <header> element provides introduction material or navigation at the top of a webpage or area within it. It is part of the viewable content and often put within the <body> element.

Purpose

The HTML head element contains important information about the document, including title (<title>), character encoding (<meta charset="...">), viewport settings (<meta name="viewport" content="...">), and links to stylesheets (<link rel="stylesheet" href="...">) and scripts (<script src="..."></script>).

The <header> element includes site logos, navigation menus, introductory text, and other top of the webpage material that provides context or branding for the page.

Different HTML versions

The HTML versions before HTML5 mandated the presence of the HTML head element.

The HTML5 introduced an HTML5 header tag with it. HTML5 also changed the mandatory presence of the HTML head element. 

Let me explain the difference with the help of an example.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document Title Example</title>

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

</head>

<body>

<header>

<h1>Website Logo goes here</h1>

<nav>

<ul>

<li><a href="#">Home</a></li>

<li><a href="#">About</a></li>

<li><a href="#">Services</a></li>

<li><a href="#">Contact</a></li>

</ul>

</nav>

</header>

<p>Main content goes here</p>

</body>

</html>

In the above HTML head and HTML header example,

  • The HTML <head> element includes the title of the web page, metadata for the web page, and a link to an external stylesheet.
  • The <header> element includes the elements that go on the top of the website. It includes the navbar, the logo of the webpage in the h1 HTML tag, and so on.

In Conclusion

In conclusion, the <head> element in HTML influences the structure and operation of web pages. It acts as the backstage area, containing important metadata, linkages to external sites, and scripting information. Using components such as <title>, <meta>, <link>, and <script>, developers in the HTML head element may optimize web pages for search engines(SEO), improve user experience, and ensure compatibility across devices.

If you want to learn more advanced concepts of HTML and web development I would strongly recommend doing a certified course on a reputed platform. One such platform that comes to mind is upGrad. Their courses are in collaboration with some of the best universities around the world. Some of the best professors in this field curate the courses.

Frequently Asked Questions

  1. What is the head in HTML?

The HTML head element in HTML is similar to the backstage area of a web page. It includes key document information such as the title, metadata, stylesheet links, and scripts. Essentially, it's where you put anything that doesn't appear on the website but is important for how it's displayed and how search engines and browsers understand it.

  1. What is the difference between header and head in HTML?

In HTML, the header tag is used to display introduction material or navigation at the top of a page. The <head> element provides important metadata and resources for the document, but they are not visible on the webpage.

  1. What is the HTML structure body head?

The HTML head element serves as the control center of a web page, containing metadata, links to stylesheets, and scripts. The HTML head template is as follows.

<!DOCTYPE html>

<html>

<head>

    <!-- Metadata and resources -->

</head>

</html>

  1. What is the header of the HTML file?

An HTML file's header usually refers to the element. It provides metadata, links to stylesheets, scripts, and the page title, but no visible content appears on the webpage itself.

  1. What is the purpose of the <script> tag in the <head> section?

The <script> tag in the HTML head portion of an HTML document includes JavaScript code necessary for the webpage's functionality and behavior. This could include scripts that handle user interactions, data processing, or any other dynamic part of the page. Placing scripts in the <head> element guarantees they are loaded and run before the page's content, which is crucial for appropriate functionality and performance.

Mukesh Kumar

Mukesh Kumar

Working with upGrad as a Senior Engineering Manager with more than 10+ years of experience in Software Development and Product Management.

Get Free Career Counselling
form image
+91
*
By clicking, I accept theT&Cand
Privacy Policy
image
Join 10M+ Learners & Transform Your Career
Learn on a personalised AI-powered platform that offers best-in-class content, live sessions & mentorship from leading industry experts.
right-top-arrowleft-top-arrow

upGrad Learner Support

Talk to our experts. We’re available 24/7.

text

Indian Nationals

1800 210 2020

text

Foreign Nationals

+918045604032

Disclaimer

upGrad does not grant credit; credits are granted, accepted or transferred at the sole discretion of the relevant educational institution offering the diploma or degree. We advise you to enquire further regarding the suitability of this program for your academic, professional requirements and job prospects before enr...