UX Articles

HTML5: Anchor Content, Not Anchor Text

Jamie Holst

Co-Founder

Published Oct 13, 2010

When talking about links, the term “anchor text” has been used for ages now. I think it’s time we retire this term in favor of a new one that makes more sense in the Internet of today and the future: anchor content.

So what’s the difference between anchor text and anchor content? Text refers to a string, a collection of words. Content on the other hand can refer to any mix of images, text, borders, blocks, etc.

A quick mock-up of how anchor content could work on SFGate. Notice the unified hover effect on the entire teaser - header, summary and thumbnail.

In the new HTML5 specification one of the few dramatic changes to an existing element is that links can now wrap block level elements, meaning you’re now “allowed” to wrap blocks of content into a single link. (Browsers have actually supported this for a long time, but that’s another post another day.)

Turning related content into a single combined link make a lot of sense – especially for blocks of “teaser content” in overview lists, such as search results, summaries or newspaper article snippets. We as web designers should seize this opportunity.

Take the homepage of a news website. Dozens of articles with headlines, summaries, thumbnails and “read more” links. Typically the headline and “read more” text are the only links to the full article and these two links use a separate hover effect despite linking to the same content. It would be much clearer to the reader if the entire teaser – headline, summary, thumbnail and “read more” – was a single clickable link with a unified hover effect.

It’s also much faster to click a single big link. Taking Fittz’s law into play, we can easily see how increasing the hit area to span across multiple elements will make it much easier and faster for our visitors to quickly access the content they’re interested in.

Let’s bury the notion of anchor text and think of it as anchor content instead.

Jamie Holst

Co-Founder

Published Oct 13, 2010

Jamie is co-founder of Baymard and CTO. Jamie oversees all of Baymard's technical development and writes articles on general UX topics and on the intersection between technology & UX , like compatability features, UI bugs, search logic, and how it impacts the end user exerience.

If you have any comments on this article you can leave them on LinkedIn

Share:

User Experience Research, Delivered Weekly

Join 60,000+ UX professionals and get a new UX article every week.

A screenshot of the UX article newsletter