Markup “YYYY-MM-DD” as input hint

Question

I want to give users help in which format they have to enter a date. The label content is:

Date (YYYY-MM-DD)

I used the following markup:

<label>Date (<kbd><abbr title="four-digit year">YYYY</abbr>-<abbr title="two-digit month">MM</abbr>-<abbr title="two-digit day">DD</abbr></kbd>)</label>

Note: the new HTML5 input-type values (like date) might be used, but this label is a fallback for users with older browsers. Most of them use screenreaders and I try to give the most nitty-gritty markup.

I wonder:

• Should I use the code element?
• Is my use of the kbd element correct in this context? The "YYYY-MM-DD" represents something that users should enter, but it isn't something they should enter exactly as given, of course. It's more some kind of variable, I guess.
• So maybe the var element might be appropiate?
• Is my use of the abbr element correct?
• Should I use the dfn element around each abbr element? So "YYYY" would be defined as year, because strictly spoken it is not an abbreviation for "four-digit year" but for "Year Year Year Year".

Answer 1

There is little point in using code markup here. Technically, it might not be completely wrong “semantically”, since the YYYY-MM-DD notation is really meant for computers rather than human beings, but what would it achieve? Monospace font by default?

Using kbd is equally, if not more, pointless.

Using var might be “semantically” appropriate, since you are using placeholders of a kind. But, here, too, the question is: Why? Do you want some browsers to render the text in italics? What else would you achieve in practice?

Using abbr is “semantically” wrong, since e.g. YYYY is not an abbreviation. It is a conventional notation. In practice, abbr creates by default a dotted bottom border on some borders. Why use some markup when the only real implication is that you get some default rendering that you don’t want?

Using dfn would be equally wrong. You are not giving any definition for e.g. YYYY. Instead, you are implying a definition, i.e. assuming that the user knows what YYYY means.

The title element is poor usability, but if you wish to use it, you can use it for a span element, which has no defined semantics (so it cannot be semantically wrong) and has no impact on default rendering.

If you don’t think that the explanation ”(YYYY-MM-DD)” is not sufficient, the best approach is to explain it in normal content. E.g.,

Date (YYYY-MM-DD, i.e. 4-digit year, hyphen, 2-digit month, hyphen, 2-digit day):

Note that a label element that has neither a for attribute nor a form field as content is pointless. The label markup is useful only when used to associate a form field with its label text.