Paragraphs

I positive do love little reminders about HTML semantics, significantly semantics which might be 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 a listing merchandise as properly.</li>
</ul>
<p>I’d trick you</p>
<tackle>Guess who? A paragraph!</tackle>

Chances are you’ll take a look at that markup and say “Hey! You may’t idiot me, solely the <p> parts are “actual” paragraphs!

You may even name out such parts as divs or spans getting used as “paragraphs” a WCAG failure.

However, for those who’re pondering these types of issues, then possibly you’re not conscious that these are really all “paragraphs”.

It’s straightforward to neglect this since a lot of these non-paragraph parts aren’t allowed in between paragraph tags and it often will get all sorted out anyway when HTML is parsed.

The accessibility bits are what I at all times come to Scott’s writing for:

These examples I supplied in the beginning 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 readers are in line with HTML, and perceive that “paragraphs” are extra than simply the p aspect.

Paragraphs initially printed on CSS-Methods, which is a part of the DigitalOcean household. It is best to get the e-newsletter.