Pertanyaan Apa sajakah nilai valid untuk atribut id dalam HTML?


Saat membuat id atribut untuk elemen HTML, aturan apa yang ada untuk nilai?


1707
2017-09-16 09:08


asal


Jawaban:


Untuk HTML 4, jawabannya secara teknis:

Token ID dan NAMA harus dimulai dengan huruf ([A-Za-z]) dan dapat diikuti oleh sejumlah huruf, angka ([0-9]), tanda hubung ("-"), garis bawah ("_") , titik dua (":"), dan titik (".").

HTML 5 bahkan lebih permisif, hanya mengatakan bahwa id harus mengandung setidaknya satu karakter dan mungkin tidak mengandung karakter spasi.

Atribut id sensitif huruf dalam XHTML.

Sebagai masalah yang murni praktis, Anda mungkin ingin menghindari karakter tertentu. Periode, titik dua, dan '#' memiliki arti khusus dalam pemilih CSS, jadi Anda harus keluar dari karakter tersebut menggunakan backslash dalam CSS atau backslash ganda dalam string pemilih dilewatkan ke jQuery. Pikirkan tentang seberapa sering Anda harus melepaskan karakter dalam stylesheet atau kode Anda sebelum Anda menjadi gila dengan periode dan titik dua dalam id.

Misalnya, deklarasi HTML <div id="first.name"></div> adalah benar. Anda dapat memilih elemen itu di CSS sebagai #first\.name dan di jQuery seperti: $('#first\\.name'). Tetapi jika Anda lupa backslash, $('#first.name'), Anda akan memiliki pemilih yang sangat valid mencari elemen dengan id first dan juga memiliki kelas name. Ini adalah bug yang mudah diabaikan. Anda mungkin lebih bahagia dalam jangka panjang memilih id first-name (tanda hubung, bukan periode), sebagai gantinya.

Anda dapat menyederhanakan tugas pengembangan Anda dengan tetap berpegang teguh pada konvensi penamaan. Misalnya, jika Anda membatasi diri sepenuhnya pada karakter huruf kecil dan selalu memisahkan kata dengan tanda hubung atau garis bawah (tetapi tidak keduanya, pilih satu dan jangan pernah menggunakan yang lain), maka Anda memiliki pola yang mudah diingat. Anda tidak akan pernah bertanya-tanya "apakah itu firstName atau FirstName? "karena Anda akan selalu tahu bahwa Anda harus mengetik first_name. Lebih suka kasus unta? Kemudian batasi diri Anda untuk itu, tidak ada tanda hubung atau garis bawah, dan selalu, gunakan secara konsisten huruf besar atau huruf kecil untuk karakter pertama, jangan mencampurnya.


Masalah yang sekarang sangat tidak jelas adalah setidaknya satu browser, Netscape 6, nilai atribut id yang salah diperlakukan sebagai case-sensitive. Itu berarti jika Anda mengetik id="firstName" dalam HTML Anda (huruf kecil 'f') dan #FirstName { color: red } dalam CSS Anda (huruf besar 'F'), browser buggy itu akan gagal mengatur warna elemen menjadi merah. Pada saat pengeditan ini, April 2015, saya harap Anda tidak diminta untuk mendukung Netscape 6. Pertimbangkan ini catatan kaki sejarah.


1487
2017-09-17 01:42



Dari Spesifikasi HTML 4:

Token ID dan NAMA harus dimulai dengan huruf ([A-Za-z]) dan dapat diikuti oleh sejumlah huruf, angka ([0-9]), tanda hubung ("-"), garis bawah ("_") , titik dua (":"), dan titik (".").

Kesalahan umum adalah menggunakan ID yang dimulai dengan digit.


194
2017-09-16 09:09



Anda dapat secara teknis menggunakan titik dua dan periode dalam atribut id / nama, tetapi saya akan sangat menyarankan menghindari keduanya.

Dalam CSS (dan beberapa pustaka JavaScript seperti jQuery), baik periode dan titik dua memiliki arti khusus dan Anda akan mengalami masalah jika Anda tidak berhati-hati. Periode adalah pemilih kelas dan titik dua adalah pseudo-selectors (misalnya., ": Hover" untuk elemen ketika mouse di atasnya).

Jika Anda memberi elemen id "my.cool:thing", pemilih CSS Anda akan terlihat seperti ini:

#my.cool:thing { ... /* some rules */ ... }

Yang benar-benar mengatakan, "elemen dengan id dari 'my', kelas 'cool' dan 'thing' pseudo-selector" dalam CSS-speak.

Tetap pada A-Z dalam hal apa pun, angka, setrip bawah, dan tanda hubung. Dan seperti dikatakan di atas, pastikan id Anda unik.

Itu harus menjadi perhatian pertama Anda.


130
2017-09-16 14:01



jQuery tidak menangani nama ID yang valid. Anda hanya perlu melepaskan metacharacters (yaitu, titik, titik koma, tanda kurung siku ...). Ini seperti mengatakan bahwa JavaScript memiliki masalah dengan tanda kutip hanya karena Anda tidak dapat menulis

var name = 'O'Hara';

Selectors di jQuery API (lihat catatan bawah)


60
2018-01-10 20:40



Sebenarnya itu harus cocok

[A-Za-z][-A-Za-z0-9_:.]*

Tetapi jquery tampaknya memiliki masalah dengan titik dua sehingga mungkin lebih baik untuk menghindari mereka.


51
2017-09-16 09:11



HTML5:

menghilangkan pembatasan tambahan pada atribut id Lihat disini. Satu-satunya persyaratan yang tersisa (selain menjadi unik dalam dokumen) adalah:

  1. nilainya harus mengandung setidaknya satu karakter (tidak boleh kosong)
  2. tidak boleh berisi karakter spasi apa pun.

PRE-HTML5:

ID harus cocok:

[A-Za-z][-A-Za-z0-9_:.]*
  1. Harus Mulai dengan karakter A-Z atau a-z
  2. Mungkin mengandung - (tanda penghubung), _ (menggarisbawahi), : (titik dua) dan . (periode)

tetapi orang harus menghindari : dan . beacause:

Misalnya, ID dapat diberi label "ab: c" dan direferensikan dalam style sheet sebagai #ab: c tetapi juga sebagai id untuk elemen, itu bisa berarti id "a", kelas "b", pseudo- pemilih "c". Terbaik untuk menghindari kebingungan dan menjauh dari penggunaan. dan: semuanya.


39
2018-01-18 07:09



HTML5: Nilai yang Diizinkan untuk Atribut ID & Kelas

Pada HTML5, satu-satunya batasan pada nilai ID adalah:

  1. harus unik dalam dokumen
  2. tidak boleh mengandung karakter spasi apa pun
  3. harus mengandung setidaknya satu karakter

Aturan serupa berlaku untuk kelas (kecuali untuk keunikan, tentu saja).

Jadi nilainya dapat berupa semua digit, hanya satu digit, hanya karakter tanda baca, termasuk karakter khusus, apa pun. Tidak ada spasi. Ini sangat berbeda dari HTML4.

Dalam HTML 4, nilai-nilai ID harus dimulai dengan huruf, yang kemudian dapat diikuti hanya dengan huruf, angka, tanda hubung, garis bawah, titik dua dan titik.

Dalam HTML5 ini valid:

<div id="999"> ... </div>
<div id="#%LV-||"> ... </div>
<div id="____V"> ... </div>
<div id="⌘⌥"> ... </div>
<div id=""> ... </div>
<div id="{}"> ... </div>
<div id=""> ... </div>
<div id="♤₩¤☆€~¥"> ... </div>

Ingatlah bahwa menggunakan angka, tanda baca, atau karakter khusus dalam nilai ID dapat menyebabkan masalah dalam konteks lain (mis., CSS, JavaScript, regex).

Misalnya, ID berikut ini valid dalam HTML5:

<div id="9lions"> ... </div>

Namun, itu tidak valid dalam CSS:

Dari spesifikasi CSS2.1:

4.1.3 Karakter dan case

Di CSS, pengidentifikasi (termasuk nama elemen, kelas, dan ID di   penyeleksi) hanya boleh memuat karakter [a-zA-Z0-9] dan ISO 10646   karakter U + 00A0 dan lebih tinggi, ditambah tanda hubung (-) dan garis bawah   (_); mereka tidak dapat memulai dengan digit, dua tanda hubung, atau tanda hubung   diikuti dengan digit.

Dalam banyak kasus, Anda mungkin dapat melepaskan karakter dalam konteks di mana mereka memiliki batasan atau makna khusus.


Referensi W3C

HTML5

3.2.5.1 The id   atribut

Itu id atribut menentukan identifier unik elemennya (ID).

Nilai harus unik di antara semua ID di rumah elemen   subtree dan harus mengandung setidaknya satu karakter. Nilai tidak boleh   mengandung karakter spasi apa pun.

Catatan: Tidak ada batasan lain tentang bentuk apa yang bisa diambil oleh ID; di   khususnya, ID dapat terdiri dari hanya digit, mulai dengan angka, mulai   dengan garis bawah, terdiri dari hanya tanda baca, dll.

3.2.5.7 The class   atribut

Atribut, jika ditentukan, harus memiliki nilai yang satu set   token yang terpisah dari ruang yang mewakili berbagai kelas yang   elemen milik.

Kelas yang diberikan elemen HTML untuknya terdiri dari semua   kelas kembali ketika nilai atribut class terbagi pada   spasi. (Duplikat diabaikan.)

Tidak ada batasan tambahan pada token yang dapat digunakan oleh penulis   atribut class, tetapi penulis didorong untuk menggunakan nilai itu   menggambarkan sifat konten, bukan nilai yang menggambarkan   presentasi yang diinginkan dari konten.


33
2017-08-02 15:53