# End tag “font” violates nesting rules.

> Canonical HTML version: https://rocketvalidator.com/html-validation/end-tag-font-violates-nesting-rules
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The closing `</font>` tag closes across the boundary of another element that was still open. Tags have to nest cleanly: the element you opened last is the one you close first. When `</font>` appears while something opened inside it is still open, or it reaches past the element that contains it, the parser can't build a sensible tree and falls back to the [adoption agency algorithm](https://html.spec.whatwg.org/multipage/parsing.html) to patch things up. Different browsers can patch them differently, so the DOM you get may not match the DOM you wrote, and screen readers lose the real structure of the content.

## Examples

### Incorrect: `</font>` crosses a `<p>` boundary

```html
<p><font color="red">Some text</p>
<p>More text</font></p>
```

The `<font>` opens in the first paragraph but closes in the second, so the tags overlap.

### Correct: each `<font>` opens and closes in the same element

```html
<p><font color="red">Some text</font></p>
<p><font color="red">More text</font></p>
```

### Incorrect: closed before a nested `<a>`

```html
<p><font color="red"><a href="/about">About us</font></a></p>
```

The `<a>` opened inside the `<font>`, so `</a>` has to come before `</font>`.

### Correct: inner element closed first

```html
<p><font color="red"><a href="/about">About us</a></font></p>
```

## `<font>` is also obsolete

Fixing the nesting still leaves you with a `<font>` element, which was dropped from HTML5. Browsers keep parsing it, but the validator flags it on its own too. The simplest fix for both problems is to drop `<font>` and style the text with CSS. A `<span>` nests far more predictably:

```html
<style>
  .highlight {
    color: red;
    font-size: 1.2em;
  }
</style>

<p>
  <span class="highlight">This text is styled with CSS.</span>
</p>
```

Swapping `<font>` for CSS properties like `color`, `font-size`, and `font-family` clears the nesting violation and the obsolete-element warning at the same time.