HTML element + attribute notation

Published 4th August 2011 · 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.

Comments

Paul wrote on 4th August 2011 at 16:24:

I concur :)

Niels Matthijs wrote on 4th August 2011 at 16:26:

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

Mathias wrote on 4th August 2011 at 16:29:

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 4th August 2011 at 16:37:

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 4th August 2011 at 17:59:

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 4th August 2011 at 20:06:

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.

Mathias wrote on 4th August 2011 at 20:17:

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.

Jan! wrote on 5th August 2011 at 09:11:

Why not a@download? That notation has been around for several years now, I believe. (I think I first saw it on bugzilla.mozilla.org.)

Mathias wrote on 5th August 2011 at 12:42:

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 24th August 2011 at 19:36:

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…

Eli Grey wrote on 13th October 2011 at 21:42:

I use a.@download, which is E4X JS and very similar to XPath, but makes more sense semantically in my opinion.

niu tech wrote on 22nd November 2011 at 19:02:

+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.

Comment on “HTML element + attribute notation”

Name *

Email *

Website

Some Markdown is allowed; HTML isn’t. Keyboard shortcuts are available.

It’s possible to add emphasis to text:

_Emphasize_ some terms. Perhaps you’d rather use **strong emphasis** instead?

Select some text and press ⌘ + I on Mac or Ctrl + I on Windows to make it italic. For bold text, use ⌘ + B or Ctrl + B.

To create links:

Here’s an inline link to [Google](http://www.google.com/).

If the link itself is not descriptive enough to tell users where they’re going, you might want to create a link with a title attribute, which will show up on hover:

Here’s a [poorly-named link](http://www.google.com/ "Google").

Use backticks (`) to create an inline <code> span:

In HTML, the `p` element represents a paragraph.

Select some inline text and press ⌘ + K on Mac or Ctrl + K on Windows to make it a <code> span.

Indent four spaces to create an escaped <pre><code> block:

    printf("goodbye world!"); /* his suicide note
                                 was in C */

Alternatively, you could use triple backtick syntax:

```
printf("goodbye world!"); /* his suicide note
                             was in C */
```

Select a block of text (more than one line) and press ⌘ + K on Mac or Ctrl + K on Windows to make it a preformatted <code> block.

Quoting text can be done as follows:

> Lorem iPad dolor sit amet, consectetur Apple adipisicing elit,
> sed do eiusmod incididunt ut labore et dolore magna aliqua Shenzhen.
> Ut enim ad minim veniam, quis nostrud no multi-tasking ullamco laboris
> nisi ut aliquip iPad ex ea commodo consequat.

Select a block of text and press ⌘ + E on Mac or Ctrl + E on Windows to make it a <blockquote>.

Spammer? (Enter ‘no’) *

Mathias Bynens

HTML element + attribute notation

Example

Comments

Leave a comment