Länka större stycke

Hej,

någon som har koll vad som är optimalt när man vill göra en länk av ett större stycke. I dagsläget har jag följande:

<h3>Produktnamn</h3>
<p class="beskrivning">Beskrivning av produktion</p>
<p class="prislapp">Pris,-</p>

Resultatet presenteras som en liten ruta med en bild till vänster och prislappen till höger.

Min fråga är vad som är korrekt och mest optimalt för att göra hela rutan klickbar. Ska jag skriva

<a href="#"><h3>Produktnamn</h3>
<p class="beskrivning">Beskrivning av produktion</p>
<p class="prislapp">Pris,-</p></a>

Alternativt

<h3><a href="#">Produktnamn</a></h3>
<p class="beskrivning"><a href="#">Beskrivning av produktion</a></p>
<p class="prislapp"><a href="#">Pris,-</a></p>

Eller

<li><a href="#">produktnamn
        <em>Beskrivning av produkt</em>
        <strong>Pris</strong>
        <span>Köp-knapp</span></a></li>

Eller kan man göra på annat sätt? Alternativ två gör inte riktigt det jag vill eftersom det blir lite tomrum med dagens CSS.

Tacksam för svar

Jag har hittat lite olika förslag på Google, men jag vet inte vad som är mest optimalt som sagt.
http://green-beast.com/blog/examples/block_links_expg.php
http://www.smileycat.com/miaow/archives/000230.php
http://www.smileycat.com/miaow/archives/link-list-block-hover.php

Gäller det att märka upp innehållet för visning av ett sökresultat eller artiklar per kategori skulle jag försöka att inte länka artikelbeskrivningen utan bara länka namnet. Finns det en artikelbild skulle jag länka den också.

Ska hela rutan vara klickbar kan man tänka sig att man använder Javascript för att fixa den biten. Alltså, det första steget är att man märker upp innehållet, sen lägger man in en metod som loopar igenom alla artiklar, läser av dess länkvärde och sätter en event handler på varje "item", dvs ruta. Eller så lägger man en event handler på själva containern och hanterar click event on the fly. Det borde vara effektivare.

Eller ville du ha fler exempel på hur man kan märka upp koden? I så fall kan jag bidra med ett som kanske inte är perfekt men som kan funka som en ganska sjyst utgångspunkt i varje fall:

<div class="articles">
	
	<h3>Artiklar</h3>
	
	<ul>
		<li class="article">
			<a href="#" class="name">Artikels namn</a>
			<p class="description">Produktbeskrivning</p>
			
			<span class="price">Pris i kr</span>
			<a href="#" class="add-to-cart" title="Lägg [artikel] i varukorgen">Köp</a>
		</li>
	</ul>
	
</div>

En artikelbild saknas, tycker jag. En sådan borde finnas med i HTML-koden och inte i efterhand med JS eller så.

Hoppas att du inte har nåt emot att jag förklarar varför jag inte valde att gå med något av dina kodexempel. Jo, de är lite halvtokiga eftersom de inte återspeglar innehållet speciellt bra. Ett pris är t.ex. inte ett stycke text så p-taggen är inte lämplig att använda för den informationen. I ett av de andra exemplen används em- och strong-taggar för att märka upp information och inte heller där är det speciellt lämpligt. Jag tycker att produktbeskrivning, produktnamn, pris och köpknappen ligger på samma nivå om man tänker på informationen. Det är olika typer av information, men med samma "tyngd". Förstår du hur jag tänker?

Hoppas att det kan vara till någon hjälp iaf.