I sure do love little reminders about HTML semantics, particularly semantics that are tougher to commit to memory. Scott has a great one, beginning with this markup:
<p>I am a paragraph.</p>
<span>I am also a paragraph.</span>
<div>You might hate it, but I'm a paragraph too.</div>
<ul>
<li>Even I am a paragraph.</li>
<li>Though I'm a list item as well.</li>
</ul>
<p>I might trick you</p>
<address>Guess who? A paragraph!</address>
You may look at that markup and say “Hey! You can’t fool me, only the
<p>
elements are “real” paragraphs!You might even call out such elements as
div
s orspan
s being used as “paragraphs” a WCAG failure.But, if you’re thinking those sorts of things, then maybe you’re not aware that those are actually all “paragraphs”.
It’s easy to forget this since many of those non-paragraph elements are not allowed in between paragraph tags and it usually gets all sorted out anyway when HTML is parsed.
The accessibility bits are what I always come to Scott’s writing for:
Those examples I provided at the start of this post? macOS VoiceOver, NVDA and JAWS treat them all as paragraphs ([asterisks] for NVDA, read on…). […] The point being that screen readers are in step with HTML, and understand that “paragraphs” are more than just the
p
element.
Paragraphs originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.
Having fun with Bramus’ new Caniuse CLI tool. This’ll save lots of trips to the…
Two possible syntaxes for CSS masonry, one draft specification, and you get to share your…
Getting right to it: the CSS-Tricks Almanac got a big refresh this week! I’m guessing…
I’m working on a refresh of my personal website, what I’m calling the HD remaster.…
Only Chris, right? You’ll want to view this in a Chromium browser: CodePen Embed Fallback…
I’m a big Lynn Fisher fan. You probably are, too, if you’re reading this. Or…