Gdy ktoś chce odwoływać się do jakiejś części strony za pomocą http://example.com/#foo
metody „ ”, 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?
html
hyperlink
fragment-identifier
Henrik Paul
źródło
źródło
http://example.com#foo
(więc bez / przed #)http://example.com#foo
ihttp://example.com/#foo
są równoważne, jak zdefiniowano w jednej z RFC na URI.Odpowiedzi:
Zgodnie ze specyfikacją HTML 5 5.9.8 Nawigacja do identyfikatora fragmentu :
Będzie więc szukał
id="foo"
, a następnie podąży za nimname="foo"
Edycja: jak wskazał @hsivonen, w HTML5
a
element nie ma atrybutu name. Jednak powyższe zasady nadal dotyczą innych nazwanych elementów.źródło
<h1 id="foo">Foo Title</h1>
działa nawet w IE6 i jest częścią specyfikacji HTML 4.01name="foo"
ai aid="foo"
(niezależnie od ich kolejności na stronie) Chrome i Firefox przejdą doid
, ale IE (przetestowany w 11), a Edge przejdzie doname
Nie powinieneś używać
<h1><a name="foo"/>Foo Title</h1>
w żadnym smaku HTML podawanego jakotext/html
, ponieważ składnia pustych elementów XML nie jest obsługiwanatext/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.źródło
id
s jakname
kotwice 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.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ć:
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.źródło
Wikipedia często korzysta z tej funkcji:
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:
źródło
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 klasa:link {color:red]}
lub selektorów atrybutówa:not([href]) {color:red;}
<a name="heading1"></a> ... document.html#heading1
bez ustawiania identyfikatora, ponieważ identyfikator może kolidować z innym identyfikatorem na stronie. Szkoda, że nie umieścili tegoname
atrybutu w HTML5.należy użyć. Nie używaj kotwicy, chyba że chcesz link.
źródło
Uwaga dla użytkowników JavaScript: wszystkie identyfikatory stają się zmiennymi globalnymi pod oknem .
Właśnie utworzyłem globalny JS:
Wartość
window.foo
będzieHTMLElement
dlah1
.O ile nie możesz zagwarantować, że wszystkie wartości użyte w
id
atrybutach są bezpieczne, wolisz trzymać sięname
:źródło
window
. Na przykład<div id="open"></div>
nie zastąpi funkcjiwindow.open
.Nie ma różnicy semantycznej; trend w standardach dotyczy
id
raczej użycia niżname
. Istnieją jednak różnice, którename
w niektórych przypadkach mogą prowadzić do preferowania . Specyfikacja HTML 4.01 oferuje następujące wskazówki :Użyj
id
lubname
? Przy podejmowaniu decyzji, czy użyć nazwy kotwicy,id
czyname
jej nazwy, autorzy powinni wziąć pod uwagę następujące kwestie :źródło
id
kotwic do pracy w Safari na iOS 5, więc nie tylko przeglądarki były już „naprawdę stare” w '09. Musiałem dodaćname
s, 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.id
kotwice 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).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.
źródło
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.
źródło
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.
źródło
wbr
: w3.org/TR/html-markup/wbr.html Użyj<wbr id="foo" />
zamiast<a name="foo"></a>
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.
źródło
W html 5
id=""
atrybut definiuje unikalny identyfikator elementu, który jest także kotwicą dla fragmentu łącza. We wcześniejszych standardach HTMLname=""
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=""
iid=""
atrybuty<a>
elementu są takie same.źródło
name
Wymagany jest atrybut znacznika zakotwiczenia; umieszczanie atrybutów nahN
lubspan
nie działało.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 !!!
źródło
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.
źródło