# The “base” element must come before any “link” or “script” elements in the document.

> Canonical HTML version: https://rocketvalidator.com/html-validation/the-base-element-must-come-before-any-link-or-script-elements-in-the-document
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The `<base>` element must appear before any `<link>` or `<script>` elements in the `<head>` section of the document.

The `<base>` element sets the base URL and/or default target for all relative URLs in a page. Because `<link>` and `<script>` elements often reference external resources using relative URLs, the browser needs to know the base URL before it encounters those elements. If `<base>` appears after a `<link>` or `<script>`, the browser may have already resolved their URLs without the intended base, leading to broken references or unexpected behavior.

Only one `<base>` element is allowed per document, and the HTML specification requires it to appear before any elements that have attributes accepting URLs. In practice, placing it as the first child of `<head>` (after `<meta charset>`) is the simplest way to satisfy this rule.

## Invalid example

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Example</title>
  <link rel="stylesheet" href="styles/main.css">
  <script src="js/app.js"></script>
  <base href="https://example.com/">
</head>
<body>
  <p>Hello</p>
</body>
</html>
```

The `<base>` element comes after the `<link>` and `<script>` elements, which triggers the validation error.

## Valid example

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <base href="https://example.com/">
  <title>Example</title>
  <link rel="stylesheet" href="styles/main.css">
  <script src="js/app.js"></script>
</head>
<body>
  <p>Hello</p>
</body>
</html>
```

Moving `<base>` before the `<link>` and `<script>` elements fixes the error and ensures all relative URLs resolve correctly.
