Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

OK to have text in div without paragraph tag?

Tags:

html

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> 
like image 502
tarabyte Avatar asked Feb 15 '15 18:02

tarabyte


People also ask

Can I put text directly in a div?

Yes, you can directly add content text into a div tag, although using p tags would be preferable in most circumstances.

Is paragraph tag necessary in HTML?

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.

How do I display text in a div?

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

Should all text be in P tag?

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.


2 Answers

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.

like image 92
Joshua Muheim Avatar answered Oct 10 '22 23:10

Joshua Muheim


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