I positive do love little reminders about HTML semantics, notably semantics which are more durable to decide to reminiscence. Scott has a terrific one, starting with this markup:
<p>I'm a paragraph.</p>
<span>I'm additionally a paragraph.</span>
<div>You may hate it, however I am a paragraph too.</div>
<ul>
<li>Even I'm a paragraph.</li>
<li>Although I am an inventory merchandise as nicely.</li>
</ul>
<p>I would trick you</p>
<handle>Guess who? A paragraph!</handle>
It’s possible you’ll have a look at that markup and say “Hey! You may’t idiot me, solely the
<p>
components are “actual” paragraphs!You may even name out such components as
div
s orspan
s getting used as “paragraphs” a WCAG failure.However, if you happen to’re pondering these types of issues, then possibly you’re not conscious that these are truly all “paragraphs”.
It’s simple to neglect this since a lot of these non-paragraph components should not allowed in between paragraph tags and it often will get all sorted out anyway when HTML is parsed.
The accessibility bits are what I all the time come to Scott’s writing for:
These examples I supplied at first of this put up? macOS VoiceOver, NVDA and JAWS deal with all of them as paragraphs ([asterisks] for NVDA, learn on…). […] The purpose being that display screen readers are consistent with HTML, and perceive that “paragraphs” are extra than simply the
p
factor.