The <head> element is a container for information about the document. Nothing inside <head> is displayed on the page itself, but the browser, search engines, and social media crawlers all read it to understand and render your page correctly.
A typical <head> can contain <title>, <meta>, <link>, <style>, <script>, and <base> elements.
<title>Codingwithsonu - Learn HTML Step by Step</title>
The <title> element is required in every HTML document. It sets the text shown in the browser tab, the default bookmark name, and is heavily used by search engines as the clickable headline in search results.
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Page summary for search engines">
<meta> tags define character encoding, viewport behaviour, SEO description, Open Graph data, and more. We cover this in full depth on the HTML Meta Tags page.
<!-- External stylesheet -->
<link rel="stylesheet" href="style.css">
<!-- Favicon -->
<link rel="icon" href="favicon.ico">
<!-- Performance hints -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preload" href="hero.jpg" as="image">
<link> connects the document to external resources: stylesheets, favicons (see the dedicated HTML Favicon page), fonts, and hints like preconnect or preload that speed up loading of resources the browser will need soon.
<style>
body { font-family: Arial, sans-serif; }
h1 { color: darkblue; }
</style>
<style> holds internal (inline) CSS. It is handy for small demos or single-page styling, but for larger sites an external stylesheet loaded via <link> is easier to maintain and cache.
<!-- Blocks HTML parsing until downloaded and executed -->
<script src="app.js"></script>
<!-- Downloads in parallel, runs in order, after parsing -->
<script src="app.js" defer></script>
<!-- Downloads in parallel, runs as soon as ready (order not guaranteed) -->
<script src="analytics.js" async></script>
A plain <script> placed in <head> pauses HTML parsing until it downloads and runs, which can delay page rendering. Adding defer lets the browser keep parsing the page and run the script only after parsing finishes (in source order) — this is the recommended default for most page scripts. async runs the script the moment it's ready, which is better suited to independent scripts like analytics that don't depend on the DOM or on each other.
<base href="https://codingwithsonu.com/html/" target="_blank">
<base> sets a default base URL and/or default target for every relative link and form on the page. At most one <base> element is allowed, and it must appear before any element that uses a relative URL (like <link> or <img>).
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Page Title</title>
<meta name="description" content="A short, unique summary of this page.">
<link rel="icon" href="favicon.ico">
<link rel="stylesheet" href="style.css">
<script src="app.js" defer></script>
</head>
This is a lean, production-friendly <head>: essential metadata first, then the favicon and stylesheet, then a deferred script last.
Best Practices:
<head> lean — every extra request in <head> can delay first render.defer/async for scripts that don't need to run immediately.<meta charset> as the very first element inside <head>.<title> and at most one <base> per document.<link> stylesheets over large inline <style> blocks for cacheability.