HTML Guides for standard

The < and > characters have special meaning in HTML — they signal the start and end of tags. When the parser encounters </>, it sees what looks like a closing tag with no element name, which is invalid in HTML. This sequence can appear in your markup for two main reasons:

1. Unescaped text content: You’re trying to display the literal characters </> as visible text on the page (common in tutorials, documentation, or code snippets), but the browser interprets them as markup rather than content.
2. Mistyped end tag: You intended to write a proper closing tag like </p> or </div> but accidentally omitted the element name, leaving just </>.

This matters because browsers may silently discard the malformed tag or interpret it in unexpected ways, leading to broken layouts or missing content. Screen readers and other assistive technologies may also struggle with the resulting DOM structure. Properly escaping special characters and writing well-formed tags ensures consistent rendering across all browsers and devices.

To fix this, determine which scenario applies. If you want to display the literal text </>, replace < with &lt; and > with &gt;. If you meant to close an element, add the correct element name between </ and >.

Examples

Unescaped angle brackets in text content

This triggers the error because the parser sees </> as an invalid closing tag:

<!-- ❌ Bad: raw </> in text content -->

<p>In JSX, self-closing tags use the </> syntax.</p>

Escape the angle brackets using HTML character entities:

<!-- ✅ Good: properly escaped characters -->

<p>In JSX, self-closing tags use the &lt;/&gt; syntax.</p>

Mistyped closing tag with missing element name

This triggers the error because the closing tag has no name:

<!-- ❌ Bad: empty closing tag -->

<div class="container">
  <p>Some content here.</p>
</>

Add the correct element name to the closing tag:

<!-- ✅ Good: proper closing tag -->

<div class="container">
  <p>Some content here.</p>
</div>

Displaying code snippets with angle brackets

When writing about HTML or XML in your page content, all angle brackets in text must be escaped:

<!-- ❌ Bad: unescaped tags in text -->

<p>Use <strong> to make text bold and </strong> to close it.</p>

<!-- ✅ Good: escaped tags in text -->

<p>Use &lt;strong&gt; to make text bold and &lt;/strong&gt; to close it.</p>

Using the <code> element for inline code

Even inside <code> elements, angle brackets must still be escaped — the <code> element only changes visual presentation, it does not prevent HTML parsing:

<!-- ❌ Bad: unescaped inside <code> -->

<p>A React fragment looks like <code><></code> and <code></></code>.</p>

<!-- ✅ Good: escaped inside <code> -->

<p>A React fragment looks like <code>&lt;&gt;</code> and <code>&lt;/&gt;</code>.</p>

Using <pre> blocks for larger code examples

The same escaping rules apply within <pre> elements:

<!-- ✅ Good: escaped characters inside pre -->

<pre><code>&lt;div&gt;
  &lt;p&gt;Hello, world!&lt;/p&gt;
&lt;/div&gt;</code></pre>

If you frequently need to display code and find manual escaping tedious, consider using a JavaScript-based syntax highlighting library that handles escaping automatically, or use a build tool or templating engine that escapes HTML entities for you.