HTML Guides for font

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><fontcolor="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><fontcolor="red">Some text</font></p>

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

Incorrect: closed before a nested <a>

<p><fontcolor="red"><ahref="/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><fontcolor="red"><ahref="/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>

<spanclass="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.

The <font> element was originally introduced to give authors control over text rendering directly in markup. A typical usage looked like <font face="Arial" size="3" color="red">. While browsers still render this element for backward compatibility, it has been obsolete since HTML5 and will trigger a validation error. The W3C validator flags it because it violates the principle of separation of concerns: HTML should define the structure and meaning of content, while CSS should handle its visual presentation.

Using <font> causes several practical problems:

• Maintainability: Styling scattered across <font> tags throughout your HTML is extremely difficult to update. Changing a color scheme could mean editing hundreds of elements instead of a single CSS rule.
• Accessibility: The <font> element carries no semantic meaning. Screen readers and other assistive technologies gain nothing from it, and its presence can clutter the document structure.
• Consistency: CSS enables you to define styles in one place and apply them uniformly across your entire site using classes, selectors, or external stylesheets.
• Standards compliance: Using obsolete elements means your HTML does not conform to the current specification, which can lead to unexpected rendering in future browser versions.

To fix this issue, remove every <font> element and replace its visual effects with equivalent CSS properties. The three attributes of <font> map directly to CSS:

You can apply CSS as inline styles for quick fixes, but using a <style> block or an external stylesheet with classes is the preferred approach for any real project.

Examples

Incorrect: using the obsolete <font> element

<p>

<fontface="Arial"size="4"color="blue">Welcome to my website</font>

</p>

This triggers the validator error: The "font" element is obsolete. Use CSS instead.

Fix with inline styles

If you need a quick, direct replacement:

<pstyle="font-family: Arial, sans-serif;font-size:18px;color: blue;">

Welcome to my website

</p>

Fix with a CSS class (recommended)

Using a class keeps your HTML clean and makes styles reusable:

<style>

.welcome-text{

font-family: Arial, sans-serif;

font-size:18px;

color: blue;

}

</style>

<pclass="welcome-text">Welcome to my website</p>

Nested <font> elements replaced with CSS

Old markup sometimes used multiple nested <font> tags:

<!-- Obsolete -->

<p>

<fontcolor="red"size="5">

Important:

<fontface="Courier">code goes here</font>

</font>

</p>

The correct approach uses <span> elements or semantic tags with CSS classes:

<style>

.alert-heading{

color: red;

font-size:24px;

}

.code-snippet{

font-family: Courier, monospace;

}

</style>

<p>

<spanclass="alert-heading">

Important:

<spanclass="code-snippet">code goes here</span>

</span>

</p>

If the text carries a specific meaning — such as marking something as important or representing code — consider using semantic HTML elements like <strong>, <em>, or <code> alongside your CSS:

<style>

.alert-heading{

color: red;

font-size:24px;

}

</style>

<pclass="alert-heading">

<strong>Important:</strong>

<code>code goes here</code>

</p>

This approach gives you full control over appearance through CSS while keeping your HTML meaningful, accessible, and standards-compliant.