HTML head tag and its uses in design of pages with other tags

Head tag of a web page holds various tags and information about the page.
No content which is to be displayed directly to the browser goes inside the head tags.

This head tag is one of the primary tags of basic html tags. It should be there for all type of pages and it is part of the basic page Structure.

Within the head tag we can keep Title, description, keyword, script, meta, links, base etc.

Tag	Description
Title	About the contain of the page in one sentence
Meta	Description, Keywords, Author, Robots ect
LINK	Relation between doucment and external srouce ( Example: Style to add ) <link rel="stylesheet" href="images/style.css" type="text/css"> <link rel="icon" href="favicon.ico" /> <link rel='canonical' href='https://www.plus2net.com/jquery/dropdown.php'/>
Script	To run Scripts like JavaScript
Style	Internal Style for the page
BASE	Base URL to add to relative linking of a page

One pair of head tag ( opening tag and closing tag) is used inside a page

The scripts kept within the head tag loaded first for use and by default scripts within the head tag or body content can use them.

Head tag comes before the body tags of the page and within the html tags of the page.

Here is a basic structure of the page

<!doctype html public "-//w3c//dtd html 3.2//en">

<html>

<head>

<title>(Type a title for your page here)</title>
<META NAME="DESCRIPTION" CONTENT="HTML body tags and how to use in webpage">
<META NAME="KEYWORDS" CONTENT="body tag, html body tag, tags in html">
<link rel="stylesheet" type="text/css" href="calendar.css" />

</head>
<body >


</body>
</html>

As you have seen how the head tag is used before body tags and stores various script and information about the page. Some of the important tags like title, script , style etc are kept inside this head tag.

Mobile Web Development

Configuring the viewport and other mobile-specific settings in the `<head>` to optimize websites for mobile devices.

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

Favicon Integration

Guidance on adding a favicon to a website using the `` tag, including sizes, formats, and best practices for compatibility and performance.

<link rel="shortcut icon" href="favicon.ico">

Preloading Resources

Using `<link rel="preload">` to instruct the browser to load important resources ahead of time, improving performance and user experience.

<link rel="preload" href="style.css" as="style" />

Social Media Tags

Implementing Open Graph and Twitter card metadata to control how content appears when shared on social media platforms.

Meta Tags BODY tag
HTML

Babita RAj	12-03-2013
i want to learn html properly

HTML head tag and its uses

Mobile Web Development

Favicon Integration

Preloading Resources

Social Media Tags

Subscribe