Trying To Get Button Inside Anchor Tag to Valididate in HTML5

[jimmyoneshot]

At the moment I have the following markup:-

 

<script type="text/javascript">
    function save(x) {
       id=x.form.getAttribute("data-id");
       //Do stuff here to save the photo based on the above id
    }
</script>

<style>

.photo button{
        display:none;
}

.photo:hover button{
        display:block;
}

.photo:hover img{
width:200px;
height:200px;
position:absolute;
top:-8px;
left:-8px;
}

</style>

<form data-id="1">
   <a class="photo">
      <img/>
      <button onclick="save(this);return false;"></button>
   </a>
</form>

 

Basically this is one item within an image gallery. And I have my css setup so that when a user hovers over the anchor tag the image enlarges and the button's display is set to block so that it can be clicked upon which the photo will be saved by the user.

 

As you can see I need to use the button as the clickable element because in my save function I use x.form.getAttribute("data-id") and the .form is only applicable to form elements. Problem is this won't validate in HTML5.

 

Are there any alternatives which will validate?

[requinix]

A tags are anchors (and inline). Use a DIV instead (which is block).