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

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?

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.

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.

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.

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.

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

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

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>

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

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

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

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.

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.

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>

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

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.