Suggest an edit

Improve this article

Refine the answer for “Why does the order of tags inside <head> matter?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

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:

```html
<head>
  <meta charset="UTF-8">
  <title>Home</title>
</head>
```

Incorrect:

```html
<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:

```html
<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:

```html
<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:

```html
<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:

```html
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="main.css"> 
```

---

### Summary - recommended order of tags inside `<head>`:

```html
<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**.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts421 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.