What Goes in the head
The <head> holds metadata about the document — information that configures the page but is not rendered directly in the body.
Common head Elements
| Element | Purpose |
|---|---|
| <title> | The text shown in the browser tab and search results |
| <meta> | Metadata like character encoding, viewport, and page description |
| <link> | Links external resources, most commonly a CSS stylesheet or favicon |
| <style> | Embeds CSS directly in the document |
| <script> | Embeds or links JavaScript |
| <base> | Sets a base URL for all relative links on the page |
A Typical head
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>DevAcademy — Learn to Code</title>
<meta name="description" content="Free tutorials for HTML, CSS, and JavaScript." />
<link rel="stylesheet" href="styles.css" />
<link rel="icon" href="favicon.ico" />
<script src="app.js" defer></script>
</head>The Viewport Meta Tag
The viewport meta tag controls how a page scales on mobile devices. Without it, mobile browsers render the page at a wide desktop width and zoom out, breaking responsive layouts.
Viewport Meta Tag
<meta name="viewport" content="width=device-width, initial-scale=1.0" />Linking Stylesheets and Scripts
Stylesheets are linked with <link rel="stylesheet">, while scripts can be linked with <script src="...">. Adding defer to a script tells the browser to run it only after the HTML has finished parsing.
defer vs async
<!-- Runs after parsing completes, in order -->
<script src="app.js" defer></script>
<!-- Runs as soon as it downloads, order not guaranteed -->
<script src="analytics.js" async></script>style vs link
<style> embeds CSS rules inline in the document, while <link rel="stylesheet"> loads CSS from a separate file. External stylesheets are cacheable and easier to maintain across multiple pages.
Best Practice
Always include charset, viewport, and a meaningful title and description in the head — they directly affect rendering, mobile usability, and SEO.