'Can we have content text directly in <div>?
can we have content text directly in <div>text content</div> or it should be like <div><p>text content</p></div>? according to web standards.
Solution 1:[1]
You can have it directly in a div. The div is often used to group block-elements to format them with styles, but normal, unmarkedup text in a div is just fine.
Solution 2:[2]
The standards are not so well defined. I would choose your second example, because it is more structurally sound, and therefore more semantic.
Solution 3:[3]
Yes, you can directly add content text into a div tag, although using p tags would be preferable in most circumstances.
Solution 4:[4]
Screen readers seem to handle <div>phrasing content</div> and <div><p>phrasing content</p></div>
differently in some circumstances.
It seems that the rules for elements that can contain flow content and elements that can contain phrasing content are different.
Solution 5:[5]
There's a two questions implied here, can and should. can is straight-forward, should is not.
So, Can you nest content text directly into a div?
The current active spec states The div element has no special meaning **at all**. So, yes there is no reason why you cannot nest text directly into a div, but that text has no special meaning.
Should you nest content text directly into a div?
No, not really. There is one fundamental problem with putting text into an element that has no special meaning. What does that text mean? Is it a title or a simple block of text, etc. For most people this isn't an issue. If you're using a screen reader it is. The screen reader needs more information to understand the context of the text. This is why the HTML spec on div now includes the following text:
Note Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of the div element leads to better accessibility for readers and easier maintainability for authors.
so ideally all your text should be nested into a HTML element that represents it's context, e.g. <p>, <h1>, etc.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | karim79 |
| Solution 2 | |
| Solution 3 | kevinji |
| Solution 4 | Liam |
| Solution 5 | Liam |