Unable to validate HTML5 when using placeholder in div

Question

I've been contributing to a WYSIWYG text editor that was made using HTML5 and jQuery. While doing some of my research I've been seeing a lot of people use the placeholder attribute in a div. However, this does not follow the specification and I end up with the following error when I try to validate my HTML.

Attribute “placeholder” not allowed on element “div” at this point.

Is there a better way to do this so that my HTML will validate and I still end up with a placeholder?

Answer 1

Thanks to Juantxo Cruz's link I was able to fix my issue by using CSS as shown below:

HTML

<div contentEditable=true data-placeholder="Sample text"></div>

CSS

[contentEditable=true]:empty:not(:focus):before {
content:attr(data-placeholder)
}