<div> block als <a> valide ?

[hoctar]

Hallo
ist diese Methode einen div Block in ein Link umzuwandeln valide ?

<a href="#" style="display: block" class="box">
 <div class="test1"> test1 </div>
 <div class="test2"> test2 </div>
</a>

 

[Sven Mintel]

Nö, zumindest kein valides HTML

Es wäre aber valide, wenn du statt der divs bspw. spans nimmst....diese kannst du per display:block ja auch umfunktionieren...wie den Link.

 

[StupidBoy]

Nein, da a ein Inline-Element ist und div ein Block-Level element, nur weil du die Formatierung änders, ändert sich nicht die Struktur deines HTML-Dokuments.
Innerhalb des a-Elements dürfen nur Text oder Inline-Elemente notiert sein.

http://de.selfhtml.org/html/referenz/elemente.htm#a

 

[hoctar]

<a href="#" style="display: block" class="box">
 <span style="display: block" class="test1"> test1 </span>
 <span style="display: block" class="test2"> test2 </span>
</a>

und so würde das valide sein ?

Oder vllt. habt ihr einen anderen Tip, wie ich ein ganzen DIV Block in ein link umwandele ?

 

[Sven Mintel]

<a href="#" style="display: block" class="box">
 <span style="display: block" class="test1"> test1 </span>
 <span style="display: block" class="test2"> test2 </span>
</a>

und so würde das valide sein ?

jo........

 

[Maik]

Oder vllt. habt ihr einen anderen Tip, wie ich ein ganzen DIV Block in ein link umwandele ?

Wenn, wie von dir eingangs im Codeschnipsel gezeigt, der Link mit display:block formatiert ist, braucht ein div-Element nicht als Verweis "mißbraucht" werden.

Ansonsten müsste hier Javascript hinzugezogen werden, damit es überhaupt als solches genutzt werden kann:

<div onclick="location.href='dahin-geht-die-reise'">klick-mich</div>

In meinen Augen semantisch eine sehr fragwürdige Methode, und bei deaktiviertem JS im Browser absolut nutzlos.

Oder schwebt dir eher vor, dass der Link das div- Elternelement vollständig ausfüllt, und so in ihm an jeder beliebigen Stelle "nutzbar" ist?

<div class="box">
    <a href="#">...</a>
</div>

div.box {
height:20px;
background:red;
}
div.box a {
display:block;
height:100%;
background:yellow;
}
div.box a:hover {
background:green;
}

mfg Maik