Why does the order of tags inside <head> matter?
The order of tags inside <head> matters because the browser reads HTML sequentially from top to bottom, and the instructions it receives first determine:
- how quickly the page loads,
- whether characters display correctly,
- whether styles and scripts work.
1. Encoding (<meta charset>) must come first
The browser must know the encoding before it starts reading the text. If this tag is not first, characters may display as garbled text.
Correct:
<head>
<meta charset="UTF-8">
<title>Home</title>
</head>Incorrect:
<head>
<title>Home</title>
<meta charset="UTF-8">
</head>→ the browser may already have read part of the text "in the wrong encoding".
2. Metadata (<meta name="viewport">, <meta name="description">) - before styles and scripts
They do not affect rendering directly, but they help search engines and mobile devices correctly interpret the page. It is best to place them right after the encoding and the title:
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Page description">3. Styles (<link>, <style>) must come before scripts
The browser first applies styling, then connects functionality. If scripts are linked before CSS, elements may display unstyled (a flash of "raw" content).
Correct order:
<link rel="stylesheet" href="style.css">
<script src="main.js" defer></script>4. Scripts (<script>): at the very end of <head> or before </body>
Without defer and async, scripts block the page's loading.
That is why they are placed after all styles and metadata, so they do not interfere with rendering.
Optimal:
<script src="app.js" defer></script>5. The order of <link> also matters
If you link several CSS files, the order determines style priority: the last linked stylesheet can override the previous ones.
Example:
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="main.css"> <!-- overrides reset -->Summary - recommended order of tags inside <head>:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Page description">
<title>Page title</title>
<link rel="icon" href="favicon.ico">
<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>
</head>Why this matters:
| Reason | What happens if violated |
|---|---|
| Wrong encoding | Text corruption |
| Scripts before styles | "flash" of unstyled page |
| Styles in the wrong order | Unpredictable styling |
| Scripts without defer | Slower page loading |
In simple terms:
the order of tags in <head> is like the order of steps in a recipe.
If you swap the steps, the dish (the page) will still "cook,"
but it may come out slow, crooked, or with the wrong taste.
Short Answer
Interview readyA concise answer to help you respond confidently on this topic during an interview.