Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can data-* attribute contain HTML tags?

Tags:

I.E. <img src="world.jpg" data-title="Hello World!<br/>What gives?"/>

like image 597
Vector Avatar asked Jan 15 '11 11:01

Vector


People also ask

What is data -* in HTML?

The data-* attribute is used to store custom data private to the page or application. The data-* attribute gives us the ability to embed custom data attributes on all HTML elements.

Can a tag have data attribute?

HTML | data-* AttributesCustom Data Attributes allow you to add your own information to tags in HTML. Even though the name suggests otherwise, these are not specific to HTML5 and you can use the data-* attribute on all HTML elements. The data-* attributes can be used to define our own custom data attributes.

Which are the attributes of tag *?

Attributes define additional characteristics or properties of the element such as width and height of an image. Attributes are always specified in the start tag (or opening tag) and usually consists of name/value pairs like name="value" .

What are the 4 attributes of HTML?

The attribute is most useful with A, AREA, LINK, and IMG elements, where it provides a title for the linked or embedded resource.


2 Answers

As far as I understand the guidelines, it is basically valid, but it's better to use HTML entities.

From the HTML 4 reference:

You should also escape & within attribute values since entity references are allowed within cdata attribute values. In addition, you should escape > as > to avoid problems with older user agents that incorrectly perceive this as the end of a tag when coming across this character in quoted attribute values.

From the HTML 5 reference:

Except where otherwise specified, attributes on HTML elements may have any string value, including the empty string. Except where explicitly stated, there is no restriction on what text can be specified in such attributes.

So the best thing to do, as @tdammers already says, is to escape these characters (quoting the W3C reference)

  • &amp; to represent the & sign.
  • &lt; to represent the < sign.
  • &gt; to represent the > sign.
  • &quot; to represent the " mark.

and decoding them from their entity values if they are to be used as HTML.

like image 178
Pekka Avatar answered Oct 31 '22 05:10

Pekka


Providing you're serving it as text/html, then yes it's valid.

Note that not only is it possible to include markup inside attributes, but the HTML5 srcdoc attribute on the iframe element positively encourages it. The HTML5 draft says:

In the HTML syntax, authors need only remember to use U+0022 QUOTATION MARK characters (") to wrap the attribute contents and then to escape all U+0022 QUOTATION MARK (") and U+0026 AMPERSAND (&) characters, ....

Note, that when served with an XML content type (e.g. application/xhtml+xml), it is not valid, or even well-formed.

like image 41
Alohci Avatar answered Oct 31 '22 05:10

Alohci