February 19, 2013

Google Suggests Refraining from Using HTML5 Block-Level Links

The power of HTML5 may be wide in its reach, but some smaller improvements also allow for something as simple as neater coding. One example of this that is fairly well-known around the Web is the ability to wrap links around block-level elements, meaning paragraphs and even images can be neatly coded to all point to the same link.

The popular example used is the front page of a news site that is filled with plenty of teasers for news articles, each of which obviously leading to the article in its entirety. Each story will likely need a heading, image and a little bit of sample text, or a "read more" link. For convenience’s sake, it makes sense to have each element send the reader to the news story.

Normally, this would be done by coding each element — heading, picture and sample text — separately to lead to the same URL. However, HTML5 allows coders to wrap that single link around the whole teaser element, eliminating the need for duplication, creating a wider area to click. This also makes the whole process much simpler and neater.

Unfortunately, a recent Google Webmaster Help thread recently threw doubt on this link practice. One webmaster simply asked if using block-level links would be a bad thing in terms of SEO (search engine optimization).

The response from Google’s (News Alert) John Mueller said that such usage should be fine as Google is pretty flexible when it comes to parsing HTML, adding, "That said, the clearer you make your anchor text, the easier it is for us to understand the context of the link, so I wouldn’t necessarily always use a whole paragraph as the anchor for all of your internal links."

In other words, with the amount of anchor text used with this block-level link technique, it may be confusing for Google to understand just what the link is about.

In other recent HTML5 news, Crocdoc recently overhauled its HTML5 document converter with the aim of better performance, while Adobe (NewsAlert) released a public preview of an HTML5 Web tool innovation called Adobe Edge Reflow.

Edited by Rachel Ramsey


HTML 5 Demos and Examples

HTML 5 experimentation and demos I've hacked together. Click on the browser support icon or the technology tag to filter the demos.... Learn More

HTML5 GAMES is the largest and most comprehensive directory of HTML5 games on the internet... Learn More

The HTML5 test

How well does your browser support HTML5?... Learn More

Working Draft (WHATWG)

This is the Editor’s Draft from WHATWG. You can use it online or print the available PDF version... Learn More

HTML5 Flip Book

Free jQuery and HTML5 flip book maker for PDF to online page turning book conversion... Learn More