Rozpiętość w kotwicy lub kotwica w przęśle, czy nie ma znaczenia?

109

Chcę zagnieżdżać spani aoznaczać. Czy powinienem

  1. Włóż do <span>środka<a>
  2. Włóż do <a>środka<span>
  3. To nie ma znaczenia?
html css semantic-markup Salman A
źródło

Odpowiedzi:

110

3 - To nie ma znaczenia.

ALE, staram się używać tylko <span>wewnątrz a, <a>jeśli jest to tylko dla części zawartości tagu, tj

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

Zamiast:

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

Który oczywiście powinien być po prostu:

<a href="#" class="red">some text</a>
Jon Hadley
źródło
1
Niedawno natknąłem się na problem z przepełnieniem tekstu: wielokropek i przepełnienie: ukryty, który można rozwiązać, dodając element inline-block do mojego przycisku nawigacyjnego. Skończyło się na <a> <span> SMS-ie </span> </a>. Więc myślę (lub mam nadzieję;)) można to zrobić, kiedy naprawdę tego potrzebujesz.
CunningFatalist,
Pójdę na opcję 2, ponieważ ma to znaczenie. Kotwica powinna służyć tylko do zakotwiczania, a nie do umieszczania elementów (najlepsza praktyka). Wyobraź sobie sytuację, w której tworzysz klikalny kafelek, a kotwica jest elementem nadrzędnym komponentu kafelka, a wewnątrz komponentu znajdują się łącza do obrazów i więcej obrazów. Robot Google oszaleje i ostatecznie to nie jest dobre dla Twojej witryny.
Imam Bux
33

Jest całkowicie poprawne (przynajmniej przez standardy HTML 4.01 i XHTML 1.0) zagnieżdżanie <span>wewnątrz <a>lub <a>wewnątrz pliku <span>.

Aby to sobie udowodnić, zawsze możesz to sprawdzić w usłudze walidacji W3C MarkUp

Próbowałem zweryfikować:

<!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>

A także to samo, co powyżej, ale z <a>wnętrzem<span>

to znaczy

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

z dokumentami HTML 4.01 i XHTML 1.0 i oba pomyślnie przeszły walidację!

Jedyną rzeczą, o której należy pamiętać, jest upewnienie się, że zamykasz tagi we właściwej kolejności. Jeśli więc zaczynasz od a <span>then an <a>, upewnij się, że zamknąłeś <a>tag przed zamknięciem <span>i odwrotnie.

CraigTP
źródło
20

To nie ma znaczenia - oboje są w sobie dozwoleni.

Greg
źródło
Ale <a> to poziom bloku, a <span> to element poziomu śródliniowego, a element poziomu bloku nie może znajdować się wewnątrz elementu śródliniowego. Myślę, że to było w walidacji w3c
Jitendra Vyas
26
Nie, oba są na linii
Greg
16

zależy to od tego, co chcesz oznaczyć.

  • jeśli chcesz, aby link znajdował się w rozpiętości, włóż go do <a>środka <span>.
  • jeśli chcesz oznaczyć coś w linku, wstaw <span>do<a>
knittl
źródło
16

SPAN jest pojemnikiem liniowym GENERIC . Nie ma znaczenia, czy element ajest wewnątrz, spanczy spanwewnątrz, aponieważ oba są elementami wbudowanymi. Nie krępuj się robić wszystkiego, co wydaje ci się logicznie poprawne.

Salman A
źródło
2

To zależy od tego, do czego służy rozpiętość. Jeśli odnosi się do tekstu linku, a nie do faktu, że jest to link, wybierz # 1. Jeśli rozpiętość odnosi się do łącza jako całości, wybierz nr 2. Jeśli nie wyjaśnisz, co reprezentuje rozpiętość, nie ma nic więcej odpowiedzi niż to. Oba są elementami wbudowanymi, mogą być zagnieżdżone składniowo w dowolnej kolejności.

sykora
źródło
Prawidłowo, oba są elementami wbudowanymi.
Chris,
2

Może to mieć znaczenie, jeśli na przykład używasz jakiejś czcionki ikony sortowania. Miałem to przed chwilą z:

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

Normalnie umieściłbym rozpiętość wewnątrz litery A, ale stylizacja nie działała, dopóki nie została zamieniona.

user1368737
źródło
1

Osobiście, jako programista stron internetowych, umieszczam rozpiętość w tagu kotwicy tylko wtedy, gdy próbuję podświetlić sekcję tekstu linków, na przykład stosując tło do jednej sekcji.

Xopa
źródło
0

Będzie działać w obu przypadkach, ale osobiście wolałbym opcję 2, więc rozpiętość jest „wokół” łącza.

Oldskool
źródło
0

Semantycznie myślę, że ma to większy sens, ponieważ jest to pojemnik na pojedynczy element i jeśli chcesz je zagnieździć, to sugeruje, że więcej niż element będzie wewnątrz elementu zewnętrznego.

Toby
źródło