The HTML head section holds instructions that shape how your page works and appears, and you add code there by placing it between the opening and closing <head> tags
The head section is the part of your HTML document that comes before the visible content. It does not display on the page itself — instead, it tells the browser how to handle the page, what to load, and what information to show in search results or when someone shares the link. Adding code to the head means inserting new lines between <head> and </head>, usually after the <title> tag.
The most common reasons to add code to the head are to link stylesheets, load JavaScript files, set character encoding, add metadata for search engines, or include tracking scripts. Each type of code goes in a specific order and uses a specific tag format, so understanding what you are adding and why helps you place it correctly.
Key Takeaways
- The head section sits between <head> and </head> tags at the top of your HTML file, before any visible content.
- Most new code in the head uses either <link> tags for stylesheets, <script> tags for JavaScript, or <meta> tags for information about the page.
- The order of code in the head matters: character encoding and viewport settings come first, then title and meta tags, then stylesheets, then scripts.
- You add code by opening your HTML file in a text editor, finding the head section, and typing or pasting the new line in the correct position.
Where the Head Section Sits in Your HTML File
Every HTML file has a basic structure: the opening <html> tag, then the <head> section, then the <body> section, then the closing </html> tag. The head comes first and contains no visible text or images — only instructions. Your page title, metadata, links to stylesheets, and scripts all live here.
A minimal head section looks like this:
<head> <meta charset="UTF-8"> <title>My Page Title</title> </head>
When you add new code, you insert it between the opening <head> tag and the closing </head> tag. The exact position depends on what you are adding, but the general rule is: character encoding and viewport settings first, then title and meta tags, then stylesheets, then scripts.
Adding Stylesheets to the Head
A stylesheet is a file that controls how your page looks — colors, fonts, spacing, layout. You link to it in the head using a <link> tag. The most common place to add a stylesheet link is after your title tag and before any script tags.
The code looks like this:
<link rel="stylesheet" href="styles.css">
Replace styles.css with the actual path to your stylesheet file. If the stylesheet is in the same folder as your HTML file, just use the filename. If it is in a subfolder called css, use css/styles.css. If it is on another website, use the full web address starting with https://.
You can add multiple stylesheets by repeating the <link> tag on separate lines. The browser loads them in the order they appear, so if two stylesheets set the same style, the later one wins.
Adding JavaScript Files to the Head
JavaScript is code that makes your page interactive — responding to clicks, validating forms, animating elements. You can add JavaScript in two ways: by linking to an external file, or by writing code directly in the head.
To link to an external JavaScript file, use a <script> tag:
<script src="script.js"></script>
Replace script.js with the path to your file, using the same rules as stylesheets. To write JavaScript directly in the head, use the same tag but put your code inside it:
<script> console.log("Hello, world"); </script>
Most developers put JavaScript files at the end of the head or at the very end of the body, because loading scripts can slow down how fast the page appears. If you want the page to load faster, add the word defer to the script tag: <script src="script.js" defer></script>. This tells the browser to load the script in the background while the page displays.
Adding Meta Tags for Search Engines and Social Media
Meta tags give information about your page to search engines, social media platforms, and browsers. They go in the head and use the <meta> tag format. Common meta tags include description, viewport, and open graph tags.
A description meta tag tells search engines what your page is about:
<meta name="description" content="A guide to adding code to HTML head sections">
A viewport meta tag tells mobile browsers how to scale your page:
<meta name="viewport" content="width=device-width, initial-scale=1">
Open graph tags control what appears when someone shares your page on social media:
<meta property="og:title" content="My Page Title"> <meta property="og:description" content="A short description"> <meta property="og:image" content="image.jpg">
Add meta tags after your title tag, one per line. The order of meta tags does not matter, but keeping them grouped together makes the head easier to read.
Adding Tracking and Third-Party Scripts
Many websites add scripts from other companies to track visitor behavior, display ads, or run chatbots. These scripts usually come with instructions telling you exactly what code to add and where. Common examples include Google Analytics, Facebook Pixel, and Hotjar.
These scripts typically go at the end of the head or at the end of the body. Follow the instructions provided by the service — they often specify the exact placement and any special attributes the script tag needs. If the instructions say to add the code to the head, paste it between the <head> and </head> tags exactly as written.
Be cautious about adding too many third-party scripts, because each one makes your page slower to load. Only add scripts you actually use.
The Correct Order for Code in the Head
While the browser is forgiving about order, following a standard structure makes your code easier to maintain and helps avoid conflicts. Here is the recommended order:
- Character encoding: <meta charset="UTF-8">
- Viewport settings: <meta name="viewport"...>
- Title: <title>...</title>
- Other meta tags: description, open graph, etc.
- Stylesheets: <link rel="stylesheet"...>
- Scripts that need to load before the page displays
- Tracking and third-party scripts
This order ensures that the browser knows how to read your file, understands what the page is about, loads styling before displaying content, and runs scripts at the right time. If you are adding code and it does not work, check that it is in a sensible position relative to other code.
Frequently Asked Questions
What is the difference between putting a script in the head versus the body?
Scripts in the head load before the page displays, which can slow things down. Scripts in the body load after the page is visible, so the user sees content faster. Use the defer attribute on head scripts to get the best of both: the script loads in the background while the page displays.
Can I add multiple stylesheets to the head?
Yes. Add multiple <link> tags, one per line. The browser loads them in order, so if two stylesheets set the same style, the later one wins. This is useful when you use a framework stylesheet and then add your own custom styles on top.
What happens if I put code in the wrong place in the head?
Usually nothing breaks — the browser is forgiving. But stylesheets might not load if they come after scripts that use them, and the page might load slowly if scripts are in the wrong spot. If something does not work, check the order and move the code to match the recommended structure.
Do I need to add anything to the head for a basic page?
At minimum, add a character encoding meta tag, a viewport meta tag, and a title tag. Everything else is optional and depends on what your page needs. A page without stylesheets or scripts will still display, but it will look plain and will not be interactive.
How do I know if a stylesheet or script loaded correctly?
Open your browser's developer tools by pressing F12 or right-clicking and selecting "Inspect". Go to the Network tab and reload the page. You will see a list of all files the browser tried to load. If a stylesheet or script shows a red error or a status code like 404, the file path is wrong or the file does not exist.