Haruskah saya membuat Jangkar HTML dengan 'nama' atau 'id'?

783

Ketika seseorang ingin merujuk ke beberapa bagian dari halaman web dengan metode " http://example.com/#foo", harus digunakan

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

atau

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

Mereka berdua bekerja, tetapi apakah mereka sama, atau apakah mereka memiliki perbedaan semantik?

html hyperlink fragment-identifier Henrik Paul
sumber
2
Tautan seharusnya benar-benar http://example.com#foo(jadi tanpa / sebelum #)
Dana
71
Sebenarnya, http://example.com#foodan http://example.com/#foosetara seperti yang didefinisikan dalam salah satu RFC di URI.
Oliver

Jawaban:

617

Menurut spesifikasi HTML 5, 5.9.8 Menavigasi ke pengidentifikasi fragmen :

Untuk dokumen HTML (dan tipe MIME teks / html), model pemrosesan berikut ini harus diikuti untuk menentukan bagian dokumen yang ditunjukkan.

  1. Parsikan URL, dan biarkan fragid menjadi komponen <fragment> URL.
  2. Jika fragmen adalah string kosong, maka bagian dokumen yang ditunjukkan adalah bagian atas dokumen.
  3. Jika ada elemen dalam DOM yang memiliki ID persis sama dengan fragid, maka elemen tersebut pertama dalam urutan pohon adalah bagian yang ditunjukkan dari dokumen; hentikan algoritme di sini.
  4. Jika ada suatu unsur dalam DOM yang memiliki atribut nama yang nilainya persis sama dengan fragid, maka elemen pertama seperti agar pohon adalah bagian yang ditunjukkan dokumen; hentikan algoritme di sini.
  5. Kalau tidak, tidak ada bagian dokumen yang ditunjukkan.

Jadi, itu akan mencari id="foo", dan kemudian akan mengikutiname="foo"

Sunting: Seperti yang ditunjukkan oleh @hsivonen, di HTML5 aelemen tidak memiliki atribut nama. Namun, aturan di atas masih berlaku untuk elemen bernama lainnya.

Greg
sumber
76
Tidak ada hubungan tersirat antara algoritma dan validitas itu. <a name> tidak valid dalam HTML5 seperti yang saat ini dirancang.
hsivonen
13
Sebenarnya itu tidak berlaku untuk "elemen bernama" lainnya. Sejauh atribut nama itu hanya berlaku untuk <a name>. Namun, atribut itu tidak dapat digunakan oleh penulis. Itu hanya harus dihormati oleh agen pengguna untuk halaman HTML yang lebih lama.
Anne
19
@RafaelSoares <h1 id="foo">Foo Title</h1>bekerja bahkan di IE6 dan merupakan bagian dari spesifikasi HTML 4.01
Aprillion
4
Itu tidak akan mencari nama = "foo" tetapi untuk <a name="foo">. Lihat tautan
Daniel Herzog
3
Dalam dokumen HTML5 dengan a name="foo"dan id="foo"(terlepas dari urutannya dalam halaman), Chrome dan Firefox akan melompat ke id, tetapi IE (diuji pada 11) dan Edge akan melompat kename
Alvaro Montoro
183

Anda tidak boleh menggunakan <h1><a name="foo"/>Foo Title</h1>HTML dalam text/htmlarti apa pun , karena sintaks elemen XML kosong tidak didukung di text/html. Namun, <h1><a name="foo">Foo Title</a></h1>tidak masalah di HTML4. Itu tidak valid dalam HTML5 seperti saat ini dirancang.

<h1 id="foo">Foo Title</h1>OK di HTML4 dan HTML5. Ini tidak akan berfungsi di Netscape 4, tetapi Anda mungkin akan menggunakan selusin fitur lain yang tidak berfungsi di Netscape 4.

hsivonen
sumber
6
+1 untuk berbicara tentang dukungan browser. Apakah NS4 satu-satunya yang tidak mendukung url # id => element.id?
Hashbrown
14
@ Hashbrown Tidak dapat menemukan jawaban, jadi saya melakukan beberapa pengujian. Saya menemukan bahwa bahkan browser yang sangat lama memperlakukan ids seperti nameanchor dalam hal fragmen URL dan kompatibilitas:target pemilih CSS . Diuji: Chrome 6, Firefox 1.5, IE6, Opera 8.02, Safari 3.1.2, Netscape 7.2, Lynx 2.24, dan browser seluler: Android 2.2, Chrome 26, Dolphin 9.3, Firefox 19, IE10, Safari 4, dan Opera Mini 5.1.
Stephen M. Harris
1
@smhmic, saya menemukan satu. Browser web Off-By-One mengenali jangkar yang ditentukan melalui <a name="foo"/> tetapi tidak akan mengenali jangkar yang didefinisikan melalui <sometag id = "foo"> OB1 terakhir diperbarui> 8 tahun yang lalu. Penulisnya membanggakan bahwa ia "mungkin browser web terkecil dan tercepat di dunia dengan dukungan penuh HTML 3.2." Ia mengklaim dukungan untuk Win95 melalui XP, tetapi berfungsi baik dengan Win7 64-bit. Jadi, mengapa memiliki dinosaurus seperti itu? Untuk pengujian, tentu saja, untuk memastikan situs saya tidak rusak terlalu parah dengan browser yang benar-benar antik. Selain itu, saya juga membawa OB1 pada flash drive. Ini kecil, mandiri & kebal dari infeksi.
Dave Burton
26
Membaca ini pada tahun 2016 menjadi seperti .. Netscape 4?
ADTC
1
menggunakan `<a name="something" id="something> </a> [UNSUR UNTUK MENGGULIR] mungkin yang terbaik karena itu kompatibel, & itu tidak menata apa pun yang ada di elemen untuk menggulir ke.
JustinCB
53

Saya harus mengatakan jika Anda akan menghubungkan ke area itu di halaman ... seperti page.html # foo dan Foo Title bukan tautan yang harus Anda gunakan:

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

Jika Anda malah meletakkan <a>referensi di sekitarnya, tajuk Anda akan dipengaruhi oleh <a>CSS tertentu di dalam situs Anda. Ini hanya markup tambahan, dan Anda seharusnya tidak membutuhkannya. Saya sangat merekomendasikan menempatkan id pada informasi utama, tidak hanya itu lebih baik dibentuk, tetapi juga akan memungkinkan Anda untuk mengatasi objek tersebut dalam Javascript atau CSS.

Tim Knight
sumber
Bukan hanya itu tetapi saya telah berjuang dengan kesalahan aneh di mana tampilan: tidak ada barang yang muncul di IE. Karena tidak memiliki gagasan tentang titik serangan, saya melemparkannya ke validator yang menandai entri <a name="foo"> jadi saya mengubahnya - dan sekarang tampilannya: tidak ada yang berfungsi dengan baik.
Loren Pechtel
Ini lebih dari cukup, tidak ada jangkar tag yang diperlukan untuk efek ini.
Wallace Sidhrée
28

Wikipedia banyak menggunakan fitur ini seperti ini:

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

Dan Wikipedia bekerja untuk semua orang, jadi saya akan merasa aman menggunakan formulir ini.

Juga jangan lupa, Anda dapat menggunakan ini tidak hanya dengan span tetapi dengan divs atau bahkan sel tabel, dan kemudian Anda memiliki akses ke: target pseudo-class pada elemen. Berhati-hatilah untuk tidak mengubah lebar, seperti dengan teks tebal, karena memindahkan konten, yang mengganggu.

Bernama jangkar - suara saya adalah untuk menghindari:

  • "Nama dan id berada di namespace yang sama ..." - Dua atribut dengan namespace yang sama hanya gila. Anggap saja sudah usang.
  • "Elemen jangkar tanpa href atribut" - Sekali lagi, sifat elemen (hyperlink atau tidak) didefinisikan dengan memiliki atribut ?! Gila ganda. Akal sehat mengatakan untuk menghindarinya sama sekali.
  • Jika Anda pernah membuat gaya anchor tanpa pseudo-class, styling berlaku untuk masing-masing. Di CSS3 Anda bisa menyiasatinya dengan pemilih atribut (atau gaya yang sama untuk setiap pseudoclass), tetapi tetap saja ini merupakan solusi. Ini biasanya tidak muncul karena Anda memilih warna per pseudo-kelas, dan garis bawah yang hadir secara default hanya masuk akal untuk dihapus, yang membuatnya sama dengan teks lainnya. Tetapi Anda pernah memutuskan untuk membuat tautan Anda tebal, itu akan menyebabkan masalah.
  • Netscape 4 mungkin tidak mendukung fitur id, tetapi atribut yang tidak dikenal tidak akan menyebabkan masalah. Itulah yang disebut kompatibilitas untuk saya.
Zoltán Morvai
sumber
1
Sarankan edit bullet 3 dari 4: Jika Anda pernah a {color:red}mendesainnya, itu akan memberi warna pada tautan <a href> DAN fragmen <a name> Anda. Anda dapat menyiasatinya dengan kelas semu a:link {color:red]}atau penyeleksi atributa:not([href]) {color:red;}
Bob Stein
Anda benar, tetapi bagi saya peluru 3 mengatakan hal ini dengan tepat. Mungkin berbahasa Inggris saya ...
Zoltán Morvai
Akhirnya, saya punya maksud Anda: "Jika Anda pernah gaya jangkar tanpa kelas semu, styling berlaku untuk masing-masing." Ambigu: Anda mungkin berpikir "setiap pseudoclass". Baik. Tetapi saya berpikir tentang "setiap kasus" menggunakan jangkar, yang berarti dinamai dan diubah. Diklarifikasi :) Tidak perlu mengedit setelah komentar Anda, tetapi saya bisa jika Anda bersikeras. Tetapi juga masih tidak mudah terjadi dengan warna, karena Anda biasanya bermaksud membuatnya berbeda, tetapi masih sama halnya dengan font-weight ...
Zoltán Morvai
menikmati membaca komentar Anda @ ZoltánMorvai. "double crazy" dan "netscape 4" doubleplusgood.
Randy L
1
Dua atribut dengan namespace yang sama itu gila - tidak juga. Saat melakukan konten yang dibuat pengguna, sangat berguna untuk dapat menentukan sesuatu sebagai tautan fragmen <a name="heading1"></a> ... document.html#heading1tanpa mengatur ID, karena ID mungkin berbenturan dengan ID lain pada halaman. Sayang sekali mereka tidak memasukkan nameatribut dalam HTML5.
Jez
15 
<h1 id="foo">Foo Title</h1>

adalah apa yang harus digunakan. Jangan gunakan jangkar kecuali jika Anda menginginkan tautan.

Andrew Marsh
sumber
Identik dengan jawaban Tim Knight, diposting setengah tahun sebelum ini. -1
Luc
14

Menuju pengguna JavaScript: semua ID menjadi variabel global di bawah jendela .

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

Baru saja menciptakan JS global:

window.foo

Nilai window.fooakan menjadi HTMLElementuntuk h1.

Kecuali Anda dapat menjamin semua nilai yang digunakan dalam idatribut aman, Anda mungkin lebih suka berpegang teguh pada name:

<h1 name="foo">Foo Title</h1>
mikemaccana
sumber
12
Berita baiknya adalah Anda tidak dapat menimpa fungsi yang didefinisikan dalam window. Misalnya, <div id="open"></div>tidak akan menimpa fungsi window.open.
Flimm
9

Tidak ada perbedaan semantik; tren dalam standar adalah ke arah penggunaan iddaripada name. Namun, ada beberapa perbedaan yang mungkin membuat seseorang lebih suka namedalam beberapa kasus. Spesifikasi HTML 4.01 menawarkan petunjuk berikut :

Gunakan idatau name? Penulis harus mempertimbangkan masalah-masalah berikut ketika memutuskan apakah akan menggunakan idatau nameuntuk nama jangkar:

  • Atribut id dapat bertindak lebih dari sekadar nama jangkar (mis. Pemilih lembar gaya, pengidentifikasi proses, dll.).
  • Beberapa agen pengguna yang lebih tua tidak mendukung jangkar yang dibuat dengan atribut id.
  • Atribut name memungkinkan nama anchor lebih kaya (dengan entitas).
erickson
sumber
14
Untuk menjadi jelas, ketika mereka mengatakan "agen pengguna yang lebih tua" yang mereka maksud adalah agen pengguna yang BENAR-BENAR tua. Saya tidak akan khawatir tentang itu.
Eli
1
HTML5 juga memungkinkan ID "kaya". Adakah yang memiliki jumlah versi browser dengan pangsa pasar lebih besar dari 0,1% yang tidak dapat menangani fragmen yang di-anchor? - Atau dinosaurus Netscape 4.7 sebenarnya yang paling menyebar?
Robert Siemer
7
FWIW, saya tidak bisa mendapatkan idjangkar untuk bekerja di Safari untuk iOS 5, jadi bukan hanya browser yang sudah "sangat tua" di '09. Saya harus menambahkan nameagar situs saya berfungsi dengan baik di iPad. Ini mungkin sudah diperbaiki sekarang, saya tidak memiliki perangkat iOS 6 untuk diperiksa.
Daniel Saner
@DanielSaner benar-benar? jadi en.wikipedia.org/wiki/IPad#Applications tidak berfungsi di iPad Anda?
Aprillion
1
@DanielSaner Saya menggunakan simulator untuk menguji Mobile Safari 5.02 & 5.1, dan Android Browser 2.2 & 2.3, dan idjangkar tampaknya bekerja secara universal. Jika contoh sederhana ini tidak berfungsi di ponsel Anda, saya akan memeriksa pengaturan aksesibilitas perangkat. (@deathApril Situs seluler Wikipedia memiliki Javascript yang secara efektif menyebabkan fragmen URL diabaikan.)
Stephen M. Harris
9

Metode ID tidak akan berfungsi pada browser lama, metode anchor name akan ditinggalkan dalam versi HTML yang lebih baru ... Saya akan menggunakan id.

Spikolynn
sumber
2
Apakah Anda memiliki sumber untuk klaim itu? Jangan salah sangka; Saya umumnya hanya tertarik.
Henrik Paul
11
Itu tidak memberi cahaya pada "tidak akan bekerja pada browser yang lebih tua". - Browser apa sajakah ini, selain dari Netscape 4 ??
Robert Siemer
3
Saya sudah mencoba menggunakan id pada div, dan itu bekerja bahkan di IE 7. Tapi tidak bisa menguji di IE 6 .. tapi siapa yang menggunakan IE 6 saat ini ...
Gilly
@deathApril dalam kasus tertentu (tergantung pada HASLAYOUT) bermasalah.
Knu
@RobertSiemer Bekerja hampir secara universal - lihat komentar saya di bawah jawaban ini .
Stephen M. Harris
3

Saya memiliki halaman web yang terdiri dari sejumlah wadah div yang ditumpuk secara vertikal, identik dalam format dan hanya berbeda dalam nomor seri. Saya ingin menyembunyikan nama jangkar di bagian atas setiap div, jadi solusi yang paling ekonomis ternyata menyertakan jangkar sebagai id dalam tag div pembuka, yaitu,

<div id="[serial number]" class="topic_wrapper">
maximus
sumber
2

Sampel kedua memberikan ID unik ke elemen yang dimaksud. Elemen ini kemudian dapat dimanipulasi atau diakses menggunakan DHTML.

Yang pertama, di sisi lain, menetapkan lokasi bernama di dalam dokumen, mirip dengan bookmark. Terlampir pada "jangkar", itu sangat masuk akal.

Cerebrus
sumber
2

Hanya pengamatan tentang markup Bentuk markup dalam versi HTML sebelumnya menyediakan titik jangkar. Bentuk markup di HTML5 menggunakan atribut id, sementara sebagian besar setara, memerlukan elemen untuk diidentifikasi, hampir semua yang biasanya diharapkan mengandung konten.

Rentang atau div kosong dapat digunakan, misalnya, tetapi penggunaan ini terlihat dan berbau merosot.

Satu pemikiran adalah menggunakan elemen wbr untuk tujuan ini. Wbr memiliki model konten kosong dan hanya menyatakan bahwa pemutusan baris dimungkinkan; ini masih menggunakan tag markup yang sedikit serampangan, tetapi jauh lebih sedikit daripada divisi dokumen serampangan atau rentang teks kosong.

jerseyboy
sumber
Itu poin yang bagus. Info lebih lanjut tentang wbr: w3.org/TR/html-markup/wbr.html Gunakan <wbr id="foo" />alih-alih<a name="foo"></a>
Luke
2

Dalam html 5, id=""atribut mendefinisikan pengidentifikasi unik untuk suatu elemen, yang juga merupakan jangkar untuk tautan fragmen. Dalam standar html sebelumnya, name=""atribut <a>elemen mendefinisikan jangkar untuk tautan fragmen. Saya merekomendasikan sesuatu seperti:
<a name="foo" id="foo"></a><h1>Foo Title</h1>
Karena dukungan untuk id=""atributnya agak berbintik-bintik (walaupun rilis terbaru dari semua browser utama mendukungnya, rilis yang tidak lebih dari beberapa tahun [Dan yang terbaik adalah untuk tidak memecahkan sesuatu jika tidak ada alasan yang bagus untuk]). Itu kompatibel, & itu tidak menata apa pun yang ada di elemen tautan, karena penutup </a> masih di luar elemen, tetapi masih berlaku di semua standar saat ini.

Pastikan atribut name=""dan elemennya sama. id=""<a>

JustinCB
sumber
2
Tidak semua yang menggunakan HTML adalah browser. Saya menggunakan perpustakaan Java yang menampilkan informasi di jendela menggunakan HTML. Ini adalah satu-satunya metode yang berhasil. Ini adalah nameatribut pada tag anchor yang diperlukan; menempatkan atribut pada hNatau spantidak berfungsi.
Mars
1

Bagaimana dengan menggunakan atribut nama untuk browser lama dan atribut id ke browser baru. Kedua opsi akan digunakan dan metode mundur akan diterapkan secara default !!!

Umesh Bagalur
sumber
-3

Seluruh konsep "named anchor" menggunakan atribut nama, menurut definisi. Anda harus tetap menggunakan nama, tetapi atribut ID mungkin berguna untuk beberapa situasi javascript.

Seperti dalam komentar, Anda selalu dapat menggunakan keduanya untuk melindungi nilai dari taruhan Anda.

Alex Fort
sumber
Saat menggunakan keduanya, apakah id: s dan nama secara global unik? seperti pada, bisakah saya menggunakan string yang sama dengan id dan namanya?
Henrik Paul
Anda bisa, tetapi beberapa orang berpikir itu praktik yang buruk.
Alex Fort
9
Menurut spesifikasi HTML, jika keduanya ada, nama dan id harus identik. Ia juga mengatakan bahwa nama dan id berada di namespace yang sama. Layanan validator HTML tidak memeriksa ini, dan saya ragu browser peduli, tetapi mereka tetap tampak sebagai pedoman yang baik untuk diikuti.
erickson
3
Realitas didefinisikan ulang! <sebuah nama ... sakit sejak awal, dan styling tautan CSS membuatnya semakin sakit.
Robert Siemer