Czy powinienem tworzyć kotwice HTML z „imieniem” czy „idem”?

783

Gdy ktoś chce odwoływać się do jakiejś części strony za pomocą http://example.com/#foometody „ ”, powinien skorzystać

<h1><a name="foo"/>Foo Title</h1>

lub

<h1 id="foo">Foo Title</h1>

Oba działają, ale czy są równe, czy też mają różnice semantyczne?

Henrik Paul
źródło
2
Link powinien faktycznie być http://example.com#foo(więc bez / przed #)
Dana
71
Właściwie, http://example.com#fooi http://example.com/#foosą równoważne, jak zdefiniowano w jednej z RFC na URI.
Oliver,

Odpowiedzi:

616

Zgodnie ze specyfikacją HTML 5 5.9.8 Nawigacja do identyfikatora fragmentu :

W przypadku dokumentów HTML (i typu MIME text / html) należy postępować zgodnie z poniższym modelem przetwarzania, aby określić, jaka jest wskazana część dokumentu.

  1. Analizuj adres URL i niech fragid będzie składnikiem <fragment> adresu URL.
  2. Jeśli fragid jest pustym ciągiem, wskazana część dokumentu znajduje się na górze dokumentu.
  3. Jeśli w DOM jest element o identyfikatorze dokładnie równym fragid, to pierwszym takim elementem w kolejności drzew jest wskazana część dokumentu; zatrzymaj algorytm tutaj.
  4. Jeśli jest elementem w DOM, który ma atrybut name, którego wartość jest dokładnie równa fragid, to pierwszy taki element w kolejności drzewa jest wskazana część dokumentu; zatrzymaj algorytm tutaj.
  5. W przeciwnym razie nie ma wskazanej części dokumentu.

Będzie więc szukał id="foo", a następnie podąży za nimname="foo"

Edycja: jak wskazał @hsivonen, w HTML5 aelement nie ma atrybutu name. Jednak powyższe zasady nadal dotyczą innych nazwanych elementów.

Greg
źródło
76
Nie ma żadnego domniemanego związku między tym algorytmem a ważnością. Nazwa <a> jest niepoprawna w wersji HTML5, która jest obecnie opracowywana.
hsivonen
13
W rzeczywistości nie dotyczy to innych „nazwanych elementów”. Jeśli chodzi o atrybuty nazwy, dotyczy to tylko <a name>. Jednak ten atrybut nie może być używany przez autorów. Musi to być honorowane przez agenty użytkownika dla starszych stron HTML.
Anne
19
@RafaelSoares <h1 id="foo">Foo Title</h1>działa nawet w IE6 i jest częścią specyfikacji HTML 4.01
Aprillion
4
Nie będzie szukał nazwy = "foo", ale <a name="foo">. Zobacz link
Daniel Herzog,
3
W dokumencie HTML5 ze znakami name="foo"ai a id="foo"(niezależnie od ich kolejności na stronie) Chrome i Firefox przejdą do id, ale IE (przetestowany w 11), a Edge przejdzie doname
Alvaro Montoro
182

Nie powinieneś używać <h1><a name="foo"/>Foo Title</h1>w żadnym smaku HTML podawanego jako text/html, ponieważ składnia pustych elementów XML nie jest obsługiwana text/html. W <h1><a name="foo">Foo Title</a></h1>HTML4 jest jednak OK. Nie jest poprawny w wersji HTML5 w wersji aktualnie opracowanej.

<h1 id="foo">Foo Title</h1>jest OK zarówno w HTML4, jak i HTML5. To nie zadziała w Netscape 4, ale prawdopodobnie użyjesz kilkunastu innych funkcji, które nie działają w Netscape 4.

hsivonen
źródło
6
+1 za mówienie o obsłudze przeglądarki. Czy NS4 jest jedynym, który nie obsługuje adresu URL # id => element.id?
Hashbrown
14
@Hashbrown Nie mogłem znaleźć odpowiedzi, więc zrobiłem testy. Odkryłem, że nawet bardzo stare przeglądarki traktują ids jak namekotwice pod względem fragmentów adresów URL i zgodności:target selektora CSS . Testowane: Chrome 6, Firefox 1.5, IE6, Opera 8.02, Safari 3.1.2, Netscape 7.2, Lynx 2.24 oraz przeglądarki mobilne: Android 2.2, Chrome 26, Dolphin 9.3, Firefox 19, IE10, Safari 4 i Opera Mini 5.1.
Stephen M. Harris
1
@smhmic, znalazłem jeden. Przeglądarka internetowa Off-By-One rozpoznaje zakotwiczenia zdefiniowane za pomocą <a name="foo"/>, ale nie rozpoznaje zakotwiczeń zdefiniowanych za pomocą <sometag id = "foo"> OB1 został ostatnio zaktualizowany> 8 lat temu. Jego autor może pochwalić się tym, że „może być najmniejszą i najszybszą przeglądarką internetową z pełną obsługą HTML 3.2”. Twierdzi, że obsługuje Win95 przez XP, ale działa dobrze z 64-bitowym Win7. Dlaczego więc taki dinozaur? Do testowania, oczywiście, aby upewnić się, że moje strony nie psują się zbyt mocno w / naprawdę antycznych przeglądarkach. Noszę też OB1 na dysku flash. Jest mały, samodzielny i odporny na infekcje.
Dave Burton
26
Czytanie tego w 2016 roku będzie jak… Netscape 4?
ADTC
1
użycie `<a name="something" id="something> </a> [ELEMENT TO SCROLL TO] jest prawdopodobnie najlepsze, ponieważ jest kompatybilne i nie
stylizuje
52

Muszę powiedzieć, jeśli zamierzasz prowadzić do tego obszaru na stronie ... takiego jak page.html # foo, a Foo Title nie jest linkiem, którego powinieneś używać:

<h1 id="foo">Foo Title</h1>

Jeśli zamiast tego umieścisz w nim <a>odniesienie, na nagłówek będzie miał wpływ <a>określony CSS w Twojej witrynie. To tylko dodatkowy znacznik i nie powinieneś go potrzebować. Zdecydowanie polecam umieszczenie identyfikatora w nagłówku, nie tylko lepiej sformułowanym, ale pozwoli on adresować ten obiekt w JavaScript lub CSS.

Tim Knight
źródło
Nie tylko to, ale walczyłem z dziwnym błędem podczas wyświetlania: w IE nie pojawiały się żadne rzeczy. Nie mając pojęcia o punkcie ataku, rzuciłem go na walidator, który oflagował wpisy <a name="foo">, więc je zmieniłem - a teraz wyświetla się: żaden nie działa poprawnie.
Loren Pechtel,
To więcej niż wystarcza, nie potrzeba tagu kotwicy ze względu na efekt.
Wallace Sidhrée,
27

Wikipedia często korzysta z tej funkcji:

<a href="#History">[...]</a>
<span class="mw-headline" id="History">History</span>

Wikipedia działa dla wszystkich, więc czuję się bezpiecznie, trzymając się tego formularza.

Nie zapominaj również, że możesz tego użyć nie tylko w zakresach, ale także w divach, a nawet w komórkach tabeli, a następnie masz dostęp do pseudoklasy: target na elemencie. Tylko uważaj, aby nie zmieniać szerokości, jak w przypadku pogrubionego tekstu, ponieważ powoduje to przenoszenie zawartości, co jest niepokojące.

Nazwane kotwice - moim głosem jest unikanie:

  • „Nazwy i identyfikatory znajdują się w tej samej przestrzeni nazw ...” - Dwa atrybuty o tej samej przestrzeni nazw są po prostu szalone. Powiedzmy, że jest już przestarzały.
  • „Zakotwicza elementy bez atrybutu href” - Po raz kolejny charakter elementu (hiperłącze czy nie) jest zdefiniowany przez posiadanie atrybutu ?! Podwójnie szalony. Zdrowy rozsądek mówi, aby całkowicie tego unikać.
  • Jeśli kiedykolwiek projektujesz kotwicę bez pseudoklasy, stylizacja ma zastosowanie do każdej z nich. W CSS3 można to obejść za pomocą selektorów atrybutów (lub tego samego stylu dla każdej pseudoklasy), ale nadal jest to obejście. Zwykle nie pojawia się, ponieważ wybierasz kolory dla pseudoklasy, a podkreślenie, które jest obecne domyślnie, ma sens tylko do usunięcia, co czyni go takim samym jak inny tekst. Ale kiedykolwiek decydujesz się na pogrubienie linków, spowoduje to problemy.
  • Netscape 4 może nie obsługiwać funkcji id, ale nadal nieznany atrybut nie spowoduje żadnych problemów. To właśnie nazywało się dla mnie kompatybilnością.
Zoltán Morvai
źródło
1
Zaproponuj edycję punkt 3 z 4: Jeśli kiedykolwiek a {color:red}nadasz styl , pokoloruje on zarówno twoje <a href> linki ORAZ twoje <a name> fragmenty. Można to obejść za pomocą pseudo klas a:link {color:red]}lub selektorów atrybutówa:not([href]) {color:red;}
Bob Stein
Masz rację, ale dla mnie punkt 3 mówi dokładnie to. Może to być mój angielski ...
Zoltán Morvai
Wreszcie, mam rację: „Jeśli kiedykolwiek projektujesz kotwicę bez pseudoklasy, stylizacja dotyczy każdego z nich”. Niejednoznaczny: możesz pomyśleć „każda pseudoklasa”. Dobrze. Ale myślałem o „każdym przypadku” użycia kotwicy, co oznacza nazwane i href-ed. Wyjaśnione. :) Nie musisz edytować po swoim komentarzu, ale mogę, jeśli nalegasz. Ale nadal nie jest to podatne na kolory, ponieważ zwykle zamierza się je odróżniać, ale nadal tak samo jest z czcionką ...
Zoltán Morvai
Z przyjemnością przeczytałem wasze komentarze @ ZoltánMorvai. „double crazy” i „netscape 4” doubleplusgood.
Randy L
1
Dwa atrybuty o tej samej przestrzeni nazw są szalone - niezupełnie. Podczas tworzenia treści generowanych przez użytkowników bardzo przydatne jest określenie czegoś jako łącza fragmentu <a name="heading1"></a> ... document.html#heading1bez ustawiania identyfikatora, ponieważ identyfikator może kolidować z innym identyfikatorem na stronie. Szkoda, że ​​nie umieścili tego nameatrybutu w HTML5.
Jez
14
<h1 id="foo">Foo Title</h1>

należy użyć. Nie używaj kotwicy, chyba że chcesz link.

Andrew Marsh
źródło
Identyczna z odpowiedzią Tima Knighta, opublikowaną pół roku wcześniej. -1
Luc
13

Uwaga dla użytkowników JavaScript: wszystkie identyfikatory stają się zmiennymi globalnymi pod oknem .

<h1 id="foo">Foo Title</h1>

Właśnie utworzyłem globalny JS:

window.foo

Wartość window.foobędzie HTMLElementdla h1.

O ile nie możesz zagwarantować, że wszystkie wartości użyte w idatrybutach są bezpieczne, wolisz trzymać się name:

<h1 name="foo">Foo Title</h1>
mikemaccana
źródło
12
Dobrą wiadomością jest to, że nie można zastąpić funkcji zdefiniowanych w window. Na przykład <div id="open"></div>nie zastąpi funkcji window.open.
Flimm,
8

Nie ma różnicy semantycznej; trend w standardach dotyczy idraczej użycia niż name. Istnieją jednak różnice, które namew niektórych przypadkach mogą prowadzić do preferowania . Specyfikacja HTML 4.01 oferuje następujące wskazówki :

Użyj idlub name? Przy podejmowaniu decyzji, czy użyć nazwy kotwicy, idczy namejej nazwy, autorzy powinni wziąć pod uwagę następujące kwestie :

  • Atrybut id może działać nie tylko jako nazwa kotwicy (np. Selektor arkuszy stylów, identyfikator przetwarzania itp.).
  • Niektóre starsze programy klienckie nie obsługują kotwic utworzonych za pomocą atrybutu id.
  • Atrybut name pozwala na bogatsze nazwy kotwic (z jednostkami).
erickson
źródło
14
Dla jasności, gdy mówią „starsze programy klienckie”, mają na myśli NAPRAWDĘ stare programy klienckie. Nie martwiłbym się tym.
Eli
1
HTML5 pozwala również na „bogate” identyfikatory. Czy ktoś ma numery wersji przeglądarek z udziałem w rynku większym niż 0,1%, które nie mogą obsługiwać fragmentów zakotwiczonych w identyfikatorze? - A może dinozaur Netscape 4.7 jest najbardziej rozpowszechniony?
Robert Siemer
7
FWIW, nie mogłem zmusić idkotwic do pracy w Safari na iOS 5, więc nie tylko przeglądarki były już „naprawdę stare” w '09. Musiałem dodać names, aby moja strona działała poprawnie na iPadzie. Być może to już zostało naprawione, nie posiadam żadnych urządzeń z systemem iOS 6 do sprawdzenia.
Daniel Saner
@DanielSaner naprawdę? więc en.wikipedia.org/wiki/IPad#Applications nie działa na iPadzie?
Aprillion
1
@DanielSaner Użyłem symulatorów do przetestowania Mobile Safari 5.02 i 5.1 oraz Android Browser 2.2 i 2.3, a idkotwice wydają się działać uniwersalnie. Jeśli ten prosty przykład nie działa na twoim telefonie komórkowym, sprawdziłbym ustawienia dostępności urządzenia. (@deathApril Witryna mobilna Wikipedii ma Javascript, który skutecznie powoduje ignorowanie fragmentu adresu URL).
Stephen M. Harris
8

Metoda ID nie będzie działać na starszych przeglądarkach, metoda nazwy kotwicy będzie przestarzała w nowszych wersjach HTML ... Chciałbym użyć id.

Spikolynn
źródło
2
Czy masz źródło tych roszczeń? Nie zrozum mnie źle; Jestem po prostu ogólnie zainteresowany.
Henrik Paul
11
To nie rzuca światła na „nie będzie działać na starszych przeglądarkach”. - Jakie to przeglądarki, oprócz Netscape 4 ??
Robert Siemer
3
Próbowałem za pomocą identyfikatora na div i działa nawet w IE 7. Nie można Test w IE 6 chociaż .. ale kto używa IE 6 w dzisiejszych czasach ...
Gilly
@deathApril w niektórych przypadkach (w zależności od HASLAYOUT) jest wadliwy.
Knu
@RobertSiemer Działa prawie uniwersalnie - zobacz mój komentarz pod tą odpowiedzią .
Stephen M. Harris
3

Mam stronę internetową składającą się z kilku pionowo ułożonych kontenerów div, identycznych pod względem formatu i różniących się tylko numerem seryjnym. Chciałem ukryć kotwicę z nazwami u góry każdego diva, więc najbardziej ekonomicznym rozwiązaniem okazało się włączenie kotwicy jako identyfikatora do otwierającego tagu div, tj.

<div id="[serial number]" class="topic_wrapper">
maximus
źródło
2

Tylko spostrzeżenie na temat znaczników Formularz znaczników we wcześniejszych wersjach HTML stanowił punkt kontrolny. Formularze znaczników w HTML5 używające atrybutu id, choć w większości równoważne, wymagają elementu do zidentyfikowania, z których prawie wszystkie zwykle zawierają treść.

Można na przykład użyć pustej rozpiętości lub div, ale to użycie wygląda i pachnie zdegenerowane.

Jedną z myśli jest użycie do tego celu elementu wbr. Wbr ma pusty model zawartości i po prostu deklaruje, że możliwe jest dzielenie linii; jest to nadal nieco nieuzasadnione użycie znacznika, ale znacznie mniej niż bezpłatne podziały dokumentów lub puste zakresy tekstu.

jerseyboy
źródło
Trafne spostrzeżenie. Więcej informacji na wbr: w3.org/TR/html-markup/wbr.html Użyj <wbr id="foo" />zamiast<a name="foo"></a>
Luke
1

Druga próbka przypisuje unikalny identyfikator do danego elementu. Elementem tym można następnie manipulować lub uzyskać do niego dostęp za pomocą DHTML.

Z drugiej strony pierwsza określa nazwaną lokalizację w dokumencie, podobną do zakładki. Przymocowany do „kotwicy” ma sens.

Cerebrus
źródło
1

W html 5 id=""atrybut definiuje unikalny identyfikator elementu, który jest także kotwicą dla fragmentu łącza. We wcześniejszych standardach HTML name=""atrybut <a>elementu definiuje kotwicę dla łącza fragmentu. Polecam coś w stylu:
<a name="foo" id="foo"></a><h1>Foo Title</h1>
ponieważ obsługa tego id=""atrybutu jest nieco nierówna (chociaż najnowsze wersje wszystkich głównych przeglądarek go obsługują, wersje, które nie mają więcej niż kilka lat [I najlepiej nie coś zepsuć jeśli nie ma dobrego powodu]). Jest kompatybilny i nie stylizuje tego, co jest w elemencie link'd, ponieważ zamknięcie </a> jest nadal poza elementem, ale nadal obowiązuje we wszystkich obecnych standardach.

Upewnij się, że name=""i id=""atrybuty <a>elementu są takie same.

JustinCB
źródło
2
Nie wszystko, co korzysta z HTML, to przeglądarka. Używam biblioteki Java, która wyświetla informacje w oknie za pomocą HTML. To jedyna metoda, która zadziałała. nameWymagany jest atrybut znacznika zakotwiczenia; umieszczanie atrybutów na hNlub spannie działało.
Mars
0

Co powiesz na użycie atrybutu name dla starych przeglądarek i atrybutu id dla nowych przeglądarek. Obie opcje zostaną użyte, a metoda rezerwowa zostanie domyślnie zaimplementowana !!!

Umesh Bagalur
źródło
-3

Cała koncepcja „nazwanej kotwicy” z definicji używa atrybutu name. Powinieneś trzymać się nazwy, ale atrybut ID może być przydatny w niektórych sytuacjach w javascript.

Tak jak w komentarzach, zawsze możesz użyć obu, aby zabezpieczyć swoje zakłady.

Alex Fort
źródło
Czy w obu przypadkach id: s i nazwy są globalnie unikalne? jak w, czy mogę użyć tego samego ciągu jako identyfikatora i nazwy?
Henrik Paul
Możesz, ale niektórzy uważają, że to zła praktyka.
Alex Fort
9
Zgodnie ze specyfikacją HTML, jeśli oba są obecne, nazwa i identyfikator powinny być identyczne. Mówi także, że nazwy i identyfikatory znajdują się w tej samej przestrzeni nazw. Usługa sprawdzania poprawności HTML ich nie sprawdza, i wątpię, by przeglądarki się tym przejmowały, ale i tak wydają się być dobrymi wytycznymi.
erickson
3
Rzeczywistość na nowo! <nazwa ... od początku była chora, a styl linków CSS sprawia, że ​​jest jeszcze bardziej chora.
Robert Siemer