Guías HTML para i

HTML follows a strict stack-based nesting model. When you open an element, it becomes the “current” element, and any new element you open becomes a child of it. Closing tags must mirror the opening order in reverse. When the validator encounters </i> but the most recently opened unclosed element is something else — like <strong>, <b>, <span>, or <a> — the nesting rules are violated because the <i> element and the other element are overlapping rather than containing one another.

For example, if you write <i>...<strong>...</i>...</strong>, the <i> and <strong> elements overlap. The <i> tries to close while <strong> is still open inside it, and then <strong> tries to close outside of <i>. This creates an ambiguous structure that no valid DOM tree can represent as written. Browsers will attempt to “fix” this using error-recovery algorithms, but the result may differ across browsers and is unlikely to match your intent.

Why this matters

• Unpredictable rendering: Browser error-recovery can silently restructure your markup, leading to missing styles, broken links, or misplaced text.
• Accessibility: Screen readers rely on a well-formed DOM tree. Mis-nested elements can cause assistive technology to misinterpret the structure, reading content out of order or missing emphasis cues entirely.
• Maintainability: Overlapping tags make code harder to read and debug. Future edits are more likely to introduce additional errors.

Common causes

• Overlapping inline elements: Opening <i> and then <b> (or <strong>, <em>, <span>, etc.) but closing </i> before </b>.
• Tags crossing an anchor boundary: Starting <i> outside an <a> element but closing it inside, or vice versa.
• Copy-paste errors: Duplicating a block of HTML that includes icons (e.g., Font Awesome <i> tags) or screen-reader-only <span> elements, then editing part of it without fixing the tag order.
• Mixing presentational and semantic markup: Wrapping <i> around content that already contains <em> or <strong>, then accidentally closing in the wrong sequence.

How to fix it

1. Identify the overlapping pair. The validator message usually points to the line where </i> appears. Look for the nearest unclosed element that was opened after <i>.
2. Reorder the closing tags so they mirror the opening order in reverse. If you opened <i> then <strong>, close </strong> then </i>.
3. If the overlap is intentional (e.g., you want bold-italic text that transitions to just bold), restructure by closing and reopening elements at the boundary rather than overlapping them.
4. Consider semantic alternatives. The <i> element is for idiomatic text (technical terms, foreign phrases, thoughts). If you need emphasis, use <em>. If you only need italic styling, use CSS font-style: italic;. Whichever element you choose, the nesting rules are the same.

Examples

Incorrect — overlapping <i> and <strong>

The </i> closes while <strong> is still open inside it:

<p>
  <a href="/about"><i>About <strong>Us</i></strong></a>
</p>

Correct — properly nested

Close <strong> first, then <i>:

<p>
  <a href="/about"><i>About <strong>Us</strong></i></a>
</p>

Incorrect — <i> crossing an anchor boundary

<p>
  <i><a href="/contact">Contact us</i></a> for more info.
</p>

Correct — keep <i> fully inside or fully outside the link

<p>
  <a href="/contact"><i>Contact us</i></a> for more info.
</p>

Incorrect — overlapping inline elements with a style transition

Trying to make “bold italic” transition to “just bold” by overlapping:

<p>
  <i>Italic and <b>bold-italic</i> then just bold.</b>
</p>

Correct — close and reopen at the boundary

<p>
  <i>Italic and <b>bold-italic</b></i><b> then just bold.</b>
</p>

Incorrect — icon element mis-nested with a span

<button>
  <i class="icon-search"><span class="sr-only">Search</i></span>
</button>

Correct — close <span> before <i>

<button>
  <i class="icon-search"><span class="sr-only">Search</span></i>
</button>

A quick way to check your nesting is to read through your opening tags in order and then confirm the closing tags appear in exactly the reverse order. If you opened <a>, <i>, <strong>, the closing sequence must be </strong>, </i>, </a>. When in doubt, use your editor’s bracket-matching or tag-highlighting feature to visually trace each pair.