16 ms·
The HTML A element is broken
- jsavimbi 14y ago> I'm not happy with html links. Try something else instead of trying to break a very basic piece of web functionality with an unworkable requirement that you dream up.
- p4bl0 14y agoIIRC, 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 14y agoProbably because too much would get broken. That is sadly very often the (even more sadly, correct) argument against doing things right.
- p4bl0 14y agoIf the change is only to allow the href attribute on any tag, how would that break anything?
- hatu 14y agoOlder browsers might go crazy
- DoubleMalt 14y agoWho cares? If you use HTML5 you have to throw them under the bus anyway. And most (older) browsers ignore unknown attributes anyway.
- UnoriginalGuy 14y agoHTML5 in general degrades fairly well, with the exception of with browsers which simply don't support CSS at all (e.g. IE5 and below). You're right to say that older browsers would ignore the unknown attribute, the problem is that having links broken might degrade that site to a point where it isn't usable.
- DoubleMalt 14y agoBut it would be pretty easy to create a polyfill that attaches onclick handlers to the respective elements. Actually I'm tempted to write one to get this functionality with current browsers. [edit] As Oscar Wild put it: The only way of getting rid of a temptation is to yield to it. https://github.com/webcrofting/href4all https://github.com/webcrofting/href4all
- Torrents 14y agoThat's awesome! From concept to github in a flash. Well done.
- rsanders 14y agoThis would be a pretty easy thing to polyfill, I think.
- mathias 14y agoYou may want to read up on HTML Design Principles: <http://www.w3.org/TR/html-design-principles/> http://www.w3.org/TR/html-design-principles/>.
- olavk 14y agoSemantics are non-obvious with href on a lot of elements like tr/td/form/input/textarea/button/head/script/style for example. A lot of work would go into specifying and implementing the interactions of combinations of href on table/colgroup/tbody/tr/td for example - for no significant benefit.
- SquareWheel 14y agoOh 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 14y agoNo so clean to me, without an 'alt'-attribute..
- tzaman 14y agoalt is beside the point here
- jackalope 14y agoIt's a fair point, though. The href attribute tends be very long, so if your criteria is readability, do you opt for attribute soup or put it in a wrapper div or span? It's a subjective decision, and I don't think there's a right or wrong answer, but examples should reflect real world situations. Either way, I think href should be a universal attribute (obviously, it wouldn't make sense on something like br). It offers a lot of flexibility and is probably no more subject to abuse than anything else. I don't see how browsers would have a problem implementing it. Just look at the 3D view of a complex page in the Firefox Inspector to get an idea of what they're already coping with.
- eli 14y agoI 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.
- gsnedders 14y agoIt leads to radically different behaviour in screen-readers, at least, and they most certainly are useful implementations.
- Terretta 14y 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 14y 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?
- sophacles 14y agoMeanwhile, 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". 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.
- saraid216 14y 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.
- HNLogInShit 14y agoHTML needs an enema. Meanwhile: "the axiomatic content-design-functionality tripod philosophy"... no. It's content/design/functionality. When you have multiple sides, options, or parts, you use a slash. It's not that hard: http://goldmanosi.blogspot.com/2012/04/when-did-slash-become-too-hard.html http://goldmanosi.blogspot.com/2012/04/when-did-slash-become...
- user24 14y agoOT: Damn that's a nice blog UI.
- millerm 14y ago+1
- tzaman 14y agoI totally agree with the post, linking is somewhat broken. In our application (https://codeable.io 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_w 14y agoOne 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.
- tzaman 14y agoThere is not such thing as somewhat-graceful. Either it degrades or it doesn't :)
- jdavid 14y agothe 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.
- lmm 14y agoIf 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.
- Tloewald 14y agoBroken except insofar as it's simple and works as intended. Read article, totally unconvinced.
- mongol 14y agoSo true. The overload of "broken" when you want to say "not working as I would like" is annoying.
- TwistedWeasel 14y agoI think it's a bit of an overused term: http://www.hnsearch.com/search#request/submissions&q=%22is+broken%22&start=0 http://www.hnsearch.com/search#request/submissions&q=%22...
- Tloewald 14y agoOn 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.
- Tloewald 14y agoUpon further investigation, it seems you can wrap almost anything in an a tag in html5 (but not table rows).
- Kiro 14y agoI've never had this problem. Why would you even wrap a block with a tags at all?
- nollidge 14y agoYeah, this is what I don't get. Also, why would I want to nest anchors? That doesn't make any sense.
- netrus 14y agoIt 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.
- talmand 14y agoThat could lead to UX problems though. What if I meant to click on a link but missed because, assuming you style it this way, I get the cursor that represents a link on both so I couldn't tell the difference? Therefore, I would end up going to an unexpected page because the link I thought I clicked on represented something different to me than what I ended up with. Of course, you could just give a visual feedback of what is the current link that will be followed but that might be annoying to some depending on the design.
- SquareWheel 14y agoIf clicking a comment just opens a small textbox beneath the comment then it's not a big deal if they miss. But I can definitely see having different pages loaded being a problem. But ultimately, it should not be a limitation of the technology that determines what is an isn't usable. That's a job for UX designer, and they should have every freedom with the technology to create their designs.
- talmand 14y agoAlthough I agree that it would be best for an UX designer to make such decisions, most of the time one is not involved and there has to be some sort of limit based on some standard. If you allow potentially bad decisions, then ultimately a great deal of bad decisions will be made. For example, look at how browsers will render absolutely awful HTML soup and the state of most of the HTML out there.
- cosmikduster 14y agoIn my opinion, the <a> tag needs a few boolean attributes: ad-supported: true|false, requires-free-registration: true|false, behind-paywall: true|false. :-)
- alanctgardner2 14y agoThis 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 14y agoit 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 14y ago> Another recurrent problem is that links cannot be nested. This bit piqued my interest, so I made this: https://bitly.com/13F3dIy https://bitly.com/13F3dIy
- danso 14y agoSo...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?
- deno 14y agoInner-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_w 14y agoFunnily 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 14y agoThis thing reads like it was generated by the html-nerd equivalent of http://thatsmathematics.com/mathgen/ 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 14y agoBasically 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).
- DoubleMalt 14y agoJust hacked a quick enhancement together. Please comment, improve or ridicule. http://news.ycombinator.com/item?id=5331146 http://news.ycombinator.com/item?id=5331146
- hawleyal 14y agoIt'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 14y agoThe 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 14y agoOkay, 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.
- jdavid 14y agoJust write a polyfil in javascript for the functionality you desire on your site. It shouldn't be that hard to implement.
- tubbo 14y agoSaying something is "broken" because it no longer fits in the domain of your current application is like saying a butter knife is "broken" because it can't cut a steak.
- rquantz 14y agoHe 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 14y agoFrom a UX and accessibility perspective, not allowing nested A tags is a feature.
- SquareWheel 14y agoI 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 14y agoUsability 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.