Help:Lint errors/html5-misnesting

Input Wikitext

<span>a

b</span>

Tidy output

Tidy cleans up the PHP parser output to generate

<p><span>a</span></p>
<p><span>b</span></p>

HTML5 output (ex: Parsoid, RemexHTML)

But, a HTML5 based tool cleans up the PHP parser output differently to generate

<p><span>a</span></p>
<p>b</p>

Recommended fix

Change the wikitext to:

<span style="...">a</span>

<span style="...">b</span>

or to:

<div style="...">
a

b
</div>

Other tips

Pages are sometimes placed in the error group called "Misnested tag with different rendering in HTML5 and HTML4" even though the real problem is a stray opening or closing tag. If there are "missing end tag" or "stripped tag" errors on the page you are trying to fix, correct all of those first, and the misnested tag error may go away as a result of those fixes. Sometimes, the "missing end tag" error is not even shown, even though it is the real error (see the use case below that begins "This line is highlighted...").

One of the main ways this affects wiki pages is when a span (or any other tag in the list of affected tags below) is used to wrap a list. Because of the interactions between a bug in the PHP parser (which is hard to fix and is the reason for the pwrap-bug-workaround linter category - Parsoid does not have this bug) and the HTML5 parsing spec, when Tidy is removed, these wrappers will no longer apply to the list.

When a ‎<span> tag is used to wrap a list, use a ‎<div> tag instead. It is the correct way to do it since a list is a block structure and ‎<div> is more appropriate instead of ‎<span> which makes more sense in inline text contexts. This is the recommended fix. See this edit on the italian wikipedia for an example.

But, where appropriate, consider fixes like those in the table below.

Use case	Alternative markup or suggested fix
‎<span> tag used for formatting (font-size, underline, etc.)	Use the appropriate formatting tag (ex: ‎<small> tag if reducing font-size Example from metawiki)
‎<del> tag wrapping a list to strike through elements of a list	Option 1: Use a ‎<s> tag instead Option 2: Wrap every individual item with a ‎<del> tag
‎<span> tag with empty styles	Get rid of the span tag
‎<span> tag wrapping block tags in all cases	Use a ‎<div> tag instead (add style="display:inline;" if a line break is undesirable)
Template that uses ‎<span> tags wrapping a template that uses ‎<div> tags	Change the wrapper template to use ‎<div> tags, as long as the wrapper template is never used inside span tags. OR If the wrapper template applies a class like "nowrap", apply that class within the inner template instead.
<span style="font-size: 80%"><sup>2</sup>Lorem ipsum etc.	This line is highlighted as a misnesting error, but the actual problem is a missing span tag at the end of the line. Add the missing end tag (or remove the opening tag, if it is extraneous) to fix the problem.
"You need to use a <span> tag to do that...."	An editor has typed a tag as an example, but they should have escaped it. Replace the opening < character with &lt;
"This is an <abbr>abbreviation<abbr>" (trailing opening tag inserted by mistake)	An editor has typed a set of opening and closing tags, but they failed to insert a / into the closing tag. Replace the final ‎<abbr> tag with ‎</abbr>.
Pipe character used in a signature	If an editor used a pipe (vertical line, |) character in their signature along with markup or tags, and that signature was used inside a template, the pipe is being interpreted as separating template parameters. Replace the pipe with &#124;

Pay special attention to ‎<sub>, ‎<sup>

On pages with mathematical formulae, misnesting of a sub or sup tag might subtly change the meaning of the formula. It is important to fix these cases. See this example from enwiki.

Affected tags

The following tags are affected.

ABBR, BDI, BDO, CITE, DATA, DEL, DFN, INS, KBD, MARK,
Q, RB, RP, RT, RTC, RUBY, SAMP, SPAN, SUB, SUP, TIME, VAR

See also

• phab:T176353
• phab:T176363