HTML Bold etiketine alternatif

83

Tamam, HTML'de <b>etiketi kullanabileceğinizi biliyorum , ancak etikette kullanabileceğim bir "weight=bold"özellik yok <p>mu?

Yoksa bu CSS'de mi yoksa Javascript'te mi?

html  css 
— Kzqai
kaynak
5
Görünürlüğünü arttırmak için bu soruya bir ödül başlatıyorum çünkü teknik olarak doğru olmasına rağmen en iyi cevabın pratikte felaket olduğunu düşünüyorum. Özellikle google'da "html5'te kalın etiket" aramasının sonuçlarında çok yüksek olan bir soru için.
— Kzqai
7
Bu ödülü gülünç olarak oyladım. @mipadi'nin doğru cevabı var. Bir kullanıcı belki de başka bir şeyi şekillendirmek istediğini anlayamazsa p, bu kendi sorunudur. Belki bunu açıklığa kavuşturacak farklı bir SO sorusu sorarlar.
— Ryley

Yanıtlar:

100

Ayrıca <strong>etiketi de göz önünde bulundurun . Ekran okuyucular için çok daha iyidir ve bu nedenle erişilebilirlik açısından daha iyidir. Arama motorları ayrıca , <strong>başlık etiketlerini , vb . Nasıl kullandıklarına benzer önemli içeriği belirlemek için etiketleri kullanır (ancak arama motorlarına benzer anlamlara sahip olacaktır). Metnin önemini vurgulamak istiyorsanız kullanın . Eğer varsa yok stres önem istiyorum kullanmak etiketi veya kullanmak elemana veya CSS stil.<h1><h2><b><strong><b>font-weight:bold;

Bununla birlikte, paragrafın tamamını kalınlaştırıyorsanız, CSS seçeneğini kullanmak muhtemelen daha iyidir. Bu, ekran okuyucular üzerindeki etkiyi azaltacaktır ve muhtemelen tüm paragrafın vurgulanması mantıklı değildir. Ama öte yandan, daha önce bütün bir paragrafı iyi bir nedenle vurgulamak için cesurca kullanıldığını gördüm. Bu durumda, font-weight:bold;muhtemelen bir sınıf / stilde kullanmak istediğiniz şeydir.

Sonunda <strong>, <b>ya font-weight:bold;da hepsi görsel olarak benzer bir şeyi başaracak ve başaracak (muhtemelen tamamen aynı), ancak biraz farklı anlamlara sahipler. Ayrıca, ne olduğunuz kalınlaştırma bir başlık ise, başlık etiketlerini kullandığınızdan emin olun: <h1>, <h2>vb

— Darryl Hein
kaynak
37
<b> geçerli herhangi bir HTML veya XHTML standardında kullanımdan kaldırılmış DEĞİLDİR ve gelecek HTML 5'te bile kullanımdan kaldırılmamıştır. <b> ve <strong> farklı anlamlara sahiptir; <b> "kalın stilli metin" anlamına gelir. <strong> "daha güçlü vurgu" anlamına gelir, ancak bir metin stilini dikte etmez; tarayıcılar varsayılan olarak kalın olur.
— thomasrutter
2
<b> ’in yaygın kullanımı azaldı, ancak asıl öğe W3C özelliklerine göre kullanımdan kaldırılmadı.
— alex
4
<b> HTML5'te etkili bir şekilde kullanımdan kaldırıldı ... ve biraz farklı bir anlamı olan başka bir <b> etiketiyle değiştirildi. Garip bir seçim, ama temelde yaptıkları buydu. Her halükarda, metni kalın olarak biçimlendirmek için kullanılmamalıdır.
— Chuck
@Chuck: Yeni b öğesi ne anlama geliyor?
— alex
1
Modern ekran okuyucuların (JAWS ve Window Eyes'ın en son sürümleri gibi) <em> veya <strong> öğelerinin içeriğini normal ayarlarda farklı bir şekilde aktarmadığını unutmayın. Konuşma çıktısının etkilenmesi için kullanıcının Son Okuma moduna girmesi gerekir. İyi okuma: Ekran okuyucuları vurgudan yoksundur ve HTML5'teki i, b, em ve güçlü öğeler .
— Jon Gibbins
79

CSS özelliğini düşünüyorsunuz font-weight:

p { font-weight: bold; }
— mipadi
kaynak
6
Umarım sahip olduklarınızı tam olarak kopyalamaz ... birkaç şeyi karıştırır :)
— Darryl Hein
6
Sözdizimsel olarak doğru bir örnek. OP'nin nasıl kullanılmasını istediğine karar vermesi gerekecektir .
— mipadi
6
"Doğru sözdizimi" her şey değildir, keşke bu cevabın daha iyi olmasını dilerim, b etiketi için çözüm arayışında çok görünürlüğe sahip bir soru için en iyi cevap. Hem çok daha önemli başka kullanımları olan bir öğenin stilini savunması (genel olarak metinde paragraf oluşturma) hem de <strong>, <h1> gibi daha temiz alternatifler yerine bir css stili kullanmayı savunduğu için iyi bir sonucu teşvik etmiyor, <em> ve <mark>. Teknik olarak uygulanabilir, ancak pratikte felaketi davet ediyor.
— Kzqai
4
@Tchalvak: <p>Örnek olarak kullanıyorum çünkü OP bunu örnek olarak kullandı. font-weightyine de herhangi bir öğe üzerinde çalışır.
— mipadi
7
@mipadi Bunu anlıyorum, ama şahsen bir yabancı benden "yüzünü tıraş etmek için gerçekten keskin bir bıçak" isterse, talebin belirli terminolojisini görmezden geleceğim ve ona bir tıraş bıçağı vereceğim.
— Kzqai
23

Metnin anlamı anlamsal olarak güçlüyse , strongöğesini kullanın . Değilse, semantik adlandırılmış bir sınıf kullanın (öğenin anlamını açıkça gösteren, sunumu ve verileri çağırarak boldvb. Karıştırmayın ) ve CSS'nizde ona referans verin.

HTML

<span class="important-message">I'm important!</span>

CSS

.important-message {
   font-weight: bold;
}

Bazı insanlar böğeyi hala bir sunum kancası olarak kullanıyor, ancak günümüzde çoğu insan öğeyi tercih etse de, kullanımdan kaldırılmadıstrong . Sadece doğru kullanıldıklarından emin olun.

— Alex
kaynak
4
<b> kullanımdan kaldırılmamaktadır. Hala HTML 4.01, XHTML 1, XHTML 1.1 ve hatta yaklaşan HTML 5'te desteklenmektedir. Kullanımdan kaldırılması bir efsanedir. O olsun gerektiğini kaldırılacaktır başka bir konudur. Değil. Ayrıca bkz. W3.org/TR/html401/index/elements.html
— thomasrutter
Küçük tekniklik: Bir sınıf adı, kontrollü bir kelime dağarcığı olmadığı için "anlambilimsel" olarak adlandırılamaz: "önemli mesaj" ın uygulamalar arasında ne anlama geldiğini tanımlayan hiçbir standart yoktur. Sınıflarınızı işlevlerine göre adlandırmak hala iyi bir fikirdir çünkü okunabilirliği ve en iyi uygulamayı teşvik eder.
— thomasrutter
@thomasrutter ... Bu yüzden düşün dedim . Bir adın yalnızca bilgisayarlar için anlamsal olması gerekmez; insanlar da html okur.
— alex
10

<B> etiketi canlı ve iyi. <b> kullanımdan kaldırılmadı, ancak kullanımı netleştirildi ve sınırlandırıldı. <b> semantik bir anlamı yoktur, ne de bir ekran okuyucu tarafından söylenebilecek ses vurgusunu iletmez. Ancak <b> , <i> etiketinde olduğu gibi basılı empati iletir . Her ikisinin de tipografide belirli bir yeri vardır, ancak sözlü iletişimde değil, mes frères .

Http://www.whatwg.org/ adresinden alıntı yapmak için

B öğesi, bir belge özetindeki anahtar sözcükler, bir incelemedeki ürün adları veya tipik tipografik sunumu kalınlaştırılmış diğer metin aralıkları gibi ekstra bir önem taşımadan, normal düzyazıdan biçimsel olarak dengelenecek bir metin aralığını temsil eder.
— kullanıcı336882
kaynak
8

Etiketi Boldkullanarak metin veya kelime oluşturabilirsiniz <b>Text</b>.

<strong>Text</strong>Etiketi de kullanabilirsiniz

Baş etiketleri <h1>, <h2>, <h3>, ... varsayılan kalın etiketleri ve CSS ile kendi stilini değiştirmek sürece varsayılan olarak Kalın metin olun

Yukarıdaki etiketler HTML olarak mevcuttu, ancak stili değiştirmek CSSisterseniz kullanabilirsiniz

font-weight:bold
— Nasser Hadjloo
kaynak
7

Aşağıdaki gibi kodlayabilirsiniz ..

<html>
 <head>
 <style>
 p.boldstats{
 font-weight: bold
  }
  </style>
 </head>

  <body>
  <p class="boldstats"> The bold finder </p>
  </body>
</html>
— soLomaDCoder
kaynak
6

Yazı tipi ağırlığı özelliğini,

Örneğin:

<p>This is my paragraph</p>

CSS'nizi aşağıdaki gibi satır içi olarak alabilirsiniz:

<p style="font-weight:bold;">This is my paragraph</p>

Veya aşağıdaki gibi harici CSS stil sayfanızda bulundurun:

p{
  font-weight:bold;
}
— Oluwasayo Babalola
kaynak
5

Hepsi tarihsel ve dinozorların dünyayı gezdiği ve CSS'nin olmadığı bir zamandan kalma.

Daha ciddisi, <b/>etiketi unutun ve font-weight:boldbir CSS kuralında kullanın :)

— Julian Aubourg
kaynak
4

<b> son çare

Kullanabilirsiniz <b>, ancak yalnızca son çare olarak . İyi bir alternatif olarak işe yarayan çeşitli öğeler vardır <b>, işte en kullanışlılık sırasına göre:

Daha kullanışlı alternatifler

  • Önemli metin için: <strong>
  • Vurgulu vurgulu metin için: <em>
  • Başlıklar için, sadece sayfa başlıkları değil, paragraf başlıkları ve her türden diğerleri: <h1> through <h6>

Kullanım için pratik kenar çantası <b>

Kullanmayı savunacağım tek durum <b>şudur:

  1. <strong>aklınızdaki metin için görüntülenmesini istemeyeceğiniz şekilde farklı bir şekilde tasarladıysanız ,

  2. italik vurgu veya başlık istemiyorsunuz ve

  3. yalnızca metni kalınlaştırmak için bir satır içi yayılma veya sınıf içeren bir yayılma alanı kullanmak üzeresiniz . (Örnek: <span class='bold'>)

O zaman bunun <b>yerine kullanılması mantıklıdır , çünkü bu durumda muhtemelen anlamsız bir aralıktan daha temiz / daha kısa ve daha anlamsal olacaktır ve terslik / okunabilirlik bu seçimi yapmak için iyi bir nedendir, çünkü b bir öğe olarak kullanılmak üzere yeniden tanımlanmıştır. basılı vurguyu belirtir .

— Kzqai
kaynak
4

sen de yapabilirsin <p style="font-weight:bold;"> bold text here </p>

— John Boker
kaynak
1
P: inline stilleri hakkında html 5 kullanımdan kaldırılmış olması edilir
— kilit
Emin misiniz? Yalnızca satır içi stil etiketlerinin kullanımdan kaldırılacağını düşündüm, yani. (büyük, s, strike, tt, u)
— John Boker
2
Kullanımdan kaldırılmasalar bile, neredeyse her zaman kötü bir fikirdir. <font> etiketlerini kullanmaya geri dönebilirsiniz.
— tgecho
Satır içi stiller küçük css dosyaları için hala önerilmektedir. Yslow ve Google'ın PageSpeed'i kontrol edin. Bu garip ama kulağa mantıklı geliyor (daha az çağrı?)
— Yannis Dran
@Kzqai:% 100 katılıyorum. Benim özel durumum için, bir div üzerindeki ajax isteğinin ağır yüklenmesi nedeniyle herhangi bir satır içi stilden kurtulmam gerekiyor. Herhangi bir satır içi stili kaldırarak, yükleme süresinde bana birkaç milisaniye kazandırıyor.
— Adrian P.
2 

    #bold{
      font-weight: bold;
    }
    #custom{
      font-weight: 200;
    }
<body>
  <p id="bold"> here is a bold text using css </p>
  <p id="custom"> here is a custom bold text using css </p>
</body>
Snippet'i genişlet

Umarım işe yaramıştır

— zakizakibzr
kaynak
1

Belki CSS sınıflarını kullanmak istersiniz?

p.bold { font-weight:bold; }

Bu şekilde hala <p>normal şekilde kullanabilirsiniz .

<p>This is normal text</p>
<p class="bold">This is bold text</p>

Sana verir:

Bu normal bir metindir.

Bu Kalın Metin.

— Daalbert
kaynak
1

Çok eski bir konu, biliyorum. - ancak eksiksizlik açısından:

kullanırım <span class="bold">my text</span>    

dört yazı tipi stilini yüklerken: normal; cesur; css aracılığıyla web siteme italik ve kalın italik.

Ortaya çıkan çıktının bir yazı tipini değiştirmekten daha iyi olduğunu ve tasarımcıların kalın yazı tipinin nasıl görünmesi gerektiği konusundaki niyetine daha yakın olduğunu düşünüyorum.

Aynısı italik ve bolditalic için de geçerli, bu da bana ek esneklik sağlıyor.

— Jim Butterworth
kaynak
1

bÖğe yerine ne kullanacağınız , o öğenin içeriğinin anlamına bağlıdır.

  • Elementler bve strongşimdiye kadar uzun süredir birlikte var oldular. In HTML 4.01 HTML5 yerini aldığı, strongyani daha güçlü vurgu "güçlü bir vurgu", kullanılacak gerekiyordu em(sadece vurgu gösterilir) elemanı. In HTML 5.2 , strong"içeriğinin güçlü önemini, ciddiyetini veya aciliyet temsil"; "ciddiyet" ve "aciliyet" yönleri, HTML 4.01'e kıyasla spesifikasyonda yenidir. Dolayısıyla b, önemli, ciddi veya acil bir içeriği temsil ediyorsanız , bunun strongyerine kullanmanız önerilir . İsterseniz, anlamlı sınıf nitelikleri ekleyerek bu farklı anlambilimlerini ayırt edebilirsiniz, örneğin <strong class="urgent">...</strong>ve<strong class="warning">...</strong>ve bu "vurgu" türlerini farklı biçimlendirmek için uygun CSS seçicilerini kullanın, örneğin farklı renkler ve yazı tipi boyutları kullanarak (ör. CSS dosyanızda:. strong.warning { color: red; background-color: transparent; border: 2px solid red; }).
    Başka bir alternatif bolan emunsur HTML 5.2 "içeriğinin stres vurgu temsil",. Bu öğenin genellikle italik olarak verildiğine dikkat edin (ve bu nedenle genellikle iöğenin yerini alması önerilir ).
    Diğer cevaplardan bazılarının tavsiyelerini takip etme cazibesine karşı koyardım <strong class="bold">...</strong>. İlk olarak, class niteliği görsel olmayan bağlamlarda (bir ePub kitabını dinleme, genel olarak metinden konuşmaya, ekran okuyucular, Braille); ikincisi, şeyin neden kalın olduğunun .
  • Eğer kullanılırsa b(önceki maddedeki kullanıldığı durumdur metinleri daha kısa açıklıklı, aksine) tüm paragraflar veya başlıklar için, ben uygun ile değiştirin olurdu classeğer nitelikler veya geçerli, WEG-ARIA rolleri gibi alertcanlı için "önemli ve genellikle zamana duyarlı bilgiler içeren" bölge. Yukarıda bahsedildiği gibi, "anlamsal" classöznitelik değerlerini kullanmalısınız, böylece kodu koruyan insanlar (gelecekteki benliğiniz dahil) bir şeyin neden kalın yazdığını anlayabilir .
  • Tüm kullanımları banlamsal bir şeyi temsil etmeyebilir. Örneğin, basılı belgeleri HTML'ye dönüştürdüğünüzde, vurgu veya önemle ilgisi olmayan ancak görsel bir kılavuz olması nedeniyle metin kalın yazılabilir. Eğer devam edebilir, böylece Örneğin, sözlüklerde headwords, diğer içerikten daha "acil" bir daha "ciddi" olmayan beleman ve tercihe anlamlı class özelliği, örneğin eklemek <b class="headword">veya etiketi yerine <span class="headword">argüman dayanan bvardır görsel olmayan bağlamlarda anlam yok.

CSS dosyanızda ( stylediğer yanıtların bazılarının önerdiği gibi öznitelikleri kullanmak yerine ), "kalın" veya önemli metni şekillendirmek için birkaç seçeneğiniz vardır:

  • farklı renklerin belirlenmesi (ön plan ve / veya arka plan);
  • farklı yazı tipi yüzlerinin belirlenmesi;
  • sınırların belirlenmesi (yukarıdaki örneğe bakın);
  • kullanılarak farklı font ağırlıkları kullanılarak font-weightözelliği , sadece daha fazla değer sağlar, normalve bold, yani normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,
  • vb.

Not sayısal font-weight değerleri için destek her zaman büyük olmamıştır.

— Tsundoku
kaynak
0

Bir yan notta aşağıdaki kod da onu kalın hale getirecektir.

<strong> text here </strong>
— Binoj Antony
kaynak
1
... çoğu tarayıcıda ... ancak yalnızca metni daha güçlü vurguya sahip olarak tanımlamanın bir yan etkisi olarak.
— Quentin
0

Aşağıdakileri kullanabilirsiniz:

<p id="p1">Some Text here </p>
#p1{
   font-weight: bold;
}

VEYA

<Strong><p>Some text here </p></strong>

VEYA

Sen kullanabilirsiniz <h1> tagkalın biraz benzer olan

— KFC
kaynak
1
P muhtemelen blok seviyesi olduğundan, güçlü bir şekilde p'nin içine girmek istersiniz.
— Kzqai
0

Günümüzde insanlar kendi bloglarını sıfırdan kodlamak yerine web sitesi oluşturucuları (Wordpress gibi CMS) kullanma eğilimindedir. Profesyonel web geliştiricileri bile bunu daha hızlı olduğu için yapar.

Kendi blogunuzu gerçek hayatta kodlarken aklınızda bulundurmanız gereken avantajlardan ve şeylerden bahsedebilirseniz iyi olur, örneğin:

  • Daha fazla esneklik (özelleştirme)
  • Bir alan adı ödeyin
  • Ödeme yapın ve bir web barındırma seçin
  • Güvenlik ve bakım
  • Bazı web sitesi kurucularının şablonlarının ve grafiklerinin telif hakkı ve lisansı. Barındırıcınızın web sitesi kurucusunu kullandıysanız, web siteniz belirli bir web barındırıcısına kilitlenebilir. Yani başka bir web barındırıcısına geçemezsiniz, çünkü yaparsanız artık o şablonu kullanamazsınız.
  • Web sitesi kapandığında web sitesi oluşturucunun teknik desteğini isterken sorun yaşayın.
  • Bazı şablonlar arama motoru dostu değildir ve bu, web sitenizin sıralamasını (SEO) etkiler

Her neyse, etkileşimli web sayfası oluşturmak için css / css3 veya JavaScript kullanabilirsiniz. Hatta her türden kodunuzu varsayılan blog temasını biçimlendiren bir sunucuya yükleyebilirsiniz.

— soLomaDCoder
kaynak
-2

@Darryl Hein'ın cevabı bir noktaya rağmen doğrudur - anlambilimsel<b> olmadığı için XHTML'den beri hiç önerilmez .

<strong> anlamsal olarak vurgulanmış metin anlamına gelir

font-weight: bold görsel olarak vurgulanmış metin anlamına gelir

<strong>geleneksel bir varsayılan olmasına rağmen kalın olmayacak şekilde css olarak ayarlanabilir. Kırmızı, italik veya altı çizili yapılabilir (tüm bu olasılıklar gerçekten kullanıcı dostu olmasa da). Metindeki ifadeler / kelimeler için kullanın, görsel tasarım nedeniyle değil, anlamlarıyla ilgili

font-weight: bold başlıklar, alt başlıklar, tablo başlık hücreleri vb. gibi tasarımla ilgili kalın bölümler için kullanılmalıdır.

— Muhafız
kaynak
Bunun html5'te <b> için revize edilmiş tanımda doğru olduğuna inanmıyorum.
— Kzqai
Aynı zamanda siz kendi başınıza <b>bunun son çare olduğunu yazdınız ve b'nin tavsiye edilmediğini yazdım. Çelişki nerede?
— Muhafız
3
Maalesef, dev.w3.org/html5/markup/b.html#b...previous versions of HTML defined the b element only in presentational terms, the element has now been given the specific semantic purpose of representing text “offset from its surrounding content without conveying any extra emphasis or importance, and [conventionally boldened]”. uyarınca html 5: html5'te yeniden bağlanmış bir anlamsal anlamı olduğunu kastettiğim için daha spesifik olmalıydı . Düşünmemin nedeni budur <b>: geçerli / son çare / anlambilimsel değildi / anlambilimsel olarak yeniden tanımlandı, vb. Sadece ince bir fark.
— Kzqai
-3

<strong>Etiketi daha anlamsal olduğu için kullanın . <b>amortismana tabi tutulduğu için kullanmamak en iyisidir. Ayrıca kalın metne daha fazla Arama Motoru Optimizasyonu (SEO) ağırlığı verilir, bu nedenle CSS kullanarak <strong>a <p>veya <span>kalın yapmak yerine gerçek kullanmak her zaman en iyisidir .

— Matthew James Taylor
kaynak
4
Bir şeyleri "daha anlamsal" oldukları için kullanmayın - onları, yazdığınız şeye uygun anlambilimlere sahip oldukları için kullanın. OP'nin sahip olduğu metnin anlamsallığının ne olduğunu bilmiyoruz.
— Quentin
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.