HTML Guides for tag

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 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

<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

<p><font color="red">Some text</font></p>

<p><font color="red">More text</font></p>

Incorrect: closed before a nested <a>

<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

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

<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.

In HTML, elements fall into two categories regarding their content model: void elements and non-void elements. Void elements like <img>, <br>, <hr>, <input>, <meta>, and <link> cannot have any content and never need a closing tag. Non-void elements like <div>, <p>, <span>, <select>, <textarea>, and <script> can (or must) contain content and require both an opening tag and a closing tag.

When you write <div /> or <select />, you might expect the browser to treat it as a complete, self-contained element — similar to how XML or XHTML would interpret it. However, the HTML parser does not work this way. According to the WHATWG HTML Living Standard, the /> on a non-void element is simply ignored. The browser treats <div /> as just <div> — an opening tag without a corresponding closing tag. This can lead to serious structural problems in your document, as the browser will keep looking for content and a closing tag, potentially swallowing subsequent elements as children.

This issue commonly arises when developers are accustomed to frameworks like React (JSX), where <Component /> syntax is standard, or when coming from an XML/XHTML background where any element can be self-closed. It also appears when developers mistakenly believe that an element with no intended content can be self-closed in HTML.

The consequences can be significant. The browser's DOM tree may end up drastically different from what you intended, causing layout problems, broken functionality, and accessibility issues. For example, a self-closed <script /> tag won't behave as expected — the browser will treat everything after it as the script's content until it finds a </script> closing tag somewhere else in the document, effectively hiding your visible page content.

How to fix it

1. Remove the trailing slash from the non-void element's opening tag.
2. Add a proper closing tag immediately after the opening tag if the element should be empty, or after its content.

The complete list of void elements in HTML is: <area>, <base>, <br>, <col>, <embed>, <hr>, <img>, <input>, <link>, <meta>, <source>, <track>, and <wbr>. Only these elements may use self-closing syntax (and even for these, the / is optional in HTML).

Examples

Incorrect: Self-closing syntax on non-void elements

<div />

<select />

<option value="1">one</option>

</select>

<span />

<textarea />

<script src="app.js" />

Each of these will trigger the warning. The validator ignores the slash and treats them as opening tags, meaning the browser expects content and a closing tag to follow.

Correct: Using proper closing tags

<div></div>

<select>

<option value="1">one</option>

</select>

<span></span>

<textarea></textarea>

<script src="app.js"></script>

Correct: Self-closing syntax on void elements

Void elements can optionally use the trailing slash. Both forms below are valid:

<!-- With optional trailing slash -->

<img src="photo.jpg" alt="A photo" />

<br />

<input type="text" name="username" />

<!-- Without trailing slash (equally valid) -->

<img src="photo.jpg" alt="A photo">

<br>

<input type="text" name="username">

A subtle trap: <script />

This example demonstrates one of the most dangerous cases of this issue:

<!-- Incorrect: browser treats everything after this as script content -->

<script src="app.js" />

<p>This paragraph will not be rendered — it's consumed as script text.</p>

<!-- Correct -->

<script src="app.js"></script>

<p>This paragraph renders normally.</p>

The browser interprets the incorrect version as an opening <script> tag and reads all subsequent markup as script content until it encounters </script>, effectively hiding your page content and likely producing JavaScript errors.