come combinare link (tag <a>) e intestazioni (tag <h1>) nello standard web?

95

Qual è il codice corretto per creare un collegamento con l'intestazione 1 secondo gli standard web?

è

<h1><a href="http://stackoverflow.com"> stackoverflow </a></h1>

o

<a href="http://stackoverflow.com"><h1> stackoverflow </h1></a>

Grazie

html web-standards

— ahmed
fonte

143

Secondo gli standard web non è consentito inserire elementi di blocco in elementi inline.

Poiché h1è un elemento block ed aè un elemento inline, il modo corretto è:

<h1><a href="#">This is a title</a></h1>

Ecco un collegamento per saperne di più: w3 Modello di formattazione visuale

Tuttavia, c'è un'eccezione che in HTML5 è valido racchiudere elementi a livello di blocco (come div, po h*) nei tag di ancoraggio. Il wrapping di elementi a livello di blocco in elementi in linea diversi dagli ancoraggi va ancora contro gli standard.

— Darko Z
fonte

19

In HTLM5 questo è cambiato. Entrambi gli esempi convalideranno - validator.w3.org .

— Atadj

Ben fatto. è un errore facile da commettere, e sebbene entrambi convalideranno la sua logica che naturalmente gli elementi inline dovrebbero essere discendenti di elementi a livello di blocco.

— bigmadwolf

@pushplaybang - Direi che è più semantico racchiudere l'intestazione in un collegamento a meno che solo una parte dell'intestazione non debba essere cliccabile (non riesco a pensare a un caso d'uso per questo). Indipendentemente da ciò, è bello che entrambi siano supportati in html5.

— aaaaaa

48

HTML5 aggiorna questo argomento: ora è OK avvolgere elementi a livello di blocco con A, come indicato in un'altra domanda: https://stackoverflow.com/a/9782054/674965 e qui: http://davidwalsh.name/html5- elementi-link

— f055
fonte

8

Questa risposta è ora molto più pertinente della risposta accettata

— Josh Davenport

@JoshDavenport La risposta accettata è stata aggiornata per riflettere che

— dan-klasson

2

Per quanto ho capito, HTML5 ti consente di racchiudere elementi a livello di blocco nei tag di collegamento. Tuttavia, i bug possono essere visualizzati nei browser meno recenti. L'ho riscontrato con Firefox 3.6.18 e ho inserito moz-rs-header = "" nel mio codice. Così i miei stili si sono rotti. Se ti interessa una soluzione alternativa, puoi racchiudere i tag di collegamento in div. Di seguito viene fornita una migliore spiegazione del perché il codice aggiuntivo funziona http://oli.jp/2009/html5-block-level-links/

— Kip Deeds
fonte

1

a > h1 causerà difficoltà nella selezione del testo

Poiché entrambi sono completamente validi in HTML5, è meglio usare h1 > a

— Abhishek
fonte