Solved

Browser support for HTML5 block-level links

Posted on 2013-06-09
6
461 Views
Last Modified: 2013-06-11
I've read that html5 supports block-level links.  In a site that validates for html5, if I code some of my divs in <a> tags, will all desktop and mobile browsers interpret that correctly? Or would I be wise to stick with inline links only for now?

Thanks!
0
Comment
Question by:Jonathan Greenberg
  • 3
  • 2
6 Comments
 
LVL 80

Expert Comment

by:David Johnson, CD, MVP
ID: 39233827
not all browsers support html5 fully and it is not a fixed standard.  You'd have to test it and see if the browsers in your customers range support it otherwise stick to html4
0
 
LVL 22

Expert Comment

by:Kim Walker
ID: 39234937
Can you provide a link to an example? You don't need HTML5 to change the display style of an <a> tag to "block."
0
 
LVL 80

Expert Comment

by:David Johnson, CD, MVP
ID: 39235049
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:Jonathan Greenberg
ID: 39235118
Thanks, ve3ofa.

Yes, xmediaman. Here's an example of what I mean, from the page ve3ofa linked to:

Here's the HTML4 way:

<div class="story"> <h3><a href="story1.html">Bruce Lawson voted sexiest man on Earth</a></h3> <p><a href="story1.html"><img src="bruce.jpg" alt="full story. " />A congress representing all the planet's women unanimously voted Bruce Lawson as sexiest man alive.</a></p> <p><a href="story1.html">Read more</a></p> </div>
Versus the block-level links that are allowed under HTML5, where the whole block is surrounded by a tags:

In <abbr>HTML</abbr> 5, you code it like this: <pre><code><article> <a href="story1.html"> <h3>Bruce Lawson voted sexiest man on Earth</h3> <p><img src="bruce.jpg" alt="gorgeous lovebundle. ">A congress representing all the planet's women unanimously voted Bruce Lawson as sexiest man alive.</p> <p>Read more</p> </a>
My understanding about HTML5 is that the whole block could even be in a div, and the whole div could then be surrounded by a tags.  It's a more attractive presentation, as well as more functional, I think.  But maybe it's still not a good idea just yet.

Do either of you know if all browsers will render it correctly the HTML5 way?
0
 
LVL 80

Accepted Solution

by:
David Johnson, CD, MVP earned 500 total points
ID: 39236761
actually what it does is make the entire block a link to the content.  ie10/firefox and chrome support it.

See sample video
0
 

Author Comment

by:Jonathan Greenberg
ID: 39239041
Thanks, ve3ofa.

Yeah, I prefer making the whole block a link.  I think it's a nicer look than having each of the three elements in the block, all pointing to the same link, respond on separate mouseovers.  And even though the article you linked to uses a byline that refers to Google's "caution," the comment from Google's John Mueller seems to make the point that as long as the textual content of the link is clear, then it shouldn't be a problem.

Wow, I just noticed that you created a screen capture video to make your point!  Thanks, and well done!

Regards,
Jon
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
SSL stands for “Secure Sockets Layer” and an SSL certificate is a critical component to keeping your website safe, secured, and compliant. Any ecommerce website must have an SSL certificate to ensure the safe handling of sensitive information like…
Google currently has a new report that is in beta and coming soon to Webmaster Tool accounts. This Micro Tutorial will highlight new features for Google Webmaster Tools.
How to create a custom search shortcut to site-search Experts Exchange using Google in the Firefox browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch your Bookmark Menu: Press 'Ctrl +…

685 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question