Solved

Browser support for HTML5 block-level links

Posted on 2013-06-09
6
453 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 79

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 79

Expert Comment

by:David Johnson, CD, MVP
ID: 39235049
0
ScreenConnect 6.0 Free Trial

At ScreenConnect, partner feedback doesn't fall on deaf ears. We collected partner suggestions off of their virtual wish list and transformed them into one game-changing release: ScreenConnect 6.0. Explore all of the extras and enhancements for yourself!

 

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 79

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

PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

Question has a verified solution.

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

Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

770 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