CODEWITHSUNDEEP
htmlaccessibilitysemantic-markup
Adam McKenna
Adam McKenna

Reputation: 2435

Is it semantically correct to use a <p> for text that technically is not a paragraph

More often that not when I am writing the markup for a website, as soon as any form of text appears I will use a <p> tag. Whether it's a paragraph on a blog post

<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Nam eget mattis enim. Ut tempus pulvinar est et consectetur. 
    Sed malesuada ex et augue vulputate congue sit amet ut nunc. 
</p>

Or whether it's a small piece of information, such as an address in the footer, a phone number in the header, or even a warning message.

<p>0191 482 4003</p>
<p>123 Random Address Road</p>
<p>Wait! An error has occurred.</p>

Technically speaking, I don't believe these are 'paragraphs' of text, but rather small snippets with their own specific context.

There are exceptions to this rule of thumb. For instance, if the text content was time (say, in a clock widget), I would use the <time> widget.

Is there a more 'semantically correct' way to display text that isn't technically a paragraph? Perhaps a more specific HTML tag for certain situations, like the <time> tag?

Upvotes: 2

Views: 680

Answers (1)

frederickf
frederickf

Reputation: 1531

The semantics of elements are described by the html specification. I think it is fair to say that a semantically correct usage is one that is consistent with what is in the specification.

There are two html specifications, but in this case they provide the exact same description of paragraph:

A paragraph is typically a run of phrasing content that forms a block of text with one or more sentences that discuss a particular topic, as in typography, but can also be used for more general thematic grouping. For instance, an address is also a paragraph, as is a part of a form, a byline, or a stanza in a poem. https://html.spec.whatwg.org/multipage/dom.html#paragraphs, https://www.w3.org/TR/html5/dom.html#paragraphs

The examples you provided fit within that description, so I would say they are semantically correct usages.

However, regarding a phone number in the header, or an address in the footer, it turns out there may be an even more semantically correct element.

The Address element:

The address element represents the contact information for its nearest article or body element ancestor. If that is the body element, then the contact information applies to the document as a whole. https://html.spec.whatwg.org/multipage/sections.html#the-address-element, https://www.w3.org/TR/html5/sections.html#the-address-element

<address></address>

As an example, if you were creating a webpage about the history of addresses throughout time, you would use paragraph tags in the body to demonstrate historical addresses, but in the header/footer you would use address tags to markup your contact info as the page author.

Upvotes: 4

Related Questions