HTML element + attribute notation
Recently, a popular new addition was made to the HTML spec: anchors may now have a download attribute. That’s not what this post is about though — instead, I’d like to go over some of the different notations people used to refer to this new element + attribute combo in tweets and blog posts.
When discussing specific attributes to specific elements, it’s kinda verbose to write out e.g. “the download attribute of the <a> element” all the time. Think about it — that text alone takes up ⅓ of a tweet. Thankfully, there are some useful short notations we can use.
- Recently I’ve seen people use
a.download, which I find very confusing. It looks like a CSS selector for<a>elements with thedownloadclassname (but it isn’t!). You could interpret it as JavaScript and assumeais a reference to anHTMLAnchorElementobject,downloadbeing its property, but that’s a bit of a stretch. - CSS syntax could be used as well:
a[download]. The problem is everyone recognizes this as a CSS selector, and it may not be obvious that you’re talking about the actual HTML element and its attribute (not in a CSS context). - Similarly, you could just use HTML syntax:
<a download>— but then it may look like you’re talking about the code snippet itself, rather than the general combination of this particular attribute with a specific element. - As far as I know, the most popular notation used for this purpose is XPath syntax:
a/@download. No one really uses XPath anymore, so people immediately assume you’re talking about the combination of an HTML element with an attribute, and not the XPath selector itself. Everybody wins. - As Jan pointed out, there’s a simpler variation of the previous notation:
a@download. It’s not XPath anymore, but it’s still pretty clear what it stands for. It looks pretty, too.
Instead of reinventing the wheel, let’s just stick to the XPath syntax or its simplified variation for this, ok?
Example
This short notation can be very useful at times — not only to shorten text, but also to make it more readable. Check it out:
Safari 4 and Opera 11.00 support the
placeholderattribute on<input>elements, but do not support theplaceholderattribute on<textarea>elements.
Becomes…
Safari 4 and Opera 11.00 support
input@placeholder, but nottextarea@placeholder.
Leave a comment
Comment on “HTML element + attribute notation”Name *
Email *
Website
Your input will be parsed as Markdown.
Spammer? (Enter ‘no’) *





















