Apa nilai yang valid untuk atribut id dalam HTML?

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

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.

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.

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.

jQuery tidak menangani nama ID yang valid. Anda hanya perlu keluar dari karakter meta (yaitu, titik, titik koma, tanda kurung ...). 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)

Harus cocok

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

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

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.

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.

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.

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>

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:

• W3 - atribut global (id)
• Atribut MDN (id)

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;}

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!

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.

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.

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

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.

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

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

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

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.

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

itu digunakan untuk HTML5 ...

kami dapat menambahkan id dengan tag apa pun.

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

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

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.