Che è più corretto: <h1> <a> ... </a> </h1> OPPURE <a> <h1> ... </h1> </a>

Sono entrambi validi <h1><a ...> ... </a></h1>e <a ...><h1> ... </h1></a>HTML, o è solo uno corretto? Se sono entrambi corretti, differiscono nel significato?

Entrambe le versioni sono corrette. La più grande differenza tra loro è che nel caso del <h1><a>..</a></h1>solo testo nel titolo sarà cliccabile.

Se inserisci la proprietà <a>around <h1>e css displayè block(che è per impostazione predefinita ), sarà possibile fare clic sull'intero blocco (l'altezza del <h1>e il 100% della larghezza del contenitore in cui <h1>risiede).

Storicamente non è stato possibile inserire un elemento di blocco all'interno di un elemento inline, ma non è più il caso di HTML5. Penserei che l' <h1><a>..</a></h1>approccio sia più convenzionale però.

Nel caso in cui si desideri inserire un'ancora nell'intestazione, un approccio migliore di quello <a id="my-anchor"><h1>..</h1></a>sarebbe utilizzare idl' nameattributo <h1 id="my-anchor">..</h1>o in questo modo: oppure<h1 name="my-anchor">..</h1>

In pre HTML 5 questo

<a><h1>..</h1></a>

non verrà convalidato. Puoi usarlo in HTML 5. Tuttavia, vorrei usare questo:

<h1><a>..</a></h1>

a meno che non sia necessario aggiungere più di <h1> all'interno di <a>

<a><h1></h1></a>non è valido W3C ... Fondamentalmente, non è possibile inserire elementi di blocco all'interno di elementi incorporati

<h1><a>..</a></h1>e si <a><h1>..</h1></a>sono sempre comportati quasi allo stesso modo, quando i fogli di stile non influiscono sul rendering. Quasi, ma non del tutto. Se navighi usando il tasto tab o ti concentri su un collegamento, un rettangolo di messa a fuoco appare attorno al collegamento nella maggior parte dei browser. Per <h1><a>..</a></h1>, questo rettangolo è solo attorno al testo del collegamento. Infatti <a><h1>..</h1></a>, il rettangolo si estende attraverso lo spazio orizzontale disponibile, poiché il markup rende l' aelemento un elemento a blocchi nel rendering, occupando la larghezza del 100% per impostazione predefinita.

Quanto segue mostra come <a href=foo><h1>link</h1></a>viene eseguito il rendering di un focus da Chrome:

Ciò implica che se si disegnano elementi, ad esempio impostando un colore di sfondo per i collegamenti, gli effetti differiscono in modo simile.

Storicamente, è <a><h1>..</h1></a>stato dichiarato non valido in HTML 2.0 e le successive specifiche HTML hanno seguito l'esempio, ma HTML5 lo modifica e lo dichiara valido. La definizione formale non ha interessato i browser, ma solo i validatori. Tuttavia, è possibile da remoto che alcuni programmi utente (probabilmente non normali browser, ma ad esempio renderizzatori HTML specializzati, estrattori di dati, convertitori, ecc.) Non riescano a gestirsi <a><h1>..</h1></a>correttamente, poiché non è stato consentito nelle specifiche.

Raramente c'è una buona ragione per trasformare un titolo o un testo in un titolo in un collegamento. (È principalmente illogico e dannoso per l'usabilità.) Ma una domanda simile si è posta spesso quando si fa di un'intestazione (o testo in un'intestazione) una potenziale destinazione per un collegamento, usando ad esempio <h2><a name=foo>...</a></h2>contro <a name=foo><h2>...</h2></a>. Considerazioni simili si applicano a questo (entrambi funzionano, potrebbe esserci una differenza poiché quest'ultimo rende l' aelemento un blocco e prima di HTML5, solo il primo è formalmente consentito). Ma in aggiunta, entrambi i modi sono obsoleti, e utilizzando l' idattributo direttamente sull'elemento titolo è ora raccomandato: <h2 id=foo>...</h2>.

Gli elementi H1 sono elementi a livello di blocco e le ancore sono elementi incorporati. È consentito avere un elemento inline all'interno di un elemento a livello di blocco ma non viceversa. Se si considera il modello a scatola e le specifiche HTML, questo ha senso.

Quindi in conclusione il modo migliore è:

<h1><a href="#">Link</a></h1>

vuoi usare un collegamento ipertestuale <a href="…">/ a:linko vuoi aggiungere un'ancora alla tua intestazione? se vuoi aggiungere un'ancora, puoi semplicemente assegnare un id <h1 id="heading">. puoi quindi collegarlo come page.htm#heading.

se vuoi rendere cliccabile l'intestazione (un link), usa prima gli elementi <h1><a></a></h1>/ h1 > a- blocklevel e gli elementi incorporati all'interno

Inoltre, esistono differenze nella gerarchia di stile. Se lo hai come <h1><a href="#">Heading here</a></h1>, Gli stili dell'ancora avranno la precedenza sugli stili dell'elemento h1. Esempio:

a {color:red;font-size:30px;line-height:30px;}

OVERRULE

h1 {color:blue;font-size:40px;line-height:40px;}