HTML5'te kendi html etiketinizi oluşturmanın bir yolu var mı?


114

Gibi bir şey yaratmak istiyorum

<menu>
    <lunch>
        <dish>aaa</dish>
        <dish>bbb</dish>
    </lunch>
    <dinner>
        <dish>ccc</dish>
    </dinner>
</menu>

HTML5'te yapılabilir mi? Bununla yapabileceğimi biliyorum

<ul id="menu">
    <li>
        <ul id="lunch">
            <li class="dish">aaa</li>
            <li class="dish">bbb</li>
        </ul>
    </li>
    <li>
        <ul id="dinner">
            <li class="dish">ccc</li>
        </ul>
    </li>    
</ul>

ancak çok daha az okunabilir :(


2
ne yapmaya çalışıyorsun? peşinde olduğun şey muhtemelen divsınıf
adlarına

11
İhtiyacınıza daha iyi uyup uymadığını görmek için XML + XSLT'ye de bakabilirsiniz. Bu, bir XML belgesini (sizinki) başka bir XML belgesine (html) dönüştürmenize (xslt kısmı) izin verir
Michael Haren

1
Bunu uzun zaman önce yayınlamıştım :) getElementById () etiket adına göre kapmaya kıyasla ne kadar iyi performans gösterdiğine ve SVG gibi şeylerin anlambilimlerinin yanı sıra yepyeni bir işlevsellik kümesi sağladığına göre, özel etiketlerin benden daha az kullanımı olduğunu düşünüyorum. başlangıçta düşünmüş olabilir. Düşünceli yorumlar ve cevaplar için herkese teşekkürler!
Costa


Yanıtlar:


155

HTML5 olmasa da tarayıcılarda özel etiketleri kullanabilirsiniz (bkz. Özel öğeler HTML5 mi? Ve HTML5 spesifikasyonu ).

Adlı özel bir etiket öğesi kullanmak istediğinizi varsayalım <stack>. İşte yapmanız gerekenler ...

AŞAMA 1

CSS Stil Sayfanızdaki niteliklerini normalleştirin (css sıfırlamayı düşünün) - Örnek:

 stack{display:block;margin:0;padding:0;border:0; ... }

ADIM 2

Internet Explorer'ın eski sürümlerinde çalışmasını sağlamak için, bu komut dosyasını başlığa eklemeniz gerekir (IE'nin eski sürümlerinde çalışması gerekiyorsa önemlidir!):

 <!--[if lt IE 9]> 
 <script> document.createElement("stack"); </script>
 <![endif]-->

Ardından özel etiketinizi özgürce kullanabilirsiniz.

<stack>Overflow</stack>

Öznitelikleri de belirlemekten çekinmeyin ...

<stack id="st2" class="nice"> hello </stack>

21
Kesinlikle doğru. Harika bir fikir değil. Ama kesinlikle doğru. Sayfanızda kendi etiketlerinizden bir ordu oluşturabilir ve sadece kullanmak istediğiniz tüm etiket adlarının bir dizisini ekleyerek ve ardından her birini bir for-döngü içinde oluşturarak hepsini IE6 ile geriye doğru uyumlu hale getirebilirsiniz. , herhangi birini kullanmaya başlamadan önce sayfa başlığınızda. Html5shim ilk etapta böyle çalışır. Onları eski IE'de şekillendirmek için çaba harcamaya hazır olun. Ayrıca, bunun dahili kullanım için uygun olduğunu söylesem de, insanlara bir şeyler yapmayı gerçekten böyle öğretmek istemiyorum. Hiç.
Norguard

13
Katılıyorum, kendi etiketlerinizi yazmak gönülsüzler için değildir. İyice test ettiğinizden emin olun. Yine de bir şey söylemek istiyorum ... IE6 için CSS yazmayın. Tamamen kaynak israfı ve Microsoft'un bile onaylamadığı korkunç bir ürünün daha fazla kullanılmasını sağlar.
Timothy Perez

2
@alexwells - Chrome, FF, Safari, IE 7-9
Timothy Perez

5
Çok önemli not: Tarayıcılar özel bir öğe oluşturmayı desteklese de, resmi olarak HTML5 standardı tarafından desteklenmemektedir. Teknik olarak , özel öğeler verboten. Bunu yapabilir ve HTML'nizin güzel ve anlamsal olarak önemli görünmesini sağlayabilirsiniz, ancak yaparsanız standardı bozarsınız - umursuyorsanız. :)
Randolpho

11
Bazen ... yeni standartların belirlenmesi gerekir. ;-)
Timothy Perez

26

Bu cevaplardan pek emin değilim. Az önce okuduğum gibi: "ÖZEL ETİKETLERE HER ZAMAN HTML'DE İZİN VERİLMİŞTİR."

http://www.crockford.com/html/

Buradaki nokta, HTML'nin SGML'ye dayanıyor olmasıdır. Doküman türleri ve şemalarıyla XML'in aksine, tarayıcı bir veya iki etiketi bilmiyorsa HTML geçersiz hale gelmez. <marquee> 'yi düşünün. Bu resmi standartta olmamıştır. Dolayısıyla, onu kullanırken HTML sayfanızı "resmi olarak onaylanmamış" hale getirirken, sayfayı da bozmadı.

Sonra, Netscape'e özgü olan, HTML4'te unutulan ve yeniden keşfedilen ve şimdi HTML5'te belirtilen <keygen> var. Ayrıca artık data-XyZzz = "..." gibi tüm HTML5 etiketlerinde izin verilen özel etiket özniteliklerine sahibiz.

Dolayısıyla, kendi başınıza özel, belirtilmemiş bir biçimlendirme salatası icat etmemeniz gerekse de, HTML'de özel etiketlere sahip olmak tam olarak yasak değildir. Bununla birlikte, bir + xml İçerik Türü ile göndermek veya SVG veya MathML gibi diğer XML ad alanlarını gömmek istemiyorsanız. Bu yalnızca SGML ile sınırlı HTML için geçerlidir.


2
Ayrıca burada ilgi çekici olanlar: librador.com/2009/10/20/Styling-undefined-tag-names-in-HTML " HTML'deki herhangi bir etiket adını kullanabilirsiniz ve DOM'un bir parçası olacak ve stil oluşturulabilir."
mario

5
"Dolayısıyla, onu kullanırken html sayfanızı" resmi olarak onaylanmamış "yaptı, bu da sayfayı bozmadı." - icat ettiğiniz öğelerinizin stilini Internet Explorer'da yapmayı deneyin. Çalışmayacak. Bunun bozuk olduğunu düşünmeyebilirsiniz, ancak özel etiketlerin geçersiz olduğu ve Internet Explorer'da çalışmadığı gerçeği, "izinli" olduklarını nasıl iddia edebileceğinizi anlamıyorum.
Paul D. Waite

6
Demek istediğim, ifadesini hiçbir şeyle desteklemiyor. Douglas Crockford söylediği için doğru olduğu anlamına gelmez.
Paul D. Waite

8
Bu nedir gözlük ki: ". Bu şartname nasıl bu belgede belirtilmeyen kullanıcı ajanları kolu ... elemanlarını ... uygun tanımlamıyor [...] aşağıdaki davranış tavsiye: Bir kullanıcı aracısı bir öğe ile karşılaşırsa o tanımıyor, öğenin içeriğini oluşturmaya çalışmalıdır. [...] yazarlar ve kullanıcılar belirli hata kurtarma davranışına güvenmemelidir "- IMHO bu, Crockfor'un bir kez olsun yanlış olduğu anlamına gelir.
user123444555621

4
@Costa: HTML, etiketler için üzerinde anlaşmaya varılan bir anlamlar kümesi olduğu için kullanışlıdır. Örneğin , etiketin başka bir sayfaya bağlantı olduğunu kabul ettiğimiz için ( HTML spesifikasyonu aracılığıyla ) tarayıcılar bağlantıları tıklanabilir yapar <a>. Kendi biçimlendirme salatanızı yaratabilirsiniz, ancak bunun kendinizden başka kimseye bir anlamı olmayacaktır. Belirli bir amaç için bu iyi olabilir, ancak artık gerçekten HTML kullanmıyorsunuz.
Paul D. Waite

6

Michael'ın yorumlarda önerdiği gibi, yapmak istediğiniz şey oldukça olası, ancak adlandırmanız yanlış. "HTML 5'e etiket eklemiyorsunuz", kendi etiketlerinizle yeni bir XML belge türü oluşturuyorsunuz.

Bunu son işimde bazı projeler için yaptım. Bazı pratik tavsiyeler:

  1. "Bunları HTML 5'e eklemek" istediğinizde, gerçekten kastettiğin, sayfaların sunucu tarafında çok fazla iş yapmak zorunda kalmadan modern bir tarayıcıda doğru şekilde görüntülenmesini istediğinizi varsayıyorum. Bu, xml dosyasının üst kısmına <? Xml-stylesheet type = "text / xsl" href = "menu.xsl"?> Gibi bir "stil sayfası işleme talimatı" eklenerek gerçekleştirilebilir. Özel etiketlerinizi HTML'ye dönüştürmek için oluşturduğunuz XSL stil sayfasının yolunu "menu.xsl" ile değiştirin.

  2. Uyarılar: Dosyanız, XML başlığı <xml version = "1.0"> ile tamamlanmış, iyi biçimlendirilmiş bir XML belgesi olmalıdır. XML, uyumsuz etiketler gibi şeyler hakkında HTML'den daha dikkat çekicidir. Ayrıca, HTML'den farklı olarak etiketler büyük / küçük harfe duyarlıdır. Ayrıca web sunucusunun dosyaları uygun mime türü "application / xml" ile gönderdiğinden emin olmalısınız. Genellikle web sunucusu, dosya uzantısı ".xml" ise bunu otomatik olarak yapacak şekilde yapılandırılır, ancak kontrol edin.

  3. Büyük Uyarı: Son olarak, açıkladığım gibi, tarayıcıların otomatik XSL dönüşümünü kullanmak, yalnızca hata ayıklama ve çok fazla kontrole sahip olduğunuz sınırlı uygulamalar için gerçekten en iyisidir. Son işverenimde, en fazla birkaç düzine kişinin erişebildiği basit bir intranet kurarken başarıyla kullandım. Tüm tarayıcılar XSL'yi desteklemez ve tamamen uyumlu uygulamalara sahip olmayanlar. Dolayısıyla, sayfalarınız "vahşi" olarak yayınlanacaksa, hepsini sunucu tarafında HTML'ye dönüştürmek en iyisidir, bu bir komut satırı aracıyla veya birçok XML düzenleyicide bir düğme ile yapılabilir.


5

HTML'de kendi etiket adlarınızı oluşturmak mümkün değil / geçerli değil. XML, SGML ve diğer genel biçimlendirme dilleri bunun içindir.

Muhtemelen istediğin şey

<div id="menu">
    <div id="lunch">
        <span class="dish">aaa</span>
        <span class="dish">bbb</span>
    </div>
    <div id="dinner">
        <span class="dish">ccc</span>
    </div>
</div>

Veya yerine <div/>ve <span/>benzeri bir şey <ul/>ve <li/>.

Doğru görünmesi ve çalışması için, CSS ve Javascript'i bağlamanız yeterlidir.


5
Hayır, değil. SGML, XML sahneye çıkmadan çok önce yapıldı.
Quentin

1
Bugün sade SGML kullanan var mı? Ya insanlar HTML ya da XML kullanıyor ve bunların soyundan gelenlerin çoğu, ama SGML'yi vahşi doğada hiç görmedim! Her neyse, cevabımı güncelleyeceğim.
LukeN

Bahse girerim hala Docbook SGML'yi dokümantasyon için kullanan bazı insanlar vardır. Birkaç yıl önce kesinlikle çok şey vardı.
Ken

5

Önceki yanıtlara, özel öğeler için yalnızca iki kelimelik etiketlerin kullanılmasının bir anlamı olduğunu eklemek istiyorum. Asla standartlaştırılmamalıdırlar.


Örneğin, etiketi kullanmak istiyorsunuz <icon>, çünkü beğenmiyorsunuz <img>ve <i>ikisini de sevmiyorsunuz ...

Pekala, tek olmadığını unutma. Belki gelecekte, w3c ve / veya tarayıcılar bu etiketi belirleyecek / uygulayacaktır.

Şu anda, tarayıcılar muhtemelen bu etiket için yerel stil uygulayacak ve web sitenizin tasarımı bozulabilir.

Bu yüzden kullanmayı öneriyorum (bu örneğe göre) <img-icon>.


Nitekim etiket <menu>iyi tanımlanmıştır, yani çok kullanılmamıştır, ancak tanımlanmıştır. <menuitem>Hangi şekilde davranacağını içermelidir <li>.


4

Özel etiketler Safari, Chrome, Opera ve Firefox'ta, en azından "class = ..." yerine kullanıldıkları sürece kullanılabilir.

css'deki yeşil {color: green} şunun için çalışır:

<green>This is some text.</green>

Haklısınız @chas ama bu yöntem tavsiye edilmiyor ve "
Hack'ler

2

Meta verileri gömmek için HTML mikro verilerini kullanmayı deneyebilirsiniz , ancak bu, sınıf adlarından daha ayrıntılıdır.

<div itemscope>
    <p>My name is <span itemprop="name">Elizabeth</span>.</p>
</div>

<div itemscope>
    <p>My name is <span itemprop="name">Daniel</span>.</p>
</div>

2

Bir XSL stil sayfası yazmanın yanı sıra, daha önce açıkladığım gibi, başka bir yaklaşım daha var, en azından Firefox veya başka bir tam teşekküllü XML tarayıcısının kullanılacağından eminseniz (yani, Internet Explorer DEĞİL). XSL dönüşümünü atlayın ve tarayıcıya XML'i doğrudan nasıl formatlayacağını söyleyen eksiksiz bir CSS stil sayfası yazın. Bunun tersi, birçok insanın zor ve mantık dışı bir dil olarak gördüğü XSL'yi öğrenmek zorunda kalmayacağınızdır. Bunun dezavantajı, CSS'nizin, blok düğümleri, satır içi olanlar vb. Dahil, stili tamamen belirtmek zorunda kalmasıdır. Genellikle, CSS yazarken, tarayıcının, örneğin, <em> şunu "bildiğini" varsayabilirsiniz: satır içi bir düğümdür, ancak <dish> ile ne yapılacağı hakkında hiçbir fikri olmayacaktır.

Son olarak, bunu denememin üzerinden birkaç yıl geçti, ancak hatırladığım kadarıyla, IE (en azından birkaç sürüm geriye dönük) CSS stil sayfalarını doğrudan XML belgelerine uygulamayı reddetti.


Evet, sanırım IE özel bir XML oluşturma moduna giriyor ve size XML belgesinin hoş, daraltılabilir bir sürümünü gösteriyor.
Paul D. Waite

2

HTML'nin amacı, dilde yer alan etiketlerin üzerinde anlaşılan bir anlama sahip olmasıdır; dünyadaki herkesin kullanabileceği ve kararları temel alabileceği - varsayılan stil, bağlantıları tıklanabilir hale getirme veya bir üzerine tıkladığınızda bir form gönderme gibi <input type="submit">.

Sizinki gibi uydurma etiketler insanlar için harikadır (çünkü İngilizce öğrenebiliriz ve böylece etiketlerinizin ne anlama geldiğini biliriz veya en azından tahmin edebiliriz), ancak makineler için o kadar iyi değildir.



1

Nick'in dediği gibi, özel etiketler herhangi bir HTML sürümü tarafından desteklenmez.

Ancak, HTML'nizde böyle bir işaretleme kullanırsanız herhangi bir hata vermez.

Bir liste oluşturmak istiyorsunuz gibi görünüyor. <ul>Rool elemanlarını oluşturmak için sırasız listeyi kullanabilir ve <li>altındaki maddeler için etiketi kullanabilirsiniz .

Elde etmek istediğiniz bu değilse, lütfen tam olarak ne istediğinizi belirtin. O zaman bir cevap bulabiliriz.


2
Tarayıcıda size bir hata vermez, ancak IE garip bir şekilde bilinmeyen etiketlerde CSS'yi işler.
ceejayoz

Hmmm, şimdi bunu bilmiyordum! Bilinmeyen CSS adlarının garip bir şekilde ele alındığını biliyordum (bu bir hata). Ancak, bilinmeyen etiketleri de tuhaf bir şekilde ele aldığından emin misiniz? Onları sadece <>etiketlerdeki metin olmadan oluşturmaz mı?
Kirtan

1
Internet Explorer'da bilinmeyen öğelere CSS uygulayamazsınız. <abbr>IE 7'de bir öğenin stilini belirlemeyi deneyin. Çalışmaz çünkü IE 7 uygulanmadı <abbr>(standartta olsa bile!). İnsanlar körü körüne standart olmayan bir kodun herhangi bir hataya neden olmayacağını söylediğinde kendime küçük bir kıkırdama duyuyorum. Herhangi bir hataya neden olmayacağını nereden biliyorsun? Bırakın standart olmayan kodu çalıştırmak için standart kod almak yeterince zor.
Paul D. Waite

1
Paul, çözümün için html5shim'e bak. Özel işlevsellikten yararlanamazsınız, ancak bir kap arıyorsanız, yapmanız gereken tek şey bir document.createElement ("MyNewTagName"); kafasına (veya en azından bu etiketin stilize edilmiş herhangi bir versiyonunun olmasını istediğiniz yere). Hatta bir dizi oluşturun ve bunları tekrarlayın, JS'de oluşturun - DOM eki gerekmez, sadece bir tane oluşturun ve onu atın. Onları, blok düzeni ve% 100 bilinmeyenlermiş gibi şekillendirmeye hazır olun.
Norguard



1

Sadece bazı özel css stilleri yapabilirsiniz, bu arka plan rengini kırmızı yapacak bir etiket oluşturacaktır:

redback {background-color:red;}
 

<redback>This is red</redback>


1

Bazı durumlarda, kendi etiket adlarınızı oluşturmanız yeterli gibi görünebilir.
Ancak, bu yalnızca tarayıcınızın işteki hata işleme yordamlarıdır. Ve sorun şu ki, farklı tarayıcıların farklı hata işleme rutinleri vardır!

Bu örneğe bakın.
Birinci satır, iki uydurma unsurları içeren, whatve ever, ve farklı tarayıcılar tarafından farklı tedavi. Metin, IE11 ve Edge'de kırmızı, diğer tarayıcılarda siyah renkte çıkar.
Karşılaştırma için, ikinci satır, yalnızca geçerli HTML öğeleri içermesi dışında benzerdir ve bu nedenle tüm tarayıcılarda aynı görünecektir.

body {color:black; background:white;} /* reset */

what, ever:nth-of-type(2) {color:red}
code, span:nth-of-type(2) {color:red}
<p><what></what> <ever>test</ever></p>

<p><code></code> <span>test</span></p>

Uydurma unsurlarla ilgili bir başka sorun da, gelecekte ne getireceğini bilemeyeceğinizdir. Eğer gibi etiket adlarıyla birkaç yıl önce bir web sitesi oluşturduysanız picture, dialog, details, slot, templatevb onları bekliyor açıklıklı gibi davranmaya, artık belada!


1

bunu kullanabilirsiniz:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>MyExample</title>
  <style>
    bloodred {color: red;}
  </style>
</head>
<body>
  <bloodred>
    this is BLOODRED (not to scare you)
  </bloodred>
</body>
<script>
  var btn = document.createElement("BLOODRED")
</script>
</html>

0

Bu makaleyi özel HTML etiketleri oluşturma ve bunları örnekleme konusunda buldum. Süreci basitleştirir ve herkesin anlayabileceği ve hemen kullanabileceği terimlere ayırır - ancak içerdiği kod örneklerinin tüm tarayıcılarda geçerli olduğundan tam olarak emin değilim, bu yüzden dikkatli olun ve iyice test edin. Yine de, başlamak için konuya harika bir giriş.

Özel Öğeler: HTML'de yeni öğeler tanımlama


-1

<head>
  <lunch>
    <style type="text/css">
      lunch{
        color:blue;
        font-size:32px;
        }
      </style>
    </lunch>
  </head>

<body>
  <lunch>
    This is how you create custom tags like what he is asking for its very simple just do what i wrote it works yeah no js or convoluted work arounds needed this lets you do exactly what he wrote.
    </lunch>
  </body>


Parlak. Bunun neden yükseltilmediğine veya kabul edilmediğine dair bir fikriniz var mı?
rnso
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.