Portata all'interno dell'ancora o ancora all'interno della campata o non importa?

109

Voglio annidare spane ataggare. Dovrei

Metti dentro<a>
Metti <a>dentro
Non importa?

html css semantic-markup

— Salman A
fonte

110

3 - Non importa.

MA, tendo a usare solo un all'interno di un <a>se è solo per una parte del contenuto del tag, ad es

<a href="#">some <span class="red">text</span></a>

Piuttosto che:

<a href="#"><span class="red">some text</span></a>

Che dovrebbe ovviamente essere solo:

<a href="#" class="red">some text</a>

— Jon Hadley
fonte

1

Recentemente mi sono imbattuto in un problema di spazio bianco con overflow del testo: puntini di sospensione e overflow: nascosto, che potrebbe essere risolto aggiungendo un elemento di blocco in linea al mio pulsante di navigazione. Ho finito con <a> Testo </a>. Quindi penso (o spero;)) che vada bene farlo quando ne hai davvero bisogno.

— CunningFatalist

Sceglierò l'opzione 2 perché è importante. L'ancoraggio dovrebbe essere solo per l'ancoraggio e non per contenere elementi (best practice). Immagina una situazione in cui crei una tessera cliccabile e l'ancora è l'elemento genitore del componente piastrella e all'interno del componente ci sono i collegamenti per le immagini e altre immagini. Il crawler di Google impazzirà e alla fine non farà bene al tuo sito.

— Imam Bux

33

È perfettamente valido (almeno per gli standard HTML 4.01 e XHTML 1.0) annidare un all'interno di un <a>o un <a>all'interno di a .

Solo per dimostrarlo a te stesso, puoi sempre verificarlo presso il servizio di convalida MarkUp W3C

Ho provato a convalidare:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  <html>
    <head>
      <title>Title</title>
    </head>
    <body>
       <p>
         <a href="http://www.google.com/"><span>Google</span></a>
       </p>
    </body>
  </html>

E anche lo stesso come sopra, ma con l' <a>interno

vale a dire

<span><a href="http://www.google.com">Google</a></span>

con doctype HTML 4.01 e XHTML 1.0 ed entrambi hanno superato la convalida con successo!

L'unica cosa di cui tenere conto è assicurarsi di chiudere i tag nell'ordine corretto. Quindi, se inizi con una e poi una <a>, assicurati di chiudere il <a>tag prima di chiudere il e viceversa.

— CraigTP
fonte

20

Non importa: sono entrambi ammessi l'uno nell'altro.

— Greg
fonte

Ma <a> è un livello di blocco e è un elemento di livello in linea e l'elemento di livello di blocco non può entrare nell'elemento in linea. Penso che fosse nella convalida del w3c

— Jitendra Vyas il

26

No, entrambi sono in linea

— Greg

16

dipende da cosa vuoi marcare.

se vuoi un collegamento all'interno di una campata, mettilo <a>dentro .
se vuoi marcare qualcosa in un link, mettilo in<a>

— Knittl
fonte

16

SPAN è un contenitore in linea GENERICO . Non importa se un aè all'interno spano spanè all'interno apoiché entrambi sono elementi in linea. Sentiti libero di fare tutto ciò che ti sembra logicamente corretto.

— Salman A
fonte

2

Dipende da cosa è lo span. Se si riferisce al testo del collegamento e non al fatto che si tratta di un collegamento, scegli # 1. Se lo span si riferisce al collegamento nel suo insieme, scegli # 2. A meno che tu non spieghi cosa rappresenta lo span, non c'è molto di più di una risposta di quella. Sono entrambi elementi in linea, possono essere nidificati sintatticamente in qualsiasi ordine.

— Sykora
fonte

Esatto, sono entrambi elementi in linea.

— Chris

2

Può essere importante se ad esempio stai usando un carattere di icona di ordinamento. Ho avuto questo solo ora con:

<span class="fa fa-print fa-3x"><a href="some_link"></a></span>

Normalmente metterei la campata all'interno della A ma lo stile non ha avuto effetto fino a quando non l'ho cambiata.

— user1368737
fonte

1

Personalmente, come sviluppatore web, inserisco un intervallo all'interno di un anchor tag solo se cerco di evidenziare una sezione del testo dei collegamenti, ad esempio applicando uno sfondo a una sezione.

— Xopa
fonte

0

Funzionerà entrambi, ma personalmente preferirei l'opzione 2, quindi l'intervallo è "intorno" al collegamento.

— Vecchia scuola
fonte

0

Semanticamente penso abbia più senso in quanto è un contenitore per un singolo elemento e se è necessario annidarli, ciò suggerisce che più di un elemento sarà all'interno di quello esterno.

— Toby
fonte