HTML Guides for less than

When the HTML parser reads a tag, it expects a specific sequence: the tag name, then optional attributes (each with a name, optionally followed by = and a value), and finally a closing >. If the parser encounters a < character in a position where it’s looking for an attribute name, it means something has gone structurally wrong. The parser interprets the < as the beginning of a new tag, but since it’s still inside the current tag’s definition, it raises this error.

This issue commonly arises from three scenarios:

1. A stray < character inside a tag — perhaps from a typo or a copy-paste error.
2. A missing > on a previous tag — causing the parser to treat the next tag’s < as though it’s still part of the previous tag’s attributes.
3. Incorrectly nested or overlapping tags — where one element is accidentally placed inside another element’s opening tag.

This matters because browsers handle malformed HTML unpredictably. One browser might silently ignore the stray character, while another might drop the entire element or render content incorrectly. Fixing these structural errors ensures consistent rendering across all browsers and improves accessibility, since screen readers and other assistive technologies rely on well-formed markup to interpret page structure.

Examples

Stray < character inside a tag

A common typo where an extra < appears before the closing of a self-closing tag or between attributes:

<!-- ❌ Stray "<" inside the img tag -->

<img src="photo.jpg" alt="smiling cat" < />

Remove the stray < character:

<!-- ✅ Fixed: no extra "<" -->

<img src="photo.jpg" alt="smiling cat" />

Missing > on a preceding tag

When a tag is missing its closing >, the parser continues reading the next tag as though it were part of the first tag’s attributes:

<!-- ❌ The opening <div> is missing its closing ">" -->

<div class="wrapper"
<p>Hello, world!</p>
</div>

The parser sees <p> while still inside the <div> tag, triggering the error. Add the missing >:

<!-- ✅ Fixed: <div> is properly closed -->

<div class="wrapper">
  <p>Hello, world!</p>
</div>

Missing > on a tag with multiple attributes

This often happens with tags that have many attributes, making it easy to miss the closing >:

<!-- ❌ The <a> tag is missing its closing ">" -->

<a href="/about" class="nav-link" id="about-link"
<span>About Us</span>
</a>

<!-- ✅ Fixed: closing ">" added to the <a> tag -->

<a href="/about" class="nav-link" id="about-link">
  <span>About Us</span>
</a>

Accidental angle bracket in an attribute value

If an attribute value contains a < that isn’t properly quoted, the parser may misinterpret it:

<!-- ❌ Unquoted or broken attribute value with "<" -->

<div title=5<10>
  <p>Content</p>
</div>

Ensure attribute values containing special characters are properly quoted and use HTML entities where needed:

<!-- ✅ Fixed: value is quoted and uses an entity for "<" -->

<div title="5&lt;10">
  <p>Content</p>
</div>

How to debug this error

When you see this error, follow these steps:

1. Go to the line number reported by the validator.
2. Look at the tag on that line — check if it has a stray < character.
3. If the tag looks fine, check the tag immediately before it — a missing > on the previous tag is often the real culprit.
4. Verify all attribute values are properly quoted — unquoted values containing < can trigger this error.
5. Use a code editor with syntax highlighting — mismatched or broken tags are usually easy to spot when the syntax colors look wrong.