Are Empty HTML5 Data Attributes Valid

Are empty HTML5 data attributes valid?

Valid, but they aren't boolean.

Custom data attributes specification doesn't mention any changes to empty attributes handling, so the general rules about empty attributes apply here:

Certain attributes may be specified by providing just the attribute name, with no value.

In the following example, the disabled attribute is given with the empty attribute syntax:

<input disabled>

Note that empty attribute syntax is exactly equivalent to specifying the empty string as the value for the attribute, as in the following example.

<input disabled="">

So you are allowed to use empty custom data attributes, but special handling is needed to use them as boolean.

When you are accessing an empty attribute, its value is "". Since it's a falsy value, you can't just use if (element.dataset.myattr) to check whether an attribute is present.

You should use element.hasAttribute('myattr') or if (element.dataset.myattr !== undefined) instead.

---

Lloyd's answer is wrong. He mentions link to boolean attributes microsyntax, but data-* attributes are not specified as boolean in the spec.

Do html5 data attributes need a value?

No. But...

As is common with all attributes, in the application/xhtml+xml serialisation, XML rules apply and the attribute must have an explicit name and (quoted) value.

So this question is really about the text/html serialisation, and therefore the relevant part of the HTML5 spec is Section 8 The HTML syntax

In particular, under attributes, it says:

Attributes can be specified in four different ways:

where the first of these is:

Empty attribute syntax

   Just the attribute name. The value is implicitly the empty string.

It's necessary to understand though that the value is of string type, not of boolean type.

For example, with <input id="cb" type="checkbox" checked>, the "checked" attribute is reflected by a property that is either true or false. So

if (document.getElementById("cb").checked)

will evaluate to true for the above markup.

In contrast, with <input id="cb" type="checkbox" data-checked>, the "data-checked" attribute is reflected via the dataset object as a string. The value of this property is the empty string, which in JavaScript is falsey. So,

if (document.getElementById("cb").dataset.checked)

will evaluate to false for the above markup.

To do the equivalent test, compare the value for "not undefined". I.e.

if (document.getElementById("cb").dataset.checked !== undefined)

will evaluate to true for the above markup.

See http://jsfiddle.net/GAxvW/

Checking for HTML5 data attribute with no value

You can accomplish this by checking if the element contains the attribute using the hasAttribute method:

document.getElementById('1').hasAttribute('data-foo')

How to detect if an HTML5 data-* attribute has empty string as value?

Your code needs a little tweak in order to work:

$(document).ready(function(){
  $('.list--item').click(function(event, target){
   function hasId(my){
    if (my.data('id') != ''){
        return true;
    }
    else{
        return false;
    }
  };
 var entry = {
  id: $(this).data('id'),
  hasId: hasId($(this))
 };
 if (entry.hasId){
  $('.message').addClass('active true');
  $('.message').text('Picked entry ID: ' + entry.id);
 }
 else{
  $('.message').addClass('active false');
  $('.message').text('Entry ID not available');
 }
});
});

Working fiddle: http://codepen.io/anon/pen/meZbqQ

Basically was just a mather of scope; inside your hasId function you are referencing to $(this) and asking for the data('id') attribute, but in that scope $(this) isn't referencing the initial entry object.

Creating empty data-attributes in Thymeleaf

The __ syntax isn't anything special... it just makes it run the evaluator twice. The reason it doesn't work is because in each case, it resolves to an invalid thymeleaf expression.

For example:

<input th:attr="__${'data-customAttr=' + ''}__" />
<!-- evaluates to -->
<input th:attr="data-customAttr=" />
<!-- which is an invalid expression -->

Same with

<input th:attr="__${'data-customAttr'}__" />
<!-- evaluates to -->
<input th:attr="data-customAttr" />
<!-- which is again, an invalid expression -->

It does appear that thymeleaf won't add empty attributes. So I think the best you are going to do is something like this:

<input th:attr="data-customAttr-exists=${item.getMyAttr() != null}, data-customAttr=${item.getMyAttr()}" />

And you'll have to check the first property to know whether or not it exists, and the second property for the value. This should allow you to know all cases.

Is there any problem with using HTML5's data-* attributes for older browsers?

There isn't really, they're not 100% correct/valid usage in HTML4 of course....but they don't cause problems either, so they're still a great way to solve the "I need an attribute for this" problem.

If it helps, I've used these while supporting IE6 and have had zero issues thus far, and I can't recall a single SO question reporting any either.

HTML5 data attribute vs value?

Well, value is not a standard attribute for a div element so your html is not valid. If you want to honor html5 specification, you'll have to use data- attributes.

So in short: data- attributes is valid in html5 while your value approach is invalid on all html versions.

Can I use HTML5 data-* attributes as boolean attributes?

The example you show is valid. (Just like using disabled or checked in a form. Only xHTML force the presence of a value)

Although, the value returned is not a boolean. When you query this resource, you'll get an empty string for any empty data-* attributes.

Like so:

 domNode.dataset.draggable; // log ""
 domNode.dataset.notAdded; // log null

So, you just have to check it:

var isDraggable = (domNode.dataset.draggable != null)

Edit

Stupid to haven't tell it before. But, you can just check if the attribute exist if you want a boolean:

domNode.hasAttribute("data-draggable");

are html5 data attributes case insensitive?

You should always use lowercase characters. Even though some browser do automatically correct mistakes in the markup (that's what Chrome does for you here) it can cause errors and isn't valid HTML5.
From MDN:

• the name must not start with xml, whatever case is used for these
  letters;
• the name must not contain any semicolon (U+003A);
• the name
  must not contain capital A to Z letters.

EDIT

After some more research I've found this:

All attribute names on HTML elements in HTML documents get
ASCII-lowercased automatically, so the restriction on ASCII uppercase
letters doesn't affect such documents.

---

Related Topics