HTML5 ARTICLE

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 (News - Alert) released a public preview of an HTML5 Web tool innovation called Adobe Edge Reflow.