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

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?

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.

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.

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.

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ą.

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

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

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>

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).

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.

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

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.

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.

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.

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

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.