I'm trying to understand the utility of the <p>
tag. I want to write less HTML, and am always for simplifying things in general, but feel like I heard someone mentioning that for SEO purposes or clarity or something, all text should reside within a paragraph tag? It's just seems like one more set of margin/padding/border/css business to deal with. Will I not pass some kind of linting tool?
<div> Cheerio, worldie! </div>
Vs:
<div> <p>Hello, world!</p> </div>
Yes, you can directly add content text into a div tag, although using p tags would be preferable in most circumstances.
Yes, <p> elements are encouraged and won't get deprecated any time soon. Show activity on this post. A <p> signifies a paragraph. It should be used only to wrap a paragraph of text.
A <p> would tell that the text within a <div> element is split into paragraphs, thus if you have text split into paragraphs, you should use <p> ; on the other hand, a <p> cannot contain elements other than so-called phrasing content; thus you cannot have a <div> inside a <p> .
The paragraph is the basic text structure element used in HTML. Almost all text (tables and headers being exceptions) will need to be wrapped in p tags to display correctly. This includes inside li and dd tags. To be clear, each paragraph in text should be wrapped in its own set of p tags.
From a semantical point of view, you should always have your content placed within containers of meaning.
For example, you could create a list of items (e.g. a todo list) like this:
<div> - Buy groceries<br> - Clean my room<br> - Learn HTML </div>
But this only looks like a list, but from a semantical point of view, it's just plain text, as <div>
elements do not have any semantical meaning (they are only meant to be used for layout purposes).
A proper semantic list looks like this:
<ul> <li>Buy groceries</li> <li>Clean my room</li> <li>Learn HTML</li> </ul>
Now it really is a list.
So: Why does this matter?
<h1>
element will be treated by search engines with higher importance than a <b>
element (which doesn't have any semantic meaning).So the general rule is that you should always think of what type of content you want to present to the user: Is it a list (an <ul>
or <ol>
element)? Is it text (one or many <p>
elements)? Is it a heading (an <h1>
to <h6>
element)? This allows all kinds of readers to interpret your content more thoroughly.
So while from a technical point of view text is absolutely valid in bare <div>
elements (which don't contain any semantical meaning), from a content's point of view you absolutely should use <p>
elements when displaying text on your site. And as all websites are about their content, you should follow this rule thoroughly.
Yes, it is ok to use a <div>
element without <p>
.
A <p>
would tell that the text within a <div>
element is split into paragraphs, thus if you have text split into paragraphs, you should use <p>
; on the other hand, a <p>
cannot contain elements other than so-called phrasing content; thus you cannot have a <div>
inside a <p>
.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With