OK to have text in div without paragraph tag?

Question

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>

Answer 1

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?

• Search engine optimization: Machines reading your content (e.g. Google's search index crawler) will know that this is a list and can react accordingly. This is better understandable when looking at headings: an <h1> element will be treated by search engines with higher importance than a <b> element (which doesn't have any semantic meaning).
• Accessibility: Assistive software (e.g. screen readers for blind or vision impaired surfers) can tell that this is a list, and users can navigate it accordingly (e.g. jump from one list item to the next).

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.

Answer 2

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>.