The <head> tag in HTML is used to contain metadata and resources for the document.
It does not display content on the webpage itself, but it provides important information and links that affect the page's behavior, appearance, and SEO.
Common Uses of <head>
-
Document metadata
<title>→ Sets the page title shown in browser tab<meta>→ Provides metadata like charset, viewport, description, keywords
<meta charset="UTF-8"> <meta name="description" content="This is a sample page"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> - Linking external resources
- CSS stylesheets:
<link rel="stylesheet" href="styles.css"> - Favicon:
<link rel="icon" href="favicon.ico">
- CSS stylesheets:
- Embedding scripts and styles
- Inline styles:
<style> - External scripts (can also be in body):
<script src="script.js"></script>
- Inline styles:
- SEO and social media
- Metadata for search engines and social sharing (Open Graph, Twitter cards)
Example
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Learn HTML head tag usage">
<title>HTML Head Example</title>
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="favicon.ico">
<script src="script.js" defer></script>
</head>
💡 In Short:
The
<head>tag sets up the document with metadata, styles, scripts, and resources, helping browsers, search engines, and social platforms interpret and render the page correctly.
