The HTML A element is broken

http://www.onderhond.com/blog/html-links-are-broken

by onderhond • 13 years ago

99 72 13 years ago

p4bl02• 13 years ago

IIRC, in one of the early draft of HTML5, the <a> tag was there for retrocompatibilty but was deprecated, and href was a valid attribute for all HTML5 tags in <body> and its children.

I thought that was a brilliant idea. For link on block but also for common pattern such as the infinite <li><a href="">…</a></li> that we see everywhere and which lead to confusion (which parts of the style should be applied to <li> elements, which parts to the <a>?).

I really don't know why W3C didn't keep this idea in HTML5.

lucian1900• 13 years ago

Probably because too much would get broken. That is sadly very often the (even more sadly, correct) argument against doing things right.

p4bl02• 13 years ago

If the change is only to allow the href attribute on any tag, how would that break anything?

SquareWheel4• 13 years ago

Oh wow, I've been wishing for ages that href were an attribute and not a part of the <a> tag. This is validation that it isn't such a terrible idea after all.

    <img src="pic.jpg" href="about.html">

Doesn't that just look cleaner? Shame it won't change until something radical supersedes HTML.

Alexandervn• 13 years ago

No so clean to me, without an 'alt'-attribute..

tzaman3• 13 years ago

alt is beside the point here

eli• 13 years ago

I assure you that every useful implementation of an HTML Parser--apart from validation tools--will handle the missing alt just fine, regardless of what the spec says.

Mahn2• 13 years ago

Well, theoretically, for a HTML5 standards compliant version you could do:

  <img src="pic.jpg" data-href="about.html">

And this, plus what I suspect it would be a very tiny global javascript handler that takes care of simulating the links, would pretty much do it.

Of course, there is the question of how well this would work on older browsers, although actually as long as javascript is not disabled I don't think it would give much trouble (data attributes can be easily fetched in IE6 for instance)

Edit: Here's a quick and dirty demo of how this could work: http://jsfiddle.net/Dszvc/2/ it could easily be turned into a full featured plugin.

olavk3• 13 years ago

Only HTML5 compliant in the sense that it is not illegal. There is no standard semantics for data-attributes, so e.g. Google will not index your links.

Terretta2• 13 years ago

> From a conceptual point of view their implementation makes no sense at all.

If your concept is that blocks of design should do things when clicked, that idea is valid. Thankfully, we have methods for easily capturing click events on arbitrary and nested blocks--in fact a whole language for handling events across the representation of layout.

Meanwhile, hyperlinks were for terms in hypertext, and A are the anchors around terms, helping you make a TOC and Index within a single document. The semantic meaning of A is, "this is a term" and A HREF is "this term conceptually relates to this other hypertext reference".

Nobody's forcing you to overload that very simple concept, and certainly nobody's forcing you to wrap headers and footers and main divs inside an anchor. I feel that your application of the anchor is broken.

vixus• 13 years ago

"a whole language for handling events across the representation of layout"

While I agree block-linking seems like an odd way to implement the desired functionality, the idea that javascript (did you mean javascript?) is a more suitable alternative is dubious.

The concept of requiring an entire engine to enable linking from HTML elements just seems dirty, when it could be achieved so much more simply with a universal href tag. For starters, how would one define link targets?

sophacles3• 13 years ago

Except that images have been linkable since forever, and they are not really "terms in hypertext". Once you start allowing other items than text inside your anchored reference, you have to accept that the relations may become more complicated than a simple, single graph edge. The reference content may in fact be a block quote with a deeper nested reference within itself... and so on.

saraid2163• 13 years ago

> Except that images have been linkable since forever, and they are not really "terms in hypertext".

Images are text, at the academic level that hypertext was originally conceived. That's why it makes sense to click and drag an image into Google search, and why it doesn't make sense to do the same to a random div.

ibudiallo• 13 years ago

I agree with you , the anchor tag is not supposed to do all of this. It is much easier to link to a text or inline element then a whole block, yet it allows you too. I don't know why you are complaining.

user24• 13 years ago

OT: Damn that's a nice blog UI.

millerm• 13 years ago

tzaman3• 13 years ago

I totally agree with the post, linking is somewhat broken. In our application (https://codeable.io), we have a table with tasks, where each row links to the single view for the task. Inner wrapping each <td> didn't really "feel" right, so I just went with javascript approach, having data-link attribute on each table row, then redirecting the user on click.

I know you might ask what about graceful degradation?, but the truth is our app relies heavily on javascript (websockets) to work, as 90% of modern apps/sites do, so we decided to ignore it. We don't like that, but something's got to give.

scott_w2• 13 years ago

One form of "graceful" degradation that we're considering is to have a single <td><a href="">Content</a></td> on each row that users can click when JavaScript is disabled.

Users with JS get <tr data-href=""><td><a href="">Content</a></td></tr>, with JS doing as in your example.

The downside is that we'd have to repeat ourselves, but at least the system will degrade somewhat-gracefully.

tzaman3• 13 years ago

There is not such thing as somewhat-graceful. Either it degrades or it doesn't :)

jdavid2• 13 years ago

the larger problem with javascript linking is, the 'new tab' problem. On windows and linux center clicking the mouse on a link opens a new tab and does not focus on it. most javascript does not simulate this behavior.

Tloewald4• 13 years ago

This is a good point and does actually show that allowing hrefs in any tag could be a solution where an anchor won't do. Also you cannot simulate right click options as you'll either get a new tab or a new window at best.

ksherlock• 13 years ago

What if you dynamically insert an a element on the mouse-down event?

lmm• 13 years ago

If you want to actually solve your practical problem, I suspect a proposal to change CSS would have more chance of being accepted than one to change the A tag.

Tloewald4• 13 years ago

Broken except insofar as it's simple and works as intended. Read article, totally unconvinced.

mongol• 13 years ago

So true. The overload of "broken" when you want to say "not working as I would like" is annoying.

TwistedWeasel• 13 years ago

I think it's a bit of an overused term: http://www.hnsearch.com/search#request/submissions&q=%22...

Tloewald4• 13 years ago

On glancing at the thread as its developed, there is one point which is valid - it would be nice to be able to make any element behave as a link, but this doesn't make links broken so much as in need of a new, simple feature.

Tloewald4• 13 years ago

Upon further investigation, it seems you can wrap almost anything in an a tag in html5 (but not table rows).

Kiro• 13 years ago

I've never had this problem. Why would you even wrap a block with a tags at all?

nollidge• 13 years ago

Yeah, this is what I don't get. Also, why would I want to nest anchors? That doesn't make any sense.

netrus• 13 years ago

It would be cool if I could click anywhere on your comment and get to the "reply" page - except if I click on the small "link", a nested link.

sesqu• 13 years ago

There are no small amount of times when you'd want to wrap a block with links, including headers, summaries, and composites.

It's actually unfortunate that in so many cases where people wrap blocks with anchors, they go for the inner-wrap method which has a major downside in that the inner anchor does not span the entire block by default. That means that there are a lot of, say, logos that have padding you can't click on (contrast with the horrible ads that have clickable whitespace).

cosmikduster• 13 years ago

In my opinion, the <a> tag needs a few boolean attributes:

    ad-supported: true|false,
    requires-free-registration: true|false,
    behind-paywall: true|false. :-)

alanctgardner2• 13 years ago

This isn't a terrible idea, but I think it belongs in the header (maybe meta tags) of the page to be loaded. Then if you added a paywall to your site, you'd update your server config, rather than trying to round up every hyperlink to your site ever. Imagine if Chrome could do a HEAD one link deep, and indicate visually whether you'll actually be able to see the page, or whether you'll be solicited for some personal info.

In the meantime, someone could write a Chrome plugin that uses a blacklist to rewrite links to paywalled sites.

icebraining• 13 years ago

it belongs in the header of the page to be loaded

Yes, but they have no real incentive to put them there, since they want people to see the paywall (and possibly subscribe). Besides, many paywalls are dependent on the user (e.g. she may have some free views per month or so).

csswizardry• 13 years ago

> Another recurrent problem is that links cannot be nested.

This bit piqued my interest, so I made this: https://bitly.com/13F3dIy

danso• 13 years ago

So...semantically, what does a link inside a link mean? It would seem to be non-sensical...an article is given an href but the article itself contains links elsewhere. What is a search engine supposed to think?

deno2• 13 years ago

Inner-most links take precedence, with the exception that non-absolute nested links are relative to outer links. E.g.

    <ul href="http://example.com/examples/">
       <li href="1">Example 1</li> <!-- http://example.com/examples/1 -->
       <li href="/foo/bar">Foo Bar</li> <!-- http://example.com/foo/bar -->
       <li href="http://example2.com">Other examples</li> <!-- http://example2.com/ -->
    </ul>

scott_w2• 13 years ago

Funnily enough, I disagree. I think nested links just shouldn't be allowed at all.

As ever, people are the great blockers to any implementation :-)

roel_v• 13 years ago

This thing reads like it was generated by the html-nerd equivalent of http://thatsmathematics.com/mathgen/ . Does anyone understand his point? Is he saying that he'd like to be able to attach a link destination to all html elements, not just <a> elements?

nnq• 13 years ago

Basically yes, and he's not the first one that thought of this: it actually "almost" made it into xhtml2 and html5, because it's a great idea that really makes sense. But it will never get to be this way any time soon because behaviors for all elements that have href attributes will have to be specified, including for cases of nested elements with href set. This could happen, but not in the design-by-committee world of web-standards - you'd basically need to have bunch of very smart guys conjure a new specification out of thin air and force everyone else to use it regardless of backwards compatibility or other consequences (unfortunately this will never happen in the world we're living in).

DoubleMalt3• 13 years ago

Just hacked a quick enhancement together. Please comment, improve or ridicule.

http://news.ycombinator.com/item?id=5331146

hawleyal• 13 years ago

It's not a link tag. They're not just links. It's an anchor tag. That is the semantic purpose. The URI reference and a title is definitely semantic. Together the identification of a resource. It's not just metadata or presentation.

----------

- Person

- Thumbnail

- Name

- URI

- Posts by person (URI)

----------

- Post

- Title

- URI

- Author (URI)

----------

You might say the entire person block could have a reference to it's URI. But more important is the posts by person anchor, and the related author anchor. They are the anchor points from which you leave each document.

Sure, you could add that functionality to other blocks, but they would already have other semantic meaning. Like a list item with a reference is still just a list item.

This tag is semantically its own.

One could make the same argument about any semantic tag for inline content. Like `em` or `strong`. You could of course indicate emphasis of an entire list item using a CSS class, but it's still just a list item. And the ability to use emphasis on other tags does not negate the need for an `em` tag for just that purpose.

DomreiRoam• 13 years ago

The fact that you have a specific tag for linking make a lot of sense:

- it allows to have multiple links for an element.

- you can add information about the linked resource like semantic relation with the current context (rel or rev), content type of the link, language ...

Maybe it would be nice to have the following behavior: when you have a anchor tag without a closing tag it would mean that the anchor context is the parent element.

stcredzero• 13 years ago

Okay, so your blog is going to break zooming and Reader? Do you dislike readers on tablets? It's a bit odd to go on about anchor tags being broken, when your site is broken to a big part of the readership.

jdavid2• 13 years ago

Just write a polyfil in javascript for the functionality you desire on your site. It shouldn't be that hard to implement.

rquantz• 13 years ago

He may have a point about hrefs on arbitrary elements, but the main thing I took away from this article was lots of examples of why not to use direct descendant selectors.

thomassturm• 13 years ago

From a UX and accessibility perspective, not allowing nested A tags is a feature.

SquareWheel4• 13 years ago

I posted this above, but my thought is that it should not be a limitation of the technology that determines what is an isn't usable. We should give developers the freedom to make their own choices regarding UX.

I find the anchor tag a limitation, whereas an href attribute allows for much more freedom without resorting to using Javascript. Well, in theory; in practice you would need a shim for older browsers.

devinblais• 13 years ago

Usability is also a big reason to not wrap giant blocks with an anchor tag. Anchor tags should be text (or an image) that clearly indicates where they are leading the user to. If you're linking all parts of a block to something, there are serious usability implications. Why not just link the title of the article? Or throw a link at the bottom that says "Read more"? You can't say the anchor tag is broken because you're trying to use it for things it's not intended for. That's like me saying my computer is broken because it can't make me a grilled cheese sandwich.

The HTML A element is broken

Related Stories