HTML head tag and its uses

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.
TitleAbout the contain of the page in one sentence
MetaDescription, Keywords, Author, Robots ect
LINKRelation 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=''/>
ScriptTo run Scripts like JavaScript
StyleInternal Style for the page
BASEBase 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">
<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


* indicates required
Subscribe to plus2net

    Babita RAj


    i want to learn html properly

    Post your comments , suggestion , error , requirements etc here

    We use cookies to improve your browsing experience. . Learn more
    HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
    ©2000-2024 All rights reserved worldwide Privacy Policy Disclaimer