This content originally appeared on CSS-Tricks and was authored by Geoff Graham
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
divs orspans 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
pelement.
Paragraphs originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.
This content originally appeared on CSS-Tricks and was authored by Geoff Graham
Geoff Graham | Sciencx (2024-08-30T14:23:52+00:00) Paragraphs. Retrieved from https://www.scien.cx/2024/08/30/paragraphs-2/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.