Mathias Bynens

HTML element + attribute notation

· tagged with CSS, HTML

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 the download classname (but it isn’t!). You could interpret it as JavaScript and assume a is a reference to an HTMLAnchorElement object, download being 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 placeholder attribute on <input> elements, but do not support the placeholder attribute on <textarea> elements.

Becomes…

Safari 4 and Opera 11.00 support input@placeholder, but not textarea@placeholder.

About me

Hi there! I’m Mathias. I work on V8 at Google. HTML, CSS, JavaScript, Unicode, performance, and security get me excited. If you managed to read this far without falling asleep, you should follow me on Twitter and GitHub.

Comments

Niels Matthijs wrote on :

Could be that no-one uses XPath anymore, but a whole lot of people won’t even know about XPath in the first place, making the XPath notation quite incomprehensible for people seeing this the first time around. I prefer the CSS notation as it is widely recognized and a css selector is after all just a translation of a specific HTML path.

Also, [] is easier to type than /@ :p

wrote on :

Niels Matthijs:

Could be that no-one uses XPath anymore, but a whole lot of people won't even know about XPath in the first place, making the XPath notation quite incomprehensible for people seeing this the first time around.

I wouldn’t say it’s completely incomprehensible, but I get your point. Hey, that’s why I wrote this post :) The people need to know!

Niels Matthijs wrote on :

I have no prior experience with XPath and when I would encounter tag/@attribute for the first time I’m sure I wouldn’t know what the meaning behind the notation could be. If you can make it into a standard though, that’d be fine :)

Just wondering, but does XPath have the same reach as CSS selectors for defining HTML path notations? Like how does it symbolize a class link (a.download), child nodes (.parent>.child) and such? The power of CSS notations is that it’s all there, because it’s made that way to interact with HTML.

Federico wrote on :

Niels Matthijs: XPath is even better (I believe it even has a .child<.parent selector), but I barely know of its existence, let alone how to read an XPath, and I think many are on the same boat.

Wolf wrote on :

I understand your point but now you’re just making things harder. If you’re talking about attributes on elements who not type that? Just because Twitter only supports 140 characters doesn’t mean we have to go find shortcuts for everything.

wrote on :

Wolf:

Just because Twitter only supports 140 characters doesn’t mean we have to go find shortcuts for everything.

I completely agree. Note that I’m not inventing any new shortcuts here; I’m merely documenting the XPath notation, which has been used for years now for this exact purpose (and not just on Twitter), so that hopefully people will learn to recognize and use it rather than come up with new notations.

wrote on :

Jan!: Thanks for bringing that short and sweet XPath-inspired notation to my attention — to be honest, I hadn’t seen it before. Post updated!

Joss wrote on :

What about a:download?

Or does that fall into the trap of looking too much like CSS?

I'm thinking along the lines of option:selected

niu tech wrote on :

+1 for <a download> or <a download="">! It’s the most readable, since it’s plain HTML. Much more people will recognize <a href=""> than a/@href.

Leave a comment

Comment on “HTML element + attribute notation”

Your input will be parsed as Markdown.