00 Votes

HTML5 Validator: How to fix "Warning trimming empty <p> or <div>"

Question by Compi | 2016-02-21 at 12:59

When trying to validate my HTML5 website, I get to error messages referring to empty p- or empty div- elements on my page.

Warning: trimming empty
Warning: trimming empty

The first error message always appears when I am writing <p></p>, the other in case of an empty div-container like <div class="xyz"></div>.

Now, I am using the empty paragraphs to get a little bit more distance between two texts and I am using the empty container for example to apply a class with clear:both or solely for specific design purposes.

So, it makes no sense for me to fill those empty elements, nevertheless I would like to get rid off this error message to and sure and error-free website. Does someone have any idea what I can do here?

1Best Answer1 Vote

If there is really no other way, you can either put a space or an HTML comment into the empty elements:

<div class="xyz">&nbsp;</div>
<div class="xyz"><!----></div>

Here, we are using the non breaking space &nbsp; and an HTML comment with <!-- -->.

Otherwise, it would certainly be better to solve layout and design issues by other means. For example, let us have a look at the p-element: If you should want to have more distance between two paragraphs or a header, you can just raise the padding of one of the existing paragraphs with CSS (perhaps you can introduce a class for that) instead of adding a new empty paragraph for the distance.
2016-02-23 at 10:40

ReplyPositive Negative

Related Topics

"G" or "E" sign on my mobile

Question | 1 Answer

Important Note

Please note: The contributions published on askingbox.com are contributions of users and should not substitute professional advice. They are not verified by independents and do not necessarily reflect the opinion of askingbox.com. Learn more.


Ask your own question or write your own article on askingbox.com. That’s how it’s done.