Metni italik yapmanın doğru yolu nedir ? Aşağıdaki dört yaklaşımı gördüm:

<i>Italic Text</i>

<em>Italic Text</em>

<span class="italic">Italic Text</span>

<span class="footnote">Italic Text</span>

<i>

"Eski yol" budur. <i>anlamsal bir anlamı yoktur ve sadece metni italik yapmanın sunumsal etkisini aktarır. Görebildiğim kadarıyla, bu açıkça yanlış çünkü anlamsal değil.

<em>

Bu, yalnızca sunum amacıyla anlamsal işaretleme kullanır. Sadece <em>varsayılan olarak metni italik olarak gösterir ve bu nedenle <i>kaçınılması gerekenlerin farkında olan ancak anlamsal anlamından habersiz olanlar tarafından sıklıkla kullanılır . Tüm italik metinler italik değildir, çünkü vurgulanmıştır. Bazen, yan not veya fısıltı gibi tam tersi olabilir.

<span class="italic">

Sunumu yerleştirmek için bir CSS sınıfı kullanır. Bu genellikle doğru yol olarak ifade edilir, ancak yine, bu benim için yanlış görünüyor. Bu daha anlamsal bir anlam taşıyor gibi görünmüyor <i>. Ancak, savunucuları ağlar, diyelim ki, kalın olmasını istiyorsanız, tüm italik metninizi daha sonra değiştirmek çok daha kolaydır. Yine de durum böyle değil çünkü daha sonra metni kalın yapan "italik" adında bir sınıfla kalacaktım. Ayrıca, web sitemdeki tüm italik metinleri neden değiştirmek isteyeceğim ya da en azından bunun arzu edilmeyeceği veya gerekli olmayacağı durumları düşünebileceğimiz açık değil.

<span class="footnote">

Anlambilim için bir CSS sınıfı kullanır. Şimdiye kadar bu en iyi yol gibi görünüyor, ancak aslında iki sorunu var.

1. Tüm metnin anlamsal işaretleme için yeterli anlamı yoktur. Örneğin, sayfanın altındaki italik metin gerçekten bir dipnot mu? Yoksa bir kenara mı? Veya tamamen başka bir şey. Belki de özel bir anlamı yoktur ve sadece sunumdan önceki metinden ayırmak için italik yazılması gerekir.

2. Anlamsal anlam, yeterli güçte bulunmadığında değişebilir. Sayfanın altındaki metinden başka bir şeye dayanarak "dipnot" ile birlikte gittiğimi varsayalım. Birkaç ay sonra altına daha fazla metin eklemek istediğimde ne olur? Artık bir dipnot değil. <em>Bu problemlerden daha az jenerik olan ancak bu problemlerden kaçınan bir anlamsal sınıfı nasıl seçebiliriz ?

özet

Anlambilim gereksiniminin, italik bir şey yapma arzusunun anlambilimsel bir anlam taşımadığı birçok durumda aşırı külfetli olduğu görülmektedir.

Dahası, stili yapıdan ayırma arzusu, CSS'nin <i>aslında daha az faydalı olacağı durumların yerine geçmesini sağlamıştır . Yani bu beni mütevazı bir şekilde geri bırakıyor<i> etiketle getiriyor ve bu düşünce dizisinin HTML5 spesifikasyonunda kalmasının nedeni olup olmadığını merak ediyor musunuz?

Bu konuda da iyi blog yayınları veya makaleler var mı? Belki de <i>etiketi tutma / oluşturma kararına dahil olanlar tarafından ?

Farklı kullanım durumları için farklı yöntemler kullanmalısınız:

1. Bir cümleyi vurgulamak istiyorsanız şunu kullanın: <em> .
2. <i>Etiketi, sahip HTML5 yeni bir anlam "alternatif bir ses veya ruh halinde metnin bir yayılma" temsil eden. Bu yüzden bu etiketi düşünceler / bir yana veya deyimsel ifadeler için kullanmalısınız. Teknik özellik ayrıca gemi isimlerini önerir (ancak artık kitap / şarkı / film isimlerini önermez;<cite> bunun için kullanın).
3. İtalik metin daha geniş bir bağlamın parçasıysa (giriş paragrafı), CSS stilini daha büyük öğeye eklemelisiniz, yani p.intro { font-style: italic; }

<i>yanlış değildir çünkü anlamsal değildir. Yanlıştır (genellikle) çünkü sunumdur. Endişe duyulması, mevcut bilgilerin CSS ile aktarılması gerektiği anlamına gelir.

Genel olarak isimlendirme doğru yapmak zor olabilir ve sınıf isimleri bir istisna değildir, ancak yine de yapmanız gereken budur. Bir bloğu gövde metninden öne çıkarmak için italik yazı kullanıyorsanız, belki de "akış-ayırt edici" sınıf adı uygun olabilir. Yeniden kullanmayı düşünün: sınıf adları sınıflandırma içindir - aynı şeyi başka nerede yapmak istersiniz? Bu, uygun bir isim belirlemenize yardımcı olacaktır.

<i>HTML5'e dahil edilir, ancak belirli anlambilim verilir. Bir şeyi italik olarak işaretlemenizin nedeni, spesifikasyonda belirtilen semantiklerden birini karşılıyorsa, kullanılması uygun olacaktır <i>. Aksi halde hayır.

Ben uzman değilim ama eğer gerçekten semantik olmak istiyorsanız, kelime dağarcığı (RDFa) kullanmanız gerektiğini söyleyebilirim.

Bunun böyle bir şeyle sonuçlanması gerekir:

<em property="italic" href="http://url/to/a/definition_of_italic"> Your text </em>

emsunum için kullanılır (insanlar bunu italik olarak görür) ve propertyve hrefözellikleri italikin ne olduğunu (makineler için) tanımlar.

Bu tür şeyler için bir kelime hazinesi olup olmadığını kontrol etmelisiniz, belki de özellikler zaten var.

RDFa hakkında daha fazla bilgi için: http://www.alistapart.com/articles/introduction-to-rdfa/

TLDR

Metni italik yapmanın doğru yolu, CSS'ye ulaşana kadar sorunu görmezden gelmek, ardından sunum anlamsallığına göre stil uygulamaktır. Sağladığınız ilk iki seçenek koşullara bağlı olarak doğru olabilir. Son ikisi yanlış.

Daha Uzun Açıklama

İşaretlemeyi yazarken sunum hakkında endişelenmeyin. İtalik olarak düşünmeyin. Anlambilim açısından düşünün. Stres vurgusu gerektiriyorsa, o zaman bir em. Ana içeriğe teğet ise, o zaman bir aside. Belki cesur olacak, belki italik olacak, belki floresan yeşili olacak. İşaretleme yazarken önemli değil.

CSS'ye geldiğinizde, sitenizdeki tüm oluşumları için italik yazmanın mantıklı bir anlamı olan bir anlamsal öğeniz zaten olabilir. emiyi bir örnek. Ama belki de aside > ul > lisitenizdeki tüm kelimeleri italik olarak istersiniz . İşaretleme hakkında düşünmeyi sunum hakkında düşünmekten ayırmanız gerekir.

Tarafından belirtildiği gibi DisgruntledGoat , iHTML5'teki semantik olduğunu. Anlambilimler benim için biraz dar görünüyor. Kullanım muhtemelen nadir olacaktır.

emHTML5'teki anlambilim vurgulamaya vurgu yaptı. strongönem göstermek için de kullanılabilir. strongbu şekilde şekillendirmek istiyorsanız kalın yerine italik olabilir. Tarayıcının stil sayfasının sizi sınırlamasına izin vermeyin. Varsayılanlar içinde düşünmeyi bırakmanıza yardımcı olması için bir sıfırlama stil sayfası bile kullanabilirsiniz . ( Bazı uyarılar olmasına rağmen .)

class="italic"kötüdür. Kullanma. Anlamsal değildir ve hiç de esnek değildir. Sunumun anlambilimi vardır, biçimlendirmeden farklı bir tür.

class="footnote"biçimlendirme semantiği taklit ediyor ve yanlış. Dipnot için CSS'niz, dipnotunuz için tamamen benzersiz olmamalıdır. Her bölüm farklı bir şekilde biçimlendirilirse siteniz çok dağınık görünecektir. Sayfalarınızda CSS sınıflarına dönüştürebileceğiniz bazı görsel kalıplara sahip olmalısınız. Dipnotlarınız ve blok alıntılarınız için tarzınız çok benzerse, benzerlikleri kendinizi tekrar tekrar yerine bir sınıfa koymalısınız. OOCSS uygulamalarını benimsemeyi düşünebilirsiniz (aşağıdaki bağlantılar).

HTML5'te endişelerin ve anlambilimin ayrılması büyüktür. İnsanlar genellikle işaretlemenin anlambilimin önemli olduğu tek yer olmadığını fark etmezler. İçerik semantiği (HTML) vardır, ancak sunumsal semantik (CSS) ve davranışsal semantik (JavaScript) de vardır. Hepsinin, sürdürülebilirliği ve KURU kalması için dikkat etmesi gereken kendi ayrı semantiği vardır.

OOCSS Kaynakları

• Nesneye Dayalı CSS
• Nesneye Dayalı CSS'ye (OOCSS) Giriş
• Nesneye Dayalı CSS Yazma
• Nesneye Dayalı CSS'ye (OOCSS) başlarken
• Nesneye Dayalı CSS: Ne, Nasıl ve Neden
• Nesneye Dayalı CSS'ye Dalma

Belki de özel bir anlamı yoktur ve sadece sunumdan önceki metinden ayırmak için italik yazılması gerekir.

Özel bir anlamı yoksa, neden önceki metinden sunumsal olarak ayrılması gerekir? Bu metin çalışması biraz garip görünüyor , çünkü sebepsiz yere italik yaptım.

Ne demek istediğimi anlıyorum. Tasarımcıların, anlamlı bir şekilde değişmeden görsel olarak değişen tasarımlar üretmeleri nadir değildir. Bunu en çok kutularla gördüm: tasarımcılar bize çeşitli renkler, köşeler, degradeler ve alt gölgeler kombinasyonları, stiller ve içeriğin anlamı arasında bir ilişki olmayan kutular da dahil olmak üzere tasarımlar verecekler.

Bu farklı yerlerde yeniden kullanılabilir (ilişkili Internet Explorer konularla) makul karmaşık stilleri olduğu için, gibi sınıf oluşturabilir box-1, box-2biz böylece o stilleri yeniden kullanın.

Bazı metinleri italik yapmak için özel bir örnek olsa da endişelenmek çok önemsizdir. Semantik Nutters için tartışmak için böyle minutiae bırakın.

HTML italik metni metni italik biçimde görüntüler.

<i>HTML italic text example</i>

Vurgu ve güçlü unsurların her ikisi de belirli kelimelerin veya cümlelerin önemini artırmak için kullanılabilir.

<p>This is <em>emphasized </em> text format <em>example</em></p>

Vurgu etiketi, metninizdeki bir noktayı vurgulamak istediğinizde kullanılmalı ve bu metni italik yapmak istediğinizde kullanılmamalıdır.

Daha fazla bilgi için bu kılavuza bakın: HTML Metin Biçimlendirme

iEleman böylece vb ekran okuyucuları, Googlebot için, saydam (tıpkı bir çeşit olmalıdır olmayan semantik olduğu spanveya divelemanlar). Ancak geliştirici için iyi bir seçim değildir, çünkü sunum katmanını yapı katmanıyla birleştirir - ve bu kötü bir uygulamadır.

emöğesi ( strongsunum) değil her zaman anlamsal bir bağlamda kullanılmalıdır. Herhangi bir kelime veya cümle önemli olduğunda kullanılmalıdır. Sadece önceki cümlede bir örnek emiçin, 'her zaman kullanılmalı' bölümüne daha fazla vurgu yapmak için kullanmalıyım . Tarayıcılar bu öğeler için bazı varsayılan CSS özellikleri sağlar, ancak tasarımınız bu öğelerin doğru anlam anlamını korumak için bunu gerektiriyorsa, varsayılan değerleri geçersiz kılabilirsiniz.

<span class="italic">Italic Text</span>en yanlış yoldur. Her şeyden önce, kullanımda uygunsuz. İkinci olarak, metnin italik olması önerilir. Ve yapı katmanı (HTML, XML, vb.) Bunu yapmamalıdır . Sunum daima yapıdan ayrı tutulmalıdır.

<span class="footnote">Italic Text</span>bir dipnot için en iyi yol gibi görünüyor. Herhangi bir sunum önermez ve sadece işaretlemeyi açıklar. Özellikte ne olacağını tahmin edemezsiniz. Özellikte bir dipnot büyüyecekse, sınıf adını değiştirmek zorunda kalabilirsiniz (kodunuzda bazı mantık tutmak için).

Yani, ne zaman önemli bir metniniz varsa, emya strongda vurguyu kullanın . Ancak, bu öğelerin satır içi öğeler olduğunu ve büyük metin bloklarını vurgulamak için kullanılmaması gerektiğini unutmayın.

Yalnızca bir şeyin nasıl göründüğüne önem veriyorsanız ve her zaman fazladan işaretlemekten kaçınmaya çalışıyorsanız CSS kullanın.

Cevabın kullanmak olduğunu düşünüyorum <em>ne zaman niyetinde vurgu.

Metni kendinize okurken, bir noktayı vurgulamak için biraz farklı bir ses kullandığınızı görürseniz , o zaman kullanmalıdır, çünkü bir ekran okuyucunun aynı şeyi yapmasını istersiniz.<em>

Tasarımcınızın tüm <h2>başlıklarınızın italik Garamond'da daha iyi görünmesine karar vermesi gibi tamamen stil bir şeyse, HTML'ye dahil etmek için semantik bir neden yoktur ve sadece uygun öğeler için CSS'yi değiştirmeniz gerekir.

<i>Özellikle CSS içermeyen eski bir tarayıcıyı desteklemeniz gerekmedikçe, kullanmak için herhangi bir neden göremiyorum .

<em>Satır içi öğeleri vurgulamak için kullanın diyebilirim . Metin blokları gibi blok elemanları için bir sınıf kullanın. CSS olsun veya olmasın, metnin hala etiketlenmesi gerekir. Anlambilim veya görsel yardım için olsun, anlamlı bir şey için kullanacağınızı varsayıyorum ...

Metni HERHANGİ BİR nedenden ötürü vurgularsanız, metninizi <em>italikleştiren bir sınıfı veya sınıfı kullanabilirsiniz .

Bu sakınca kuralları ihlal bazen!

Tamam, not edilmesi gereken ilk şey <i> kullanımdan kaldırıldı ve kullanılmamalıdır <i>kullanımdan kaldırılmadı, ancak yine de kullanılmasını önermiyorum - ayrıntılar için yorumlara bakın. Bunun nedeni, tamamen belirttiğiniz sunum katmanında sunumu tutmaya karşı çıkmasıdır. Benzer şekilde, <span class="italic">kalıbı da kırmış gibi görünüyor.

Şimdi bir şeyler yapmanın iki gerçek yolu var: <em>ve <span class="footnote">. Bunun vurguem anlamına geldiğini unutmayın . Bir sözcüğe, ifadeye veya cümleye vurgu uygulamak istediğinizde, italik olsun veya olmasın , etiketlere yapıştırın . Stili başka bir şekilde değiştirmek istiyorsanız, CSS: kullanın . Elbette, etikete bir sınıf da uygulayabilirsiniz : belirli vurgulanan ifadelerin kırmızı renkte görünmesini istediğinize karar verirseniz, onlara bir sınıf verin ve CSS'ye ekleyin:<em>em { font-weight: bold; font-style: normal; }<em>

Fancy some <em class="special">shiny</em> text?

em { font-weight: bold; font-style: normal; }
em.special { color: red; }

Başka bir nedenden dolayı italik yazıyorsanız, diğer yöntemle devam edin ve bölüme bir sınıf verin. Bu şekilde, stilini HTML'yi ayarlamadan istediğiniz zaman değiştirebilirsiniz. Örneğinizde, dipnotlar vurgulanmamalıdır - aslında, bir dipnotun amacı önemsiz fakat ilginç veya yararlı bilgiler göstermek olduğundan, vurgulanmalıdır. Bu durumda, dipnota bir sınıf uygulamak ve bunu sunum katmanındaki CSS gibi görünmesini sağlamak çok daha iyidir.

İtalik olarak başka stiller olmadan içerikte bazı kelimelere / karakterlere ihtiyacınız varsa <em> kullanın. Ayrıca, içeriği semantik hale getirmeye yardımcı olur.

text-style birden çok stil için daha uygundur ve anlamsal bir ihtiyaç yoktur.

YAPMAK

1. Sınıf niteliğine verilerin niteliğini gösteren bir değer verin (yani class="footnote"iyi)

2. Sayfa için bir CSS stil sayfası oluşturma

3. Öğeye atadığınız sınıfa eklenmiş bir CSS stili tanımlayın

   .footnote { font-style:italic; }

YAPMA

1. Kullanma <i>ya da<em> öğeleri - desteklenmezler ve verileri ve sunumu çok yakın bağlarlar.
2. Sınıfa sunum kurallarını belirten bir değer vermeyin (yani kullanmayın class="italic").