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

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

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>

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.

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.

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.

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

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

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>

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.

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.

Bu, herhangi bir HTML spesifikasyonunda bir seçenek değildir :)

Muhtemelen istediğiniz şeyi <div>öğeler ve sınıflarla yapabilirsiniz, sorusuna göre tam olarak neyin peşinde olduğunuzdan emin değilim, ancak hayır, kendi etiketlerinizi oluşturmak bir seçenek değil.

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.

HTML 5 data- Attributes aracılığıyla özel nitelik ekleyebilirsiniz. Örneğin: HTML 5 için geçerli Mesaj . Ayrıntıları almak için http://ejohn.org/blog/html-5-data-attributes/ adresine bakın.

Polimer veya X etiketleri , kendi html etiketlerinizi oluşturmanıza izin verir. Yerel tarayıcının "gölge DOM" sunu temel alır.

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>

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!

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>

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