The
<head>tag contains metadata and information about the document that is not directly displayed on the web page.
It usually includes the page title, links to CSS stylesheets, JavaScript files, meta descriptions, and other resources used by browsers and search engines.
Everything inside the<head>helps define how the page behaves, not how it looks.
Syntax
<head>
<!-- Metadata and external resources go here -->
</head>Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Head Example</title>
<meta charset="UTF-8">
<meta name="description" content="An example of using the head tag in HTML.">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Welcome!</h1>
<p>This page uses metadata and linked CSS inside the <head> section.</p>
</body>
</html>Output
Browser Output:
Displays “Welcome!” and the paragraph below it.
Browser Support:
Chrome | Firefox | Edge | Safari | Opera | IE9+ |
|---|---|---|---|---|---|
| ✅ Yes | ✅ Yes | ✅ Yes | ✅ Yes | ✅ Yes | ✅ Yes |
None of the <head> content is visible — it only influences page behavior and metadata.
Notes
- The
<head>element must appear before the<body>in every HTML document. - Typical elements inside
<head>include:<title>— sets the page title.<meta>— defines metadata such as charset, description, keywords.<link>— links external stylesheets.<script>— links or embeds JavaScript.<style>— includes internal CSS
- Search engines read the
<head>for SEO data, and browsers use it to understand page settings.
Conclusion
The <head> tag is the brain of the HTML document, controlling metadata, linking resources, and guiding browsers and search engines.
Although it’s not visible on the page, it’s essential for SEO, responsive design, and overall page performance.
Always include a well-structured <head> section in your HTML documents for proper functionality and optimization.