Create a valid XHTML Clickable Block Region

Question

I am trying to create a clickable region.

<a style="display: block" href="http://stackoverflow.com"> StackOverflow </a> 

A is an inline element, but CSS has made it a block.

If the above is true, then the following should also be true:

 <a style="display: block" href="http://stackoverflow.com"> <div>Some DIV that links to StackOverflow</div> </a> 

But validator.w3.org should not mark it as invalid (which it is right now).

If this is not valid, then what would be the most suitable way to make the block element “clickable” and redirect to an arbitrary page. I know that I can use JS onclick to achieve this behavior, but how will Google see it?

Answer 1

The validator is correct - you cannot put a <div> inside an <a> , no matter what you do after that with CSS.

The right thing you do is what you did in your first block of code - <a style="display: block;">

If you want something inside, you can do <a style="display: block;"><span style="display: block;">

Answer 2

Do not confuse valid HTML with valid CSS. To use inline elements, you can use the display css property. Incorrect placement of block HTML elements inside inline ones.

Answer 3

It does not follow from this that one that is valid means that there must be another. There are nesting rules for HTML, and div-in-anchor is not suitable for them, so validator.w3.org gives you a hard time.

If you really need to have a div and not text, images or <span style="display: block"> s that you can click, then yes, you will have to use the onclick event. Google will not understand or confirm the existence of the link. (You can handle this by being bound to something that anchors can bind to, besides the onclick div.)

Answer 4

Something that I did in the past with such a problem causes a click on the parent element (in my example, jQuery is used):

 <div class="link"> <a href="http://www.google.com" title="Google">Visit Google</a> </div> $(".link").click(function(){ document.location = $(this).find("a:first").attr("href"); }); 

Using styles, you can make the entire area a visible link by setting the cursor, tipping state, etc.

Answer 5

First you need to know if you want to use strict or transitional XHTML (a set of frames is not needed here). Then you look in the DTD (link) and you will see that A cannot have a DIV inside.

Answer 6

Why aren't you using an area tag for this? It is supposed to define a zone with a click in the image map.

Answer 7

Google bots now follow simple javascript links, so using JS in the onClick event of your div is an option. Other search engine bots do not, but sooner or later they will.

More details in this article .