Solved

Browser support for HTML5 block-level links

Posted on 2013-06-09
6
474 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 82

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 82

Expert Comment

by:David Johnson, CD, MVP
ID: 39235049
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 

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 82

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

Are You Using the Best Web Development Editor?

The worlds of web hosting and web development are constantly evolving. Every year we see design trends change, coding standards adapt and new frameworks/CMS created. With such a quick pace of change it’s easy to get lost trying to keep up.

See if your editor made the list.

Question has a verified solution.

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

If you are a web developer, you would be aware of the <iframe> tag in HTML. The <iframe> stands for inline frame and is used to embed another document within the current HTML document. The embedded document could be even another website.
Ever visit a website where you spotted a really cool looking Font, yet couldn't figure out which font family it belonged to, or how to get a copy of it for your own use? This article explains the process of doing exactly that, as well as showing how…
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 learn the basics of jQuery including how to code hide show and toggles. 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…
Suggested Courses

623 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