Home Tutorials Videos Q&A MCQ Shortcuts Exercises Appointment Login
Lesson 18 of 21 – HTML Head
86%

HTML Head

The HTML <head> element is a container for metadata. It contains information about the webpage such as title, styles, scripts, links and meta tags.

Note: The content inside the HTML <head> element is not displayed directly on the webpage.
What is HTML Head?

The HTML <head> element is placed between the <html> and <body> tags. It stores information about the webpage. 

<html>

<head>

...

</head>

<body>

...

</body>

</html>

Metadata may include:

  • Page title
  • Character encoding
  • CSS styles
  • JavaScript
  • External resources
  • SEO information
HTML <title> Element

The <title> element defines the title of the webpage. 

<title>

My Website

</title>

The title:

  • Appears in browser tabs.
  • Appears in bookmarks.
  • Appears in search engines.
  • Helps SEO.
  • Is required in HTML pages.
HTML <meta> Element

The <meta> element provides information about the webpage. 

<meta charset="UTF-8">

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

Meta tags are used for:

  • Character encoding.
  • Responsive design.
  • SEO.
  • Author information.
  • Page description.
HTML <style> Element

The <style> element is used to define internal CSS. 

<style>

body{

background:lightblue;

}

h1{

color:red;

}

</style>

Internal CSS styles a single webpage.

HTML <link> Element

The <link> element connects external resources. 

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

<link
rel="icon"
href="favicon.ico">
  • External CSS.
  • Favicons.
  • Canonical URLs.
  • Other external files.
HTML <script> Element

The HTML <script> element is used to add JavaScript to a webpage. 

<script>

alert("Welcome");

</script>

JavaScript can:

  • Show messages.
  • Validate forms.
  • Create animations.
  • Change webpage content.
  • Make webpages interactive.
HTML <base> Element

The HTML <base> element specifies the base URL for all relative URLs. 

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

Important points:

  • Only one base tag is allowed.
  • Can specify href.
  • Can specify target.
  • Useful for relative links.
Viewport

The viewport is the visible area of a webpage. 

<meta
name="viewport"
content="width=device-width,
initial-scale=1.0">
  • Makes websites responsive.
  • Improves mobile display.
  • Adjusts page scaling.
  • Important for modern websites.
Important Head Elements
Element Purpose
title Page title
meta Metadata
style Internal CSS
link External resources
script JavaScript
base Base URL
Key Points
  • Head contains metadata.
  • Metadata is not displayed.
  • Title defines page title.
  • Meta provides page information.
  • Style adds CSS.
  • Link connects external files.
  • Script adds JavaScript.
  • Base defines base URL.
  • Viewport helps responsive design.
  • Head is important for SEO.

🧠 Quiz

Which HTML element defines the title of a webpage?



← Previous Next →