Apa nilai yang valid untuk atribut id dalam HTML?


2015

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


96
Ini berbeda antara HTML5 dan versi spesifikasi sebelumnya. Saya jelaskan di sini: mathiasbynens.be/notes/html5-id-class
Mathias Bynens

5
Saya perhatikan SharePoint 2010 menetapkan nilai seperti ini - {8CC7EF38-31D8-4786-8C20-7E6D56E49AE2} - {E60CE5E2-6E64-4350-A884-654B72DA5A53} untuk tabel yang dihasilkan secara dinamis dalam Komponen Web & halaman yang berisi nilai ID dari semacam itu tidak pecah di salah satu browser populer. Berhubungan dengan nilai-nilai ID seperti itu melalui JavaScript sulit - mvark.blogspot.in/2012/07/…
mvark

3
Persyaratan HTML4 dan HTML5 untuk IDnilai sangat berbeda. Berikut adalah ikhtisar cepat dan lengkap IDaturan HTML5 : stackoverflow.com/a/31773673/3597276
Michael Benjamin

5
Harap dicatat: Melakukan seperti yang beberapa jawaban katakan dan menggunakan tanda titik ( **.**)dengan jQuery akan membuat Anda mengalami sedikit masalah, misalnya, menggunakan <input id="me.name" />dan kemudian $("#me.name").val()akan menyebabkan jQuery mencari <me>tag dengan kelas .name, yang tidak diinginkan oleh siapa pun) sungguh!
Can O 'Spam

3
@SamSwift 웃 Tidak, Anda hanya perlu melarikan diri dari karakter khusus seperti yang dikatakan dokumen . Silakan periksa demo online ini .
Álvaro González

Jawaban:


1702

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.

Atribut id sensitif huruf dalam XHTML .

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

Misalnya, deklarasi HTML <div id="first.name"></div>valid. Anda dapat memilih elemen itu di CSS sebagai #first\.namedan di jQuery seperti ini: $('#first\\.name').Tetapi jika Anda lupa backslash $('#first.name'),, Anda akan memiliki pemilih yang valid untuk mencari elemen dengan id firstdan juga memiliki kelas name. Ini adalah bug yang mudah diabaikan. Anda mungkin lebih bahagia dalam jangka panjang memilih id first-name(tanda hubung daripada 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 firstNameatau tidak 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, memperlakukan nilai atribut id secara salah sebagai case-sensitive . Itu berarti bahwa jika Anda mengetikkan id="firstName"HTML (huruf kecil 'f') dan #FirstName { color: red }CSS (huruf besar 'F'), peramban 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.


78
Perhatikan bahwa kelas dan id atribut yang case-sensitive dalam XHTML, semua atribut lainnya tidak. Eric Meyer menyebutkan ini dalam lokakarya CSS yang saya hadiri.
John Topley

31
Perhatikan juga bahwa jika Anda mencoba untuk menulis aturan CSS untuk menargetkan elemen dengan ID, dan ID makhluk dengan nomor, itu tidak akan berfungsi. Kekecewaan!
Zack The Human

55
Adapun '.' atau ':' dalam ID menggunakan jQuery, lihat FAQ jQuery . Ini berisi fungsi kecil yang melakukan pelarian yang diperlukan.
Wolfram

7
The idatribut [ w3.org/TR/html4/struct/global.html#adef-id](case sensitif di HTML4) dan harus dimulai dengan huruf (terbatas pada A sampai Z). Perhatikan juga bahwa contoh Anda seharusnya tidak membuat warna teks elemen Anda menjadi merah karena CSS Anda merujuk ke elemen dengan kelas FirstNamebukan untuk Anda id.
Augustus Kling

5
Kesalahan yang ditunjukkan Augustus masih ada. Dalam contoh Anda, jika Anda memiliki id="firstName"HTML 4 atau HTML 5 dan #FirstName { color: red }CSS, hanya browser buggy yang akan mengatur warna elemen menjadi merah.
Stephen Booher

221

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.


20
Perhatikan bahwa HTML5 memungkinkan jauh lebih kemudian HTML4 lihat misalnya 456bereastreet.com/archive/201011/... dan w3.org/TR/html5/elements.html#the-id-attribute
Mr Shark

IE6 tidak mendukung ID yang dimulai dengan garis bawah, tetapi sudah mati.
doc_id

2
@rahmanisback mengenai IE6, orang akan berpikir begitu, tapi saya sedang menyelesaikan proposal sekarang untuk bank dan mereka bersikeras bahwa aplikasi apa pun yang dikembangkan vendor berjalan di IE6. Ini untuk 30.000 pengguna. Heck, jika kita bisa membuat mereka memperbarui browser mereka di semua desktop itu, itu mungkin hanya membantu tingkat pengangguran.
Karl

2
@ Karl Maaf mendengar ini. Lakukan semua upaya Anda untuk memperingatkan tentang masalah keamanan IE6. Namun IE7 akan segera menjadi IE6 baru, jadi ya tampaknya nasib kita di industri ini untuk memperbaiki kesalahan MS masa lalu.
doc_id

@ MrShark Tautan kedua rusak; Tautan baru
SWdV

155

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 dari 'saya', kelas 'keren' dan 'benda' pemilih-semu" di CSS-spoke.

Menempel AZ kasus apa pun, angka, garis bawah dan tanda hubung. Dan seperti yang dikatakan di atas, pastikan id Anda unik.

Itu harus menjadi perhatian pertama Anda.


21
Anda dapat menggunakan titik dua dan titik - tetapi Anda harus menghindarinya dengan menggunakan garis miring terbalik ganda, misalnya: $ ('# my \\. Cool \\: thing') atau keluar dari variabel: $ ('#' + id.replace (/ \ ./, '\\.'). ganti (/ \: /, '\\:')) groups.google.com/group/jquery-en/browse_thread/thread/…
joeformd

2
Mengapa bukan angka; mengapa hanya AZ? Angka adalah ID yang sangat berguna ketika merujuk ke elemen yang terkait dengan data yang dikunci dengan angka, selama Anda tidak memulai dengan angka tersebut.
cori

4
Hanya FYI, tanda hubung secara teknis tanda hubung. Tanda minus tidak dalam rangkaian karakter ASCII. en.wikipedia.org/wiki/Plus_and_minus_signs#Character_codes
Anton Strogonoff

4
Jika Anda memiliki karakter ini ( ., :) dalam id, dan tidak dapat menghapusnya (batuk ... Sharepoint), Anda dapat menyiasatinya dalam CSS dengan pemilih atribut alih-alih pemilih id, misalnya [id='my.cool:thing'], namun pemilih ini akan memiliki kekhususan yang lebih rendah daripada pemilih id, yang dapat menyebabkan masalah lain.
Faust

2
Tua, saya tahu, tetapi diperbarui untuk memasukkan angka dan backpedal pada tanda hubung
Michael Thompson


66

Harus cocok

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

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


2
Atau sebagai alternatif: "jadi mungkin lebih baik menghindari jquery". ;)
domsson

59

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 spasi apa pun.

PRE-HTML5:

ID harus cocok:

[A-Za-z][-A-Za-z0-9_:.]*
  1. Harus Mulai dengan karakter AZ atau az
  2. Dapat mengandung -(tanda hubung), _(garis bawah), :(titik dua) dan .(titik)

tetapi orang harus menghindari :dan karena .:

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 tinggal jauh dari menggunakan. dan: semuanya.


57

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. Ini sangat berbeda dari HTML4.

Dalam HTML 4, nilai ID harus dimulai dengan huruf, yang kemudian hanya dapat diikuti oleh 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 (misalnya, CSS, JavaScript, regex).

Misalnya, ID berikut ini valid dalam HTML5:

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

Namun, itu tidak valid dalam CSS:

Dari spec CSS2.1:

4.1.3 Karakter dan huruf besar-kecil

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 dengan tanda hubung (-) dan garis bawah ( _); mereka tidak bisa mulai dengan angka, dua tanda hubung, atau tanda hubung diikuti oleh 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 id Atribut

The idAtribut menentukan identifier unik elemen-nya (ID).

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 class Atribut

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

Kelas yang 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 kelas, tetapi penulis didorong untuk menggunakan nilai yang menggambarkan sifat konten, bukan nilai yang menjelaskan presentasi konten yang diinginkan.


34

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

The HTML 5 spesifikasi draft mengendur aturan untuk iddan nameatribut: mereka sekarang string hanya buram yang tidak dapat berisi spasi.


32

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>

25

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 spesifikasi W3 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:


18

Untuk referensi id dengan periode di dalamnya Anda harus menggunakan backslash. Tidak yakin apakah itu sama dengan tanda hubung atau garis bawah. Sebagai contoh: HTML

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

CSS

#maintenance\.instrumentNumber{word-wrap:break-word;}

3
Tanda hubung dan garis bawah biasanya tidak perlu diloloskan. Namun, pengecualian untuk ini adalah jika tanda hubung muncul di awal pengidentifikasi dan diikuti oleh tanda hubung lain (mis. \--abc) Atau digit (mis. \-123).
MrWhite

16

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!


16

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.


12

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 masuk HTML 4. Meskipun pembatasan ini telah dicabut HTML 5, ID harus dimulai dengan surat untuk kompatibilitas.



10

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.


9
  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. tapi 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. Di 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>.

"garis bawah juga dapat digunakan tetapi tidak baik untuk seo": Sejak kapan mesin pencari tertarik pada kelas CSS atau nama id?
Nick Rice

9

Nilai alfa-numerik dan " - " dan " _ " apa pun yang valid. Tapi, Anda harus memulai nama id dengan karakter apa pun antara AZ atau az .


6

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


4

Dalam HTML

ID harus dimulai dengan {AZ} atau {az} Anda dapat Menambahkan Digit, titik, tanda hubung, garis bawah, titik dua.

Sebagai contoh:

<span id="testID2"></span>
<span id="test-ID2"></span>
<span id="test_ID2"></span>
<span id="test:ID2"></span>
<span id="test.ID2"></span>

Tetapi Meskipun Anda Dapat Membuat ID dengan Colons (:) atau titik (.) Sulit bagi CSS untuk menggunakan ID ini sebagai Selector. Terutama ketika Anda ingin Menggunakan elemen Pseudo (: sebelum,: setelah).

Juga di JS , Sulit untuk memilih ID ini. Jadi, Anda harus menggunakan empat ID pertama Seperti yang disukai oleh banyak pengembang di sekitar dan jika perlu daripada Anda dapat menggunakan dua ID terakhir juga.


4

nilai dapat berupa: [az], [AZ], [0-9], [* _: -]

itu digunakan untuk HTML5 ...

kami dapat menambahkan id dengan tag apa pun.


2

Sejak ES2015 kita juga bisa menggunakan -almost- semua karakter unicode untuk ID, jika charset dokumen diatur ke UTF8.

Uji di sini: https://mothereff.in/js-variables

masukkan deskripsi gambar di sini

Baca tentang: https://mathiasbynens.be/notes/javascript-identifiers-es6

Dalam ES2015, pengidentifikasi harus dimulai dengan $, _, atau simbol apa pun dengan ID_Start properti inti yang diturunkan Unicode.

Sisa pengidentifikasi dapat berisi $, _, U + 200C lebar nol non-joiner, joiner lebar nol + U + 200D, atau simbol apa pun dengan properti inti yang diturunkan Unicode ID_Continue.

const target = document.querySelector("div").id
console.log(
   target
)
document.getElementById(target).style.backgroundColor = "black"
div {
  border: 1px black solid;
  width: 100%;
  height: 200px
}
<div id="H̹̙̦̮͉̩̗̗ͧ̇̏̊̾Eͨ͆͒̆ͮ̃͏̷̮̣̫̤̣Cͯ̂͐͏̨̛͔̦̟͈̻O̜͎͍͙͚̬̝̣̽ͮ͐͗̀ͤ̍̀͢M̴̡̲̭͍͇̼̟̯̦̉̒͠Ḛ̛̙̞̪̗ͥͤͩ̾͑̔͐ͅṮ̴̷̷̗̼͍̿̿̓̽͐H̙̙̔̄͜">


Haruskah Anda menggunakannya? Mungkin bukan ide yang bagus!

Baca tentang: https://stackoverflow.com/a/52799593/2494754


-4


huruf- > topi & angka kecil-> 0-9
karakter khusus-> ':', '-', '_', '.'

format harus dimulai dari '.' atau alfabet, diikuti oleh salah satu karakter khusus dari lebih banyak huruf atau angka. nilai bidang id tidak boleh diakhiri dengan '_'.
Juga, spasi tidak diperbolehkan, jika disediakan, mereka diperlakukan sebagai nilai yang berbeda, yang tidak valid jika atribut id.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.