[html/css] Semantiek en CSS met H1 en A

[Booster]

Op een website wil ik van sommige titels een link maken. Wat is hier nou best practise voor de links?

code:

<h1><a href="/link">Titel</a></h1>

of

code:

<a href="/link"><h1>Titel</h1></a>

Doorgaans is de volledige titel een link (niet een gedeelte), wat me doet denken aan voorbeeld 2. Toch doet voorbeeld 1 me net iets logischer aan. Is er een regel waarmee je zoiets kunt bepalen of maakt het in de praktijk niks uit?

En hoe regel ik dit uiteindelijk netjes in css? Er hoeft eigenlijk alleen iets met het linkje te gebeuren bij een hover. Tot nu toe heb ik dit bij voorbeeld 1:

code:

h1 {
    color:              #FB8406;
    
    font-size:          22px;
    font-style:         normal;
    font-weight:        bold;

    text-decoration:    none;
}

h1 a, h1 a:link, h1 a:visited {
    text-decoration:    none;
}

h1 a:hover {
    text-decoration:    underline;
}

[Verwijderd]

Een a-element mag geen block-level elementen herbergen. <a><h1>bla</h1><a/> is dus ongeldige HTML.

[Booster]

Mh inderdaad, zo had ik er nog niet over nagedacht, dank je

[Glabbeek]

Daarnaast is <h1><a>..</a></h1> ook logischer, immers: de titel bevat/is een link. Het is niet: de link bevat/is een titel.