pengembangan-web-mp-pd.com

Apa nilai yang valid untuk atribut id dalam HTML?

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

1854
Mr Shark

Untuk HTML 4 , jawabannya secara teknis:

Token ID dan NAME harus dimulai dengan huruf ([A-Za-z]) dan dapat diikuti oleh sejumlah huruf, digit ([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 tidak boleh mengandung karakter spasi apa pun.

Atribut id peka huruf besar-kecil di XHTML .

Sebagai hal yang murni praktis, Anda mungkin ingin menghindari karakter tertentu. Periode, titik dua, dan '#' memiliki arti khusus dalam penyeleksi CSS, jadi Anda harus melarikan diri dari karakter tersebut menggunakan backslash di CSS atau double backslash di a string pemilih dilewatkan ke jQuery . Pikirkan tentang seberapa sering Anda harus melarikan diri karakter dalam lembar gaya atau kode sebelum Anda menjadi gila dengan titik dan titik dua dalam id.

Misalnya, deklarasi HTML <div id="first.name"></div> valid. Anda dapat memilih elemen dalam CSS sebagai #first\.name dan di jQuery seperti: $('#first\\.name'). Tetapi jika Anda lupa backslash, $('#first.name'), Anda akan memiliki pemilih yang valid untuk 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 daripada tanda titik), sebagai gantinya.

Anda dapat menyederhanakan tugas pengembangan Anda dengan tetap berpegang 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 gunakan 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 kasing unta? Kemudian batasi diri Anda untuk itu, tanpa tanda hubung atau garis bawah, dan selalu, secara konsisten menggunakan huruf besar atau huruf kecil untuk karakter pertama, jangan campur.


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

1584
dgvid

Dari spesifikasi HTML 4 :

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

Kesalahan umum adalah menggunakan ID yang dimulai dengan angka.

211
Peter Hilton

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

Dalam CSS (dan beberapa perpustakaan JavaScript seperti jQuery), periode dan titik dua memiliki arti khusus dan Anda akan mengalami masalah jika Anda tidak hati-hati. Periode adalah pemilih kelas dan titik dua adalah pemilih-semu (mis., ": 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 'my', kelas 'cool' dan 'thing' pseudo-selector" di CSS-speak.

Tetap berpegang pada A-Z dari semua case, angka, garis bawah dan tanda hubung. Dan seperti yang dikatakan di atas, pastikan id Anda unik.

Itu harus menjadi perhatian pertama Anda.

145
Michael Thompson

jQuery does menangani nama ID yang valid. Anda hanya perlu melepaskan karakter meta (mis., Titik, titik koma, tanda kurung kotak ...). Ini seperti mengatakan bahwa JavaScript memiliki masalah dengan kutipan hanya karena Anda tidak dapat menulis

var name = 'O'Hara';

Selektor di jQuery API (lihat catatan bawah)

63

Harus cocok

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

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

60
Mr Shark

HTML5:

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

  1. nilai harus mengandung setidaknya satu karakter (tidak boleh kosong)
  2. tidak dapat berisi karakter ruang 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. Dapat mengandung - (tanda hubung), _ (garis bawah), : (titik dua) dan . (titik)

tetapi orang harus menghindari : dan . beacause:

Misalnya, ID dapat diberi label "ab: c" dan dirujuk 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.

52
Zaheer Ahmed

HTML5: Nilai yang Diizinkan untuk ID & Atribut 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 bisa semua digit, hanya satu digit, hanya karakter tanda baca, termasuk karakter khusus, apa pun. Hanya tanpa spasi putih. Ini sangat berbeda dari HTML4.

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

Di 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 di CSS:

Dari spec CSS2.1:

4.1.3 Karakter dan huruf besar

Dalam CSS, pengidentifikasi (termasuk nama elemen, kelas, dan ID dalam pemilih) hanya dapat berisi 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 angka, dua tanda hubung, atau tanda hubung diikuti dengan angka.

Dalam kebanyakan kasus, Anda mungkin dapat melarikan diri karakter dalam konteks di mana mereka memiliki batasan atau makna khusus.


Referensi W3C

HTML5

3.2.5.1 Atribut id

Atribut id menentukan pengidentifikasi unik (ID) elemennya.

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

Catatan: Tidak ada batasan lain pada formulir apa yang dapat diambil ID; khususnya, ID dapat terdiri dari hanya digit, mulai dengan digit, mulai dengan garis bawah, terdiri dari hanya tanda baca, dll.

3.2.5.7 Atribut class

Atribut, jika ditentukan, harus memiliki nilai yang merupakan set token yang dipisahkan ruang yang mewakili berbagai kelas yang dimiliki elemen tersebut.

Kelas-kelas yang telah ditetapkan oleh elemen HTML terdiri dari semua kelas yang dikembalikan ketika nilai atribut kelas dibagi pada spasi. (Duplikat diabaikan.)

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

47
Michael_B

Dalam praktiknya banyak situs menggunakan atribut id yang dimulai dengan angka, meskipun ini secara teknis bukan HTML yang valid.

Draft spesifikasi HTML 5 melonggarkan aturan untuk atribut id dan name: mereka sekarang hanyalah string yang tidak jelas yang tidak boleh berisi spasi.

32
pdc

Tanda hubung, garis bawah, titik, titik dua, angka dan huruf semuanya valid untuk digunakan dengan CSS dan JQuery. Berikut ini harus berfungsi tetapi harus unik di seluruh halaman dan juga harus dimulai dengan huruf [A-Za-z].

Bekerja dengan titik dua dan titik membutuhkan sedikit lebih banyak pekerjaan tetapi Anda dapat melakukannya seperti yang ditunjukkan contoh berikut.

<html>
<head>
<title>Cake</title>
<style type="text/css">
    #i\.Really\.Like\.Cake {
        color: green;
    }
    #i\:Really\:Like\:Cake {
        color: blue;
    }
</style>
</head>
<body>
    <div id="i.Really.Like.Cake">Cake</div>
    <div id="testResultPeriod"></div>

    <div id="i:Really:Like:Cake">Cake</div>
    <div id="testResultColon"></div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(function() {
            var testPeriod = $("#i\\.Really\\.Like\\.Cake");
            $("#testResultPeriod").html("found " + testPeriod.length + " result.");

            var testColon = $("#i\\:Really\\:Like\\:Cake");
            $("#testResultColon").html("found " + testColon.length + " result.");
        });
    </script>
</body>
</html>
29
blacksun1

HTML5

Perlu diingat bahwa ID harus unik, yaitu. tidak boleh ada banyak elemen dalam dokumen yang memiliki nilai id yang sama.

Aturan tentang konten ID dalam HTML5 adalah (selain unik):

This attribute's value must not contain white spaces. [...] 
Though this restriction has been lifted in HTML 5, 
an ID should start with a letter for compatibility.

Ini adalah W3 spec tentang ID (dari MDN):

Any string, with the following restrictions:
must be at least one character long
must not contain any space characters
Previous versions of HTML placed greater restrictions on the content of ID values 
(for example, they did not permit ID values to begin with a number).

Info lebih lanjut:

  • W3 - atribut global (id)
  • MDN atribute (id)
23
Sergio

Untuk mereferensikan id dengan titik di dalamnya, Anda perlu menggunakan backslash. Tidak yakin apakah itu sama dengan tanda hubung atau garis bawah. Misalnya: HTML

<div id="maintenance.instrumentNumber">############0218</div>

CSS

#maintenance\.instrumentNumber{Word-wrap:break-Word;}
17
Anthony

Juga, jangan pernah lupa bahwa ID itu unik. Setelah digunakan, nilai ID mungkin tidak muncul lagi di manapun di dalam dokumen.

Anda mungkin memiliki banyak ID, tetapi semua harus memiliki nilai unik.

Di sisi lain, ada elemen kelas. Sama seperti ID, ini dapat muncul berkali-kali, tetapi nilainya dapat digunakan berulang kali.

14
Vordreller

Dari spesifikasi HTML 4 ...

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

EDIT: d'oh! Terkalahkan tombol lagi!

14
Steve Morgan

Pengidentifikasi unik untuk elemen.

Tidak boleh ada banyak elemen dalam dokumen yang memiliki nilai id yang sama.

String apa pun, dengan batasan berikut:

  1. minimal harus satu karakter
  2. tidak boleh mengandung karakter spasi:

    • U + 0020 SPACE
    • U + 0009 TABULASI KARAKTER (tab)
    • U + 000A LINE FEED (LF)
    • U + 000C FORMULIR BIAYA (FF)
    • PENGEMBALIAN KEMBALI CARRIAGE (CR)

Menggunakan karakter kecuali ASCII letters and digits, '_', '-' and '.' dapat menyebabkan masalah kompatibilitas, karena tidak diizinkan dalam HTML 4. Meskipun pembatasan ini telah dicabut dalam HTML 5, ID harus dimulai dengan huruf untuk kompatibilitas.

11
Bhavin Solanki

Tampaknya meskipun titik dua (:) dan titik (.) Valid dalam spesifikasi HTML, mereka tidak valid sebagai pemilih id di CSS jadi mungkin sebaiknya dihindari jika Anda bermaksud menggunakannya untuk tujuan itu.

9
lstg

untuk HTML5

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

Setidaknya satu karakter, tanpa spasi.

Ini membuka pintu untuk kasus penggunaan yang valid seperti menggunakan karakter beraksen. Ini juga memberi kami lebih banyak amunisi untuk menembak diri sendiri, karena Anda sekarang dapat menggunakan nilai id yang akan menyebabkan masalah dengan CSS dan JavaScript kecuali Anda benar-benar berhati-hati.

Setiap Nilai alfa-numerik dan " - " dan " _ " valid. Tetapi, Anda harus mulai nama id dengan karakter apa pun antara A-Z atau a-z .

7
Tazwar Utshas
  1. ID paling cocok untuk penamaan bagian tata letak Anda sehingga tidak harus memberikan nama yang sama untuk ID dan kelas
  2. ID memungkinkan karakter alfanumerik dan khusus
  3. tetapi hindari penggunaan simbol # : . * !
  4. ruang tidak diizinkan
  5. tidak dimulai dengan angka atau tanda hubung diikuti dengan angka
  6. hal - hal sensitif
  7. menggunakan pemilih ID lebih cepat daripada menggunakan pemilih kelas
  8. gunakan tanda hubung "-" (garis bawah "_" juga bisa digunakan tetapi tidak baik untuk seo) untuk kelas CSS panjang atau nama aturan ID
  9. Jika aturan memiliki pemilih ID sebagai pemilih utamanya, jangan tambahkan nama tag ke aturan. Karena ID unik, menambahkan nama tag akan memperlambat proses pencocokan tanpa perlu.
  10. Dalam HTML5, atribut id dapat digunakan pada elemen HTML apa pun dan Di HTML 4.01, atribut id tidak dapat digunakan dengan: <base>, <head>, <html>, <meta>, <param>, <script>, <style>, and <title>.

Tanpa spasi, harus dimulai dengan setidaknya char dari a ke z dan 0 hingga 9.

5
Wembo Mulumba