StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>HTML5 introduces the notion of <a href="https://html.spec.whatwg.org/#embedding-custom-non-visible-data-with-the-data-*-attributes" rel="noreferrer">custom data attributes</a>, that anyone can create in order to attach custom, hidden data to elements for scripting purposes. Just create an attribute using a <code>data-</code> prefix, such as <code>data-myattr1</code> or <code>data-myattr2</code>, and fill it with your data.</p> <pre><code><div data-myattr1="myvalue1" data-myattr2="myvalue2">Content</div> </code></pre> <p>The nice thing about this solution is that it already works in all major browsers; they will all parse unknown attributes, and expose them in the DOM for access by JavaScript. HTML5 adds a few convenience mechanisms for accessing them, which haven't been implemented yet, but you can just use the standard <a href="https://developer.mozilla.org/En/DOM/Element.getAttribute" rel="noreferrer"><code>getAttribute</code></a> to access them for now. And the fact that they are allowed in HTML5 means that your code will validate, as long as you're willing to use a draft standard as opposed to an accepted one (I don't believe the <code>data-</code> attributes are particularly controversial, however, so I'd be surprised if they were removed from the standard).</p> <p>The advantage this has over namespaced attributes in XHTML is the IE doesn't support XHTML, so you would have to implement something that pretends to use namespace attributes but actually just uses invalid attributes with a <code>:</code> in their name, which is how IE would parse them. It's nicer than using <code>class</code>, because putting lots of data into a <code>class</code> attribute overloads it quite a lot, and involves having to do extra parsing to pull out different pieces of data. And it's better than just making up your own (which will work in current browsers), because it's well defined that these attributes prefixed with <code>data-</code> are private pieces of data for scripting, and so your code will validate in HTML5 and won't ever conflict with future standards.</p> <p>Another little-known technique for adding custom data to HTML, which is valid even in HTML 4, is adding <code>script</code> elements with <code>type</code> attributes of something other than <code>text/javascript</code> (or one of the couple of other types that can be used to specify JavaScript). These script blocks will be ignored by browsers that don't know what to with them, and you can access them via the DOM and do what you want with them. HTML5 <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/scripting-1.html#script" rel="noreferrer">explicitly discusses this usage</a>, but there's nothing that makes it invalid in older versions, and it works in all modern browsers as far as I know. For example, if you would like to use CSV to define a table of data:</p> <pre><code><div> <script type="text/csv;header=present"> id,myattr1,myattr2 something,1,2 another,2,4 </script> Content </div> </code></pre> <p>This is the technique used by <a href="http://code.google.com/p/svgweb/" rel="noreferrer">SVG Web</a> to allow embedding of SVG in HTML, with emulation via Flash if the browser doesn't support native SVG. Currently, even browsers that do support SVG (Firefox, Safari, Chrome, Opera) don't support it directly inline in HTML, they only support it directly inline in XHTML (because the SVG elements are in a different namespace). SVG Web allows you to put SVG inline in HTML, using a script tag, and it then transforms those elements into the appropriate namespace and adds them to the DOM, so they can be rendered as XHTML. In browsers that don't support SVG, it then also emulates the function of the elements using Flash.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload