HTML'deki id niteliği için geçerli değerler nelerdir?

HTML 4 spesifikasyonundan :

Kimlik ve NAME belirteçleri, bir harfle ([A-Za-z]) başlamalı ve bunu, herhangi bir sayıda harf, rakam ([0-9]), kısa çizgi ("-"), alt çizgi ("_") izleyebilir , iki nokta üst üste (":") ve süreleri (".").

Yaygın bir hata, rakamla başlayan bir kimlik kullanmaktır.

Teknik olarak virgül ve dönemleri kimlik/ad özniteliklerinde kullanabilirsiniz, ancak her ikisinden de kaçınmanızı şiddetle tavsiye ederim.

CSS'de (ve jQuery gibi çeşitli JavaScript kitaplıklarında), hem dönem hem de iki nokta özel bir anlama sahiptir ve dikkatli olmazsanız sorun yaşayabilirsiniz. Dönemler sınıf seçicileridir ve sütunlar sözde seçicilerdir (örn., ": Farenin üzerindeyken bir öğe için gezdir").

Bir elemana "my.cool:thing" kimliğini verirseniz, CSS seçiciniz şöyle görünecektir:

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

Gerçekten de, "CSS-konuşmasında" "benim" kimliğine sahip bir eleman, "cool" bir sınıf ve "şey" sözde seçici ".

Herhangi bir durum, sayılar, alt çizgiler ve kısa çizgilerden oluşan A-Z'ye yapıştırın. Yukarıda da belirtildiği gibi, kimliklerinizin benzersiz olduğundan emin olun.

İlk endişen bu olmalı.

jQuery does geçerli bir kimlik adı kullanır. Sadece meta karakterlerden kaçmanız gerekir (yani noktalar, noktalı virgüller, köşeli parantezler ...). JavaScript’in tırnak işaretleri ile ilgili bir sorunu olduğunu söylemek gibi, çünkü yazamazsınız.

var name = 'O'Hara';

jQuery API'sindeki seçiciler (dip nota bakın)

Kesinlikle eşleşmesi gerekir

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

Ancak jquery'nin kolonlarla sorunları var gibi görünüyor, bu yüzden onlardan kaçınmak daha iyi olabilir.

HTML5:

id özniteliği üzerindeki ek kısıtlamalardan kurtulur bkz. . Geriye kalan tek gereksinimler (belgede benzersiz olmanın dışında):

1. değer en az bir karakter içermelidir (boş olamaz)
2. herhangi bir boşluk karakteri içeremez.

ÖN HTML5:

ID eşleşmelidir:

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

1. A-Z veya a-z karakterleriyle başlamalı
2. - (kısa çizgi), _ (alt çizgi), : (sütun) ve . (nokta) içerebilir

ancak bir tanesi : ve . işaretlerinden kaçınmalıdır:

Örneğin, bir kimlik "ab: c" olarak etiketlenebilir ve stil sayfasında #ab: c olarak adlandırılabilir, ancak öğenin kimliği olmasının yanı sıra "a", "b" sınıfı, sözde- seçici "c". Karışıklığı önlemek ve kullanmaktan uzak durmak en iyisidir. ve: tamamen.

HTML5: Kimlik ve Sınıf Nitelikleri için İzin Verilen Değerler

HTML5'ten itibaren, bir ID'nin değeri üzerindeki tek kısıtlamalar şunlardır:

1. belgede benzersiz olmalı
2. boşluk karakteri içermemelidir
3. en az bir karakter içermelidir

Benzer kurallar sınıflar için de geçerlidir (benzersizlik dışında elbette).

Bu nedenle, değer yalnızca bir rakam, sadece noktalama karakterleri, tüm karakterler olabilir, ne olursa olsun, özel karakterler içerebilir. Sadece boşluk yok. Bu HTML4'ten çok farklı.

HTML 4'te, ID değerleri bir harfle başlamalıdır; bu durumda sadece harfler, rakamlar, kısa çizgiler, alt çizgiler, iki nokta üst üste ve noktalarla izlenebilir.

HTML5'te bunlar geçerlidir:

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

Kimlik değerinde sayı, noktalama işareti veya özel karakterlerin kullanılmasının diğer içeriklerde (örneğin, CSS, JavaScript, regex) sorunlara neden olabileceğini unutmayın.

Örneğin, aşağıdaki kimlik HTML5'te geçerlidir:

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

Ancak, CSS'de geçersiz:

CSS2.1 spesifikasyonundan:

4.1.3 Karakterler ve durum

CSS'de, tanımlayıcılar (seçicilerin öğe adları, sınıfları ve kimlikleri dahil) yalnızca [a-zA-Z0-9] ve ISO 10646 karakterleri U + 00A0 ve daha yüksek karakterleri, artı tire ( -) ve alt çizgi (_);bir rakam, iki tire veya bir rakamdan sonra bir rakam ile başlayamazlar.

Çoğu durumda karakterlerden, kısıtlamaları veya özel anlamları olan bağlamlarda kaçabilirsiniz.

W3C Referansları

HTML5

3.2.5.1 id niteliği

id niteliği, öğesinin benzersiz tanımlayıcısını (ID) belirtir.

Değer, öğenin ana alt ağacındaki tüm kimlikler arasında benzersiz olmalı ve en az bir karakter içermelidir. Değer boşluk karakterleri içermemelidir.

Not: Bir kimliğin alabileceği form ile ilgili başka herhangi bir kısıtlama yoktur; özellikle, ID'ler sadece rakamlardan oluşabilir, rakamla başlar, alt çizgi ile başlar, sadece noktalama işaretlerinden oluşur.

3.2.5.7 class niteliği

Özelliğin, belirtilmişse, öğenin ait olduğu çeşitli sınıfları temsil eden boşlukla ayrılmış simgeler kümesi olan bir değeri olması gerekir.

Bir HTML öğesinin kendisine atadığı sınıflar, sınıf niteliğinin değeri boşluklarda bölündüğünde döndürülen tüm sınıflardan oluşur. (Çoğaltmalar yoksayılır.)

Sınıf özniteliğinde yazarların kullanabileceği belirteçler üzerinde ek bir kısıtlama yoktur, ancak yazarların içeriğin istenen sunumunu tanımlayan değerler yerine içeriğin yapısını tanımlayan değerleri kullanması teşvik edilir.

Uygulamada birçok site, teknik olarak geçerli bir HTML olmasa da, sayılarla başlayan id niteliklerini kullanır.

HTML 5 taslak özelliği , id ve name niteliklerinin kurallarını gevşetir: şimdi yalnızca boşluk içeremeyen opak dizelerdir.

Tire, alt çizgi, nokta, nokta, nokta ve rakamların tümü CSS ve JQuery ile kullanım için geçerlidir. Aşağıdakiler çalışmalı, ancak sayfa boyunca benzersiz olmalı ve ayrıca [A-Za-z] harfiyle başlamalıdır.

İki nokta ve periyotlarla çalışmak biraz daha fazla çalışmaya ihtiyaç duyar ancak aşağıdaki örnekte gösterildiği gibi yapabilirsiniz.

<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

Yani, kimliğin benzersiz olması gerektiğini unutmayın. Bir belgede aynı kimlik değerine sahip birden fazla öğe olmamalıdır.

HTML5'teki ID içeriğiyle ilgili kurallar (benzersiz olmanın dışında):

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.

Bu, ID (från MDN) hakkında W3 spec şeklindedir:

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

Daha fazla bilgi:

• W3 - global özellikler (id)
• MDN özniteliği (id)

İçinde bir süre olan bir kimliği referans almak için bir ters eğik çizgi kullanmanız gerekir. Tire veya alt çizgi için aynı olup olmadığından emin değil. Örneğin: HTML

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

CSS

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

Ayrıca, bir kimliğin benzersiz olduğunu asla unutmayın. Bir kez kullanıldığında, kimlik değeri belgede hiçbir yerde tekrar görünmeyebilir.

Çok sayıda kimliğiniz olabilir, ancak hepsinin benzersiz bir değeri olması gerekir.

Öte yandan, sınıf elemanı vardır. Tıpkı ID gibi, birçok kez görünebilir, ancak değer tekrar tekrar kullanılabilir.

HTML 4 özelliklerinden ...

Kimlik ve NAME belirteçleri, bir harfle ([A-Za-z]) başlamalı ve bunu, herhangi bir sayıda harf, rakam ([0-9]), kısa çizgi ("-"), alt çizgi ("_") izleyebilir , iki nokta üst üste (":") ve süreleri (".").

EDIT: d'oh! Tekrar düğmeye bas!

Öğe için benzersiz bir tanımlayıcı.

Bir belgede aynı kimlik değerine sahip birden fazla öğe olmamalıdır.

Aşağıdaki kısıtlamalara sahip herhangi bir dize:

1. en az bir karakter uzunluğunda olmalı

2. boşluk karakteri içermemelidir:

   • U + 0020 UZAY
   • U + 0009 KARAKTER TABLOSU (sekme)
   • U + 000A HAT YEMİ (LF)
   • U + 000C FORM YEMİ (FF)
   • U + 000D TAŞIMA İADESİ (CR)

ASCII letters and digits, '_', '-' and '.' dışında karakterlerin kullanılması, HTML 4'da izin vermediklerinden uyumluluk sorunlarına neden olabilir. Bu kısıtlama HTML 5 ile kaldırılmış olsa da, bir kimlik uyumluluğu için bir harfle başlamalıdır.

Görünüşe göre, her ne kadar (> ve nokta (.)) Noktalarında HTML spesifikasyonunda geçerli olsalar da, CSS dizinlerinde kimlik seçicileri olarak geçersiz oldukları için, bu yüzden onları bu amaç için kullanacaksanız, en iyisi kaçınılmalıdır.

HTML5 için

Değer, öğenin ana alt ağacındaki tüm kimlikler arasında benzersiz olmalı ve en az bir karakter içermelidir. Değer boşluk karakterleri içermemelidir.

En az bir karakter, boşluksuz.

Bu, aksanlı karakterler kullanmak gibi geçerli kullanım durumları için kapıyı açar. Ayrıca, kendimizi ayağımızla vurmamız için bize daha fazla mermi veriyor, çünkü gerçekten dikkatli olmadığınız sürece, hem CSS hem de JavaScript ile sorunlara neden olacak id değerleri kullanabilirsiniz.

Herhangi bir Alfa sayısal değeri ve " - " ve " _ " geçerlidir. Ancak, kimlik adını ile A-Z veya a-z arasındaki herhangi bir karakterle başlatmalısınız.

1. Kimlikler, mizanpajınızın bölümlerini adlandırmak için en uygunudur, bu nedenle kimlik ve sınıf için aynı adı vermemelidir
2. Kimlik, alfasayısal ve özel karakterlere izin verir
3. ancak # : . * ! sembollerini kullanmaktan kaçının
4. izin verilen boşluklar
5. sayılarla veya kısa çizgi ile başlamaz, ardından rakam
6. harfe duyarlı
7. kimlik seçici kullanmak, sınıf seçici kullanmaktan daha hızlıdır
8. uzun CSS sınıfı veya Id kuralı adları için kısa çizgi "-" (alt çizgi "_" de kullanabilir ancak seo için iyi değil) kullanın
9. Bir kuralın anahtar seçicisi olarak bir kimlik seçicisi varsa, etiket adını kurala eklemeyin. Kimlikler benzersiz olduğundan, bir etiket adı eklemek eşleştirme işlemini gereksiz yere yavaşlatır.
10. HTML5'te, id niteliği herhangi bir HTML öğesinde kullanılabilir ve HTML 4.01'de id niteliği ile kullanılamaz: <base>, <head>, <html>, <meta>, <param>, <script>, <style>, and <title>.

Boşluk olmamalıdır, en az bir ile z ve 0 ile 9 arasında bir karakterle başlamalıdır.

değerler şunlar olabilir: [a-z], [A-Z], [0-9], [* _: -]

hTML5 için kullanmaktır ...

herhangi bir etiketle kimlik ekleyebiliriz.

HTML’de

ID ile başlamalıdır {AZ} veya {az} ekleyebilirsin Rakamlar, periyot, kısa çizgi, alt çizgi, virgüller .

Örneğin:

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

Fakat Kolonlarla Kimlik Yapabilseniz bile (:) veya nokta (.) Bu kimliği Seçici olarak kullanmak CSS için zordur. Esas olarak Sahte unsurları kullanmak istediğinizde (: önce,: after).

Ayrıca JS içinde bu kimlikleri seçmek zordur. Bu yüzden, etrafındaki birçok geliştirici tarafından tercih edilen ilk dört kimliği ve son ikisini de kullanabilmeniz için gerekliyse kullanmalısınız.