Kelimeleri vurgulamak için bir HTML sayfasında standart olmayan etiketleri kullanmalı mıyım?

Belirli özel amaçlar için bir HTML sayfasında standart olmayan etiketleri kullanmanın iyi bir uygulama mı yoksa yasal mı olduğunu bilmek istiyorum.

Örneğin:

Lorem ipsum dolor sit amet, adipisizing seçkinler. Nullam sonuç, felis otur amet suscipit laoreet, nisi arcu accumsan arcu, vel pulvinar odio magna suscipit mi.

"Consectetur adipiscing elit" i önemli ve "nisi arcu accumsan arcu" olarak vurgulamak istiyorum.

Yani HTML'de şunu koyacağım:

Lorem ipsum dolor sit amet, <önemsiz> consectetur adipiscing elit </important>. Nullam sonuç, felis oturup amet suscipit laoreet, <highlighted> nisi arcu accumsan arcu </highlighted>, vel pulvinar odio magna suscipit mi.

ve CSS'de:

important {
 background: red
 color: white;
}

highlighted {
 background: yellow;
 color: black;
}

Ancak, bunlar geçerli HTML etiketleri olmadığından, sorun değil mi?

Hayır, bu iyi bir uygulama değil. Belki <em>de bu durumda anlamsal, anlamlı etiketler kullanmalı ve tasarım gereksinimlerinize ulaşmak için CSS stilleri uygulamalısınız.

Sorunuz bunun " iyi uygulama veya yasal " olup olmadığını sordu .

Birincisi: bu biraz yasal - en azından tolere edilir. Tarayıcılar her zaman anlamadıkları etiketlerle başa çıkacak şekilde programlanmıştır, bu sadece onları görmezden geldikleri anlamına gelse bile. Bu HTML kodu:

Some <b>bold</b> and some <slanted>italic</slanted>.

Her bir tarayıcı gibi görünecek:

Bazıları kalın ve bazıları italik.

Ayrıca, çoğu tarayıcı bu öğeyi CSS'de biçimlendirmenize izin verir. Aşağıdaki CSS tanımını eklerseniz:

slanted { font-style: italic; }

tarayıcıların çoğu artık aşağıdaki gibi görüntülenecektir:

Bazıları kalın ve bazıları italik .

Gerçekten: kendiniz deneyin . Bu arada, bu, web geliştiricilerinin yeni HTML5 etiketlerinin eski tarayıcılarda doğru görüntülenmesini sağlamak için kullandıkları bir numaradır.

Ancak, bu tam bir resim değil. Tam cevap hayır, iyi bir uygulama değil . " Çoğu tarayıcı" ifadesini kullandığımı fark etmiş olabilirsiniz . Ne yazık ki, IE9'dan önceki tüm Internet Explorer sürümleri bu davranışı uygulayamaz. IE8 ve önceki sürümlerde, yukarıdaki kod yine de şöyle görünecektir:

Bazıları kalın ve bazıları italik.

Geçici çözümün ayrıntılarını da bulabileceğiniz Dive Into HTML5'te sorunun ayrıntılı bir açıklaması var . Ancak, geçici çözüm için JavaScript gerekir, bu nedenle bu tamamen bir HTML çözümü değildir ve tüm senaryolarda çalışmaz.

Yani, kısa cevap: yalnızca standart HTML öğelerine sadık kalın ve bunları CSS'nizde istediğiniz gibi şekillendirin.

<important/>Belirli nedenlerle anlambilimini korumanız gerekiyorsa, özel etiketlerinizi geçerli HTML'ye dönüştürmek için XSL'yi kullanabilirsiniz. Bu konuyla ilgili daha fazla bilgiyi buradan edinebilirsiniz:

http://www.w3.org/Style/XSL/WhatIsXSL.html

http://www.4guysfromrolla.com/webtech/081300-2.shtml

http://www.ibm.com/developerworks/xml/library/x-tiphtml/index.html

http://www.siteexperts.com/tips/xml/ts01/page5.asp

http://www.htmlgoodies.com/beyond/xml/converting-xml-to-html-using-xsl.html

<important/>Son HTML çıktısında hala bulunamazsınız , ancak otomatik olarak benzer bir şeye dönüştürebilirsiniz <span class="important"....

Neden kendi özel etiketlerinizi asla oluşturmamanız gerektiğini açıklayan birkaç cevap var. Muhtemelen, hepsi yanlış.

WHATWG'nin özel etiket analizi , kabul edilebilir, standartlara uygun (tanınmayan etiketlerin işlenmesi iyi tanımlandığı için) ve örneğin genel bir div oluşturmaya göre daha erişilebilir olduğu sonucuna varır.

<x-accordion> </x-accordion> her mekanik anlamda <div class = "accordion"> </div> 'den daha kötü değildir. "X-akordeon" (veya bileşen modeli desteği) için tanım bulunmadığında, her ikisi de aynı anlama gelir, her ikisi de aynı şekilde şekillendirilebilir. Biri HTMLUnknownElement, diğeri HTMLDivElement ve API yüzeyleri aynı.

Yapmanız gereken, OP'nin yapmadığı, tüm özel etiketlerin kural başına 'x-' önekidir. Bu açıkça, bu etiketin belgeniz için yerel olmasını istediğinizi gösterir ve gelecekteki özellik öğeleriyle çakışmaları önler.

Bazıları, bazı popüler tarayıcıların özel etiketleri standartlara uygun bir şekilde işlemediğinden, bunları kullanmamanız gerektiğini iddia eder. Bununla birlikte, uyumlu olmayan tarayıcıların davranışı kendi problemidir ve tercihen sizi anlamsal olmayan işaretleme yazmaya zorlamaz. Bu soruna hem Javascript hem de Javascript olmayan çözümler vardır, bu çözüm yalnızca özellikle desteklemek istediğiniz uyumlu olmayan tarayıcılar için uygulanmalıdır.

Tüm bunlar, spesifikasyonda (<mark>) oluşturduğunuz etiketin anlamsal anlamını (<highlight>) açıkça kapsayan bir etiket varsa, mevcut etiketi kullanmak kesinlikle tercih edilir.

Nasıl görüntülendiğini değiştirmek için <em />ve <strong />özel CSS ile kullanabilirsiniz .

Güçlü, güçlü önemi ifade eder.

Vurgu, artan vurguyu ifade eder.

Pratik tarafta, vurgulamak için yeni etiketler kullanmak gereksizdir . Varsayılan (CSS olmayan) oluşturma olarak italik yazmayı tercih ediyorsanız veya varsayılan olarak kalın yazmayı tercih ediyorsanız emveya ietiketlerini kullanabilirsiniz . Herhangi bir nedenden ötürü, varsayılan oluşturmayı normal metin olarak tercih ediyorsanız, örneğin vurgulama yoksa, kullanın . Her durumda, bu kullanımı biçimlendirme için sahip olabileceğiniz diğer kullanımlardan ayırmak için bir özellik kullanabilirsiniz .strongbspanclass

HTML özellikleri ve (HTML5) taslakları, bu öğelerin anlambilimi açısından belirsizdir, ancak bunun büyük bir baş ağrısına neden olması gerekmez.

Hayır, XHTML'de başka bir ad alanından yeni etiketler eklenmesine izin verilmesine rağmen, belirtilmeyen HTML etiketlerinin işlenmesi kesinlikle önerilmez.

Bunu yapmaktan tutuklanmamanız yasal. Ancak W3C'den suikastçiler kapınıza gelirse şaşırmayın.

Öncelikle, diğer geliştiriciler ne demek istediklerini bilemeyecekler. Durumunda <important>ve <highlight>onlar, ama diyelim ki, böyle bir şey kullanırsanız, <set>, size bir matematiksel setine bahsediyorsan biliyor olabilir, ama başka kodunuzu okuma başkasının şey için sanabilir. Bir cevap vermek için şartname olmadan, büyük bir karışıklık olabilir.

İkincisi, W3C bir <important>öğenin iyi bir fikir olduğuna karar verirse , ancak bunun acil bir bildirim anlamına gelmesi gerektiğini düşünürse,

<important>This site is going to be down for maintenance 2/29/2012.</important>

Sonra berbatsın. Tarayıcılar ve geliştirici arkadaşlarınız oldukça karışık olacaktır. Muhtemelen deli oluncaya kadar kodunuzu regexes ile ayrıştırmaya zorlarlar. Ve bunun nasıl sonuçlandığını hepimiz biliyoruz.

Üçüncüsü, IE <9, küçük bir kesmek olmadan bilinmeyen öğeleri şekillendirmenize izin vermez. Büyük bir şey değil, sinir bozucu.

Son olarak, bu durumda <important>ve <highlight>zaten var! <strong>ve <mark>aradığınız şey bu. Göre HTML5 spec

Güçlü element, içerikleri için büyük önem taşır.

ve

İşaretleme öğesi, bir belgedeki referans amacıyla işaretlenmiş veya vurgulanmış bir metin akışını temsil eder ...

Eğer "referans amaçlı" için kullanmıyorsanız, bir <span>a sınıfı iyi olur.

http://www.w3.org/TR/html5/elements.html

Bu revizyon 1.5612'dir.

Yazarlar, bu spesifikasyonun veya diğer uygulanabilir spesifikasyonların izin vermediği elemanları, nitelikleri veya nitelik değerlerini kullanmamalıdır, çünkü bu, gelecekte dilin genişletilmesini önemli ölçüde zorlaştırır.

Buradaki herkesi görmezden gelmek.

İki önemli nedenden dolayı iyi bir uygulama değildir:

İlk olarak, bir noktada standartlar komitesinin <important>, bunun için kullanımınızı ortadan kaldıran bir etiket eklemeye karar vermesi tamamen mümkündür . Tabii, biraz zaman alabilir .. Ama daha sonra onu parçalamak için zaman harcayabilirsiniz.

İkincisi, (gerçek sebep budur) kodunuzu devralan programcı, ya bütün bunları sorarken standart olmayan yaklaşımınızda sürekli olarak "wtf" diyecektir ya da eşit derecede mümkün olduğunda, sizin ne olduğunuzla tamamen karıştırılacaktır. Bitirdim ve sadece hayal kırıklığı içinde istifa et.

Yani, iyi ol. Asla bilemezsin, sonunda bir gün birinden bir iş isteyebilirsin.

Hayır, kendi HTML etiketlerinizi oluşturamazsınız, çünkü o zaman tüm büyük tarayıcıları uygulamanız gerekir, şu anda tarayıcılar tanınmayan bir etiket bulduğunda, içindeki her şeyi yok sayarlar, bu nedenle kendi tarayıcınızı yeni bir tane oluşturmak istemiyorsanız etiketi anlamsızdır ve o zaman bile yalnızca tarayıcınızda çalışır.

W3c'ye onlar için bir kullanım örneği göndermeyi deneyebilirsiniz, ancak her yere ulaşacağından şüpheliyim.

Hayır, diğer tüm cevapların sağladığı tüm nedenler için iyi bir uygulama değildir. Bu noktaları tekrarlamak yerine, bu cevaplarda görmediğim bir seçenek sunmak istiyorum!

Anlamsal anlamı hedeflerinize uyan mevcut etiket olmaması durumunda data-*, HTML 5 spesifikasyonundaki bir CSS ve yeni özellik kombinasyonunu kullanabilirsiniz . Tabii ki, bu seçtiğiniz çoğu etiketle çalışacaktır.

Örnek:

Lorem ipsum dolor sit amet, 
<span class="important" data-type="important">consectetur adipiscing elit</span>. 
Nullam consequat, felis sit amet suscipit laoreet, 
<span class="highlighted" data-type="highlighted">nisi arcu accumsan arcu</span>, 
vel pulvinar odio magna suscipit mi.

Bu mükemmel bir çözüm olmasa da, data-*nitelikler için iyi tanımlanmış bir anlamsal anlam olmadığından , bu en azından data-typeözelliğinizin anlamını bilenlere ek bilgi vermenize izin verecektir .