Solved

Browser support for HTML5 block-level links

Posted on 2013-06-09
6
469 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
6 Comments
 
LVL 81

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 81

Expert Comment

by:David Johnson, CD, MVP
ID: 39235049
0
Increase your protection from Zero Day threats!

Running two Antivirus' is never a good idea.
Taking advantage of Multiple Security layers on the other hand can often save your hide.
See which top notch security software brands have been proven to happily coexist together.
Reduce your chances of becoming a statistic.

 

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 81

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

Enroll in May's Course of the Month

May’s Course of the Month is now available! Experts Exchange’s Premium Members and Team Accounts have access to a complimentary course each month as part of their membership—an extra way to increase training and boost professional development.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Check input text, Number 7 55
title attribute 5 33
DNS issues on a handful of websites, the rest load fine 9 35
center div inside another div 2 32
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

739 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