Alternatywa dla tagu HTML Bold

83

Okej, więc wiem, że w HTML możesz użyć <b>tagu, ale czy nie ma "weight=bold"atrybutu, którego mogę użyć w <p>tagu?

A może to w CSS czy Javascript?

html  css 
— Kzqai
źródło
5
Rozpoczynam nagrodę za to pytanie, aby promować jego widoczność, ponieważ uważam, że najlepsza odpowiedź jest praktycznie katastrofalna, mimo że jest technicznie poprawna. Zwłaszcza w przypadku pytania, które ma bardzo wysoką pozycję w wynikach wyszukiwania Google z hasłem „pogrubiony tag w html5”.
— Kzqai
7
Uważam, że ta nagroda jest śmieszna. @mipadi ma poprawną odpowiedź. Jeśli użytkownik nie może zrozumieć, że może chce stworzyć coś innego niż pwtedy, jest to jego własny problem. Może zadadzą inne pytanie SO, które to wyjaśni.
— Ryley

Odpowiedzi:

100

Weź również pod uwagę <strong>tag. Jest znacznie lepszy dla czytników ekranu, a zatem lepszy pod względem dostępności. Wyszukiwarki również używać <strong>znaczników w celu określenia ważnych treści podobny do tego, jak ich używać tagów nagłówka <h1>, <h2>itd (choć <b>mają również podobne znaczenie do wyszukiwarek). Jeśli chcesz podkreślić znaczenie tekstu, użyj <strong>. Jeśli nie chcesz podkreślać ważności, użyj <b>tagu lub użyj font-weight:bold;stylu na elemencie lub w CSS.

Chociaż, jeśli pogrubiasz cały akapit, prawdopodobnie lepiej jest użyć opcji CSS. Zmniejszy to wpływ na czytniki ekranu i prawdopodobnie nie ma sensu wyróżniać całego akapitu. Ale z drugiej strony widziałem, jak pogrubienie było używane do podkreślenia całego akapitu wcześniej z dobrego powodu. W takim przypadku font-weight:bold;jest to, czego chcesz użyć, prawdopodobnie w klasie / stylu.

W końcu <strong>, <b>czy font-weight:bold;będą wszystkie prace i osiągnąć coś podobnego wizualnie (prawdopodobnie dokładnie takie same), ale mają nieco inne znaczenie. Ponadto, upewnij się, że jeśli to, czego pogrubienie jest nagłówek, użyj tagów nagłówka: <h1>, <h2>, itd.

— Darryl Hein
źródło
37
<b> NIE jest przestarzałe w żadnym aktualnym standardzie HTML lub XHTML, ani nie jest przestarzałe nawet w nadchodzącym HTML 5. <b> i <strong> mają różne znaczenia; <b> oznacza „tekst pogrubiony”. <strong> oznacza „silniejszy akcent”, ale nie narzuca stylu tekstu; przeglądarki domyślnie pogrubione.
— thomasrutter
2
Powszechne użycie <b> zmalało, ale rzeczywisty element nie został wycofany zgodnie ze specyfikacjami W3C.
— Alex
4
Znacznik <b> jest faktycznie przestarzały w HTML5 ... i zastąpiony innym tagiem <b> o nieco innym znaczeniu. To dziwny wybór, ale w zasadzie tak właśnie zrobili. W każdym razie nie należy go używać do stylizowania tekstu jako pogrubionego.
— Chuck,
@Chuck: co oznacza nowy element b?
— Alex
1
Należy pamiętać, że nowoczesne czytniki ekranu (takie jak najnowsze wersje JAWS i Window Eyes) nie przekazują inaczej zawartości elementów <em> lub <strong> w normalnych ustawieniach. Użytkownik musi przejść do trybu korekty, aby miało to wpływ na mowę. Dobry odczyt: Czytniki ekranu brak nacisku i I, B, em i silne elementy HTML5 .
— Jon Gibbins,
79

Myślisz o właściwości CSS font-weight:

p { font-weight: bold; }
— mipadi
źródło
6
Cóż, miejmy nadzieję, że nie skopiuje dokładnie tego, co masz ... zepsułby kilka rzeczy :)
— Darryl Hein
6
To przykład poprawny składniowo. PO będzie musiał zdecydować, w jaki sposób chce, aby był on używany.
— mipadi
6
„Prawidłowa składnia” to nie wszystko, chciałbym, żeby ta odpowiedź była lepsza, jako najlepsza odpowiedź na pytanie z dużą widocznością w poszukiwaniu rozwiązania znacznika b. Nie promuje dobrego wyniku, zarówno dlatego, że opowiada się za stylizowaniem elementu, który ma inne, znacznie ważniejsze zastosowania (ogólnie w tekście), jak i dlatego, że zaleca używanie stylu CSS zamiast czystszych alternatyw, takich jak <strong>, <h1>, <em> i <mark>. Jest technicznie wykonalny, ale praktycznie zaprasza na katastrofę.
— Kzqai
4
@Tchalvak: Używam <p>jako przykładu, ponieważ OP użył go jako przykładu. font-weightdziała jednak na każdym elemencie.
— mipadi
7
@mipadi Rozumiem to, ale osobiście jeśli nieznajomy poprosi mnie o „naprawdę ostry nóż do golenia twarzy”, zignoruję konkretną terminologię prośby i dam mu brzytwę.
— Kzqai
23

Jeśli znaczenie tekstu jest semantycznie silne , użyj strongelementu. Jeśli nie, użyj semantycznej nazwanej klasy (takiej, która jasno pokazuje znaczenie elementu, nie mieszaj prezentacji i danych przez wywołanie jej bolditp.) I odwołaj się do niej w swoim CSS.

HTML

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

CSS

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

Niektórzy ludzie nadal używają tego belementu jako haka prezentacyjnego, ale nie został on wycofany , chociaż obecnie większość ludzi preferuje ten strongelement. Tylko upewnij się, że są prawidłowo używane.

— Alex
źródło
4
<b> NIE jest przestarzałe. Nadal jest obsługiwany w HTML 4.01, XHTML 1, XHTML 1.1, a nawet w nadchodzącym HTML 5. Jego wycofanie jest mitem. To, czy powinno zostać wycofane, to inna sprawa. Tak nie jest. Zobacz także w3.org/TR/html401/index/elements.html
— thomasrutter
Mała kwestia techniczna: nazwy klasy nie można nazwać „semantyczną”, ponieważ nie jest to słownik kontrolowany: nigdzie nie ma standardu, który definiowałby, co oznacza „ważna wiadomość” w aplikacjach. Nazywanie klas według ich funkcji jest nadal dobrym pomysłem, ponieważ promuje czytelność i najlepsze praktyki.
— thomasrutter
@thomasrutter ... Dlatego powiedziałem myśl . Nazwa nie musi być semantyczna tylko dla komputerów; ludzie też czytają html.
— Alex
10

<B> tag żyje i ma się dobrze. <b> nie jest przestarzałe, ale jego użycie zostało wyjaśnione i ograniczone. <b> nie ma znaczenia semantycznego ani nie przekazuje akcentu, który mógłby wypowiedzieć czytnik ekranu. <b> przekazuje jednak drukowaną empazę , podobnie jak tag <i>. Obie zajmują szczególne miejsce w typografii, ale nie w komunikacji mówionej, mes frères .

Cytat z http://www.whatwg.org/

Element b reprezentuje zakres tekstu, który ma być stylistycznie odsunięty od zwykłej prozy bez nadawania dodatkowego znaczenia, na przykład słowa kluczowe w streszczeniu dokumentu, nazwy produktów w recenzji lub inne fragmenty tekstu, których typowa prezentacja typograficzna jest pogrubiona.
— user336882
źródło
8

Możesz tworzyć tekst lub słowa Boldza pomocą <b>Text</b>tagu.

Możesz także użyć <strong>Text</strong>tagu

Tagi głowy <h1>, <h2>, <h3>, ... są domyślne pogrubione tagi i uczynić swój tekst Bold domyślnie, chyba że zmieni swój styl z CSS

Powyższe tagi były dostępne w HTML, ale jeśli chcesz zmienić styl CSS, możesz użyć

font-weight:bold
— Nasser Hadjloo
źródło
7

Możesz kodować jak poniżej ..

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

  <body>
  <p class="boldstats"> The bold finder </p>
  </body>
</html>
— soLomaDCoder
źródło
6

Możesz użyć atrybutu font-weight na swoim

Na przykład:

<p>This is my paragraph</p>

Możesz mieć wbudowany CSS, jak poniżej:

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

Lub umieść to w swoim zewnętrznym arkuszu stylów CSS, jak poniżej:

p{
  font-weight:bold;
}
— Oluwasayo Babalola
źródło
5

To wszystko jest historyczne i pochodzi z czasów, gdy dinozaury chodziły po ziemi, a CSS nie istniało.

Mówiąc poważnie, zapomnij o <b/>tagu i użyj go font-weight:boldw regule CSS :)

— Julian Aubourg
źródło
4

<b> jest ostatecznością

Możesz użyć <b>, ale tylko w ostateczności . Istnieje wiele elementów, które sprawdzają się jako dobre alternatywy <b>, tutaj są one uporządkowane według największej przydatności:

Bardziej przydatne alternatywy

  • W przypadku ważnego tekstu: <strong>
  • W przypadku tekstu z akcentem: <em>
  • W przypadku nagłówków, nie tylko nagłówków stron, ale nagłówków akapitów i innych wszelkiego rodzaju: <h1> through <h6>

Praktyczna obudowa krawędziowa do użytku <b>

Jedyny przypadek, w którym zalecałbym używanie, <b>to if

  1. stylizowałeś <strong>w inny sposób, niż nie chcesz wyświetlać dla tekstu, o którym myślisz,

  2. nie chcesz kursywy lub nagłówka, i

  3. masz zamiar użyć wbudowanego zakresu lub zakresu z klasą tylko do pogrubienia tekstu . (Na przykład <span class='bold'>:)

Wtedy rozsądne jest użycie <b>zamiast tego, ponieważ w takim przypadku będzie prawdopodobnie czystszy / krótszy i bardziej semantyczny niż nieemantyczny rozpiętość, a terciness / czytelność jest dobrym powodem do dokonania tego wyboru, ponieważ b zostało przedefiniowane do użycia jako element oznaczające drukowane wyróżnienie .

— Kzqai
źródło
4

możesz też zrobić <p style="font-weight:bold;"> bold text here </p>

— John Boker
źródło
1
style wbudowane zostaną wycofane w HTML 5: P
— blokada
Jesteś pewny? Myślałem, że tylko tagi typu inline zostaną wycofane, tj. (duże, s, strajk, tt, u)
— John Boker
2
Nawet jeśli nie są przestarzałe, prawie zawsze są złym pomysłem. Równie dobrze możesz wrócić do używania tagów <font>.
— tgecho
style wbudowane są nadal sugerowane dla małych plików css. Sprawdź Yslow i Google PageSpeed. To dziwne, ale brzmi rozsądnie (mniej telefonów?)
— Yannis Dran
@Kzqai: Zgadzam się w 100%. W moim konkretnym przypadku muszę pozbyć się stylu wbudowanego ze względu na duże obciążenie żądania AJAX w module DIV. Samo usunięcie stylu wbudowanego oszczędza mi kilka milisekund czasu ładowania.
— 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>
Rozwiń fragment

Mam nadzieję, że zadziałało

— zakizakibzr
źródło
1

Może chcesz użyć klas CSS?

p.bold { font-weight:bold; }

W ten sposób możesz nadal <p>normalnie używać .

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

Daje Ci:

To jest normalny tekst.

To jest pogrubiony tekst.

— daalbert
źródło
1

Wiem, bardzo stara nić. - ale dla kompletności:

używam <span class="bold">my text</span>    

gdy przesyłam cztery style czcionek: normalna; pogrubienie; kursywa i pogrubiona kursywa na mojej stronie internetowej poprzez css.

Wydaje mi się, że wynikowy wynik jest lepszy niż zwykła modyfikacja czcionki i jest bliższy intencjom projektantów, jak powinna wyglądać pogrubiona czcionka.

To samo dotyczy oczywiście kursywy i pogrubienia, co daje mi dodatkową elastyczność.

— Jim Butterworth
źródło
1

To, czego używasz zamiast belementu, zależy od semantyki zawartości tego elementu.

  • Żywioły bi strongjuż od dawna współistnieją. W HTML 4.01 , który został zastąpiony przez HTML5, strongmiał być używany do „silnego nacisku”, tj. Silniejszego nacisku niż emelement (który właśnie wskazywał na nacisk). W HTML 5.2 , strong„reprezentuje silne znaczenie, powagę lub pilną za jego zawartość”; aspekty „powagi” i „pilności” są nowe w specyfikacji w porównaniu z HTML 4.01. Jeśli więc bprzedstawiałeś treści, które były ważne, poważne lub pilne, zalecamy użycie strongzamiast nich. Jeśli chcesz, możesz rozróżnić te różne semantyki, dodając znaczące atrybuty klas, np. <strong class="urgent">...</strong>I<strong class="warning">...</strong>i użyj odpowiednich selektorów CSS, aby nadać inny styl tym typom „wyróżnień”, np. używając różnych kolorów i rozmiarów czcionek (np. w pliku CSS:. strong.warning { color: red; background-color: transparent; border: 2px solid red; }).
    Inną alternatywą bjest emelement , który w HTML 5.2 „reprezentuje akcent podkreślający zawartość”. Zwróć uwagę, że ten element jest zwykle wyświetlany kursywą (i dlatego często jest zalecany jako zamiennik ielementu).
    Oparłbym się pokusie pójścia za radą zawartą w innych odpowiedziach i napisania czegoś takiego <strong class="bold">...</strong>. Po pierwsze, atrybut class nie ma znaczenia w kontekstach niewizualnych (słuchanie książki ePub, ogólnie zamiana tekstu na mowę, czytniki ekranu, brajl); po drugie,dlaczego coś było pogrubione.
  • Jeśli używałbyś bdla całych akapitów lub nagłówków (w przeciwieństwie do krótszych rozpiętości tekstów, co jest przypadkiem użycia w poprzednim podpunkcie), zastąpiłbym go odpowiednimi classatrybutami lub, w stosownych przypadkach, rolami WAI-ARIA, takimi jak alertna żywo region „z ważnymi i zwykle wymagającymi uwagi informacjami”. Jak wspomniano powyżej, powinieneś używać „semantycznych” classwartości atrybutów, aby osoby obsługujące kod (w tym Twoje przyszłe ja) mogły dowiedzieć się, dlaczego coś zostało pogrubione.
  • Nie wszystkie zastosowania znaku bmogą oznaczać coś semantycznego. Na przykład, gdy konwertujesz drukowane dokumenty na HTML, tekst może być pogrubiony z powodów, które nie mają nic wspólnego z naciskiem lub ważnością, ale jako wizualny przewodnik. Na przykład, hasła w słownikach nie są bardziej „poważne”, „pilne” niż inne treści, więc możesz zachować belement i opcjonalnie dodać znaczący atrybut klasy, np. <b class="headword">Lub zamienić tag <span class="headword">na oparty na argumencie, który bma bez znaczenia w kontekstach niewizualnych.

W swoim pliku CSS (zamiast używać styleatrybutów, jak zalecały niektóre inne odpowiedzi), masz kilka opcji stylizacji „pogrubionego” lub ważnego tekstu:

  • określenie różnych kolorów (pierwszego planu i / lub tła);
  • określanie różnych krojów czcionek;
  • określanie granic (patrz przykład powyżej);
  • używanie różnych grubości czcionek przy użyciu font-weightwłaściwości , która pozwala na więcej wartości niż tylko normali bold, a mianowicie normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,
  • itp.

Zauważ, że obsługa numerycznych wartości grubości czcionek nie zawsze była świetna.

— Tsundoku
źródło
0

Na marginesie poniższy kod sprawi, że będzie on pogrubiony.

<strong> text here </strong>
— Binoj Antony
źródło
1
... w większości przeglądarek ... ale tylko jako efekt uboczny opisania tekstu jako silniej zaakcentowanego.
— Quentin
0

Możesz użyć następujących:

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

LUB

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

LUB

Możesz użyć <h1> tagczegoś podobnego do pogrubienia

— KFC
źródło
1
Ponieważ p jest prawdopodobnie poziomem bloku, chciałbyś silnie wejść do środka p.
— Kzqai
0

W dzisiejszych czasach ludzie mają tendencję do korzystania z narzędzi do tworzenia witryn internetowych (CMS, takich jak Wordpress), zamiast kodowania własnego bloga od zera. Nawet profesjonalni twórcy stron internetowych robią to, ponieważ jest szybszy.

Byłoby miło, gdybyś mógł wspomnieć o zaletach i rzeczach, o których należy pamiętać podczas kodowania własnego bloga w prawdziwym życiu, na przykład:

  • Większa elastyczność (dostosowywanie)
  • Zapłać nazwę domeny
  • Zapłać i wybierz hosting
  • Bezpieczeństwo i konserwacja
  • Prawa autorskie i licencja na szablony i grafiki niektórych twórców witryn. Twoja witryna może być zablokowana na określonym hoście internetowym, jeśli użyjesz narzędzia do tworzenia witryn hosta. Nie możesz więc przejść do innego hosta internetowego, ponieważ jeśli to zrobisz, nie będziesz mógł już używać tego szablonu.
  • Występują problemy, prosząc o pomoc techniczną twórcy witryn, gdy witryna przestaje działać.
  • Niektóre szablony nie są przyjazne dla wyszukiwarek, co wpływa na ranking witryny (SEO)

W każdym razie możesz użyć css / css3 lub JavaScript do tworzenia interaktywnej strony internetowej. Nawet możesz przesłać swój wszelkiego rodzaju kod na serwer, formatując domyślny motyw bloga.

— soLomaDCoder
źródło
-2

Odpowiedź @Darryl Hein jest prawidłowa pomimo jednego punktu - <b>w ogóle nie jest zalecana od XHTML, ponieważ nie jest semantyczna .

<strong> oznacza semantycznie wyróżniony tekst

font-weight: bold oznacza wizualnie wyróżniony tekst

<strong>można dostosować css, aby nie było pogrubione, chociaż jest to konwencjonalne ustawienie domyślne. Może być czerwony, kursywa lub podkreślony (chociaż wszystkie te możliwości nie są tak naprawdę przyjazne dla użytkownika). Używaj go do fraz / słów w tekście, nie ze względu na projekt wizualny, ale związany z ich znaczeniem

font-weight: bold należy używać do pogrubionych części związanych z projektem, takich jak nagłówki, podtytuły, komórki nagłówków tabeli itp.

— Strzec
źródło
Nie wierzę, że jest to prawdą w zmienionej definicji słowa <b> w html5.
— Kzqai
Jednocześnie sam napisałeś, że <b>to ostateczność, a ja napisałem, że b nie jest zalecane. Gdzie jest sprzeczność?
— Strażnik
3
Przepraszam, powinno być bardziej szczegółowe, ponieważ chodziło mi o to, że ma on zdefiniowane znaczenie semantyczne w html 5: ...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]”.w html5, zgodnie z dev.w3.org/html5/markup/b.html#b . To jest powód, który uważam za <b>: ważny / ostateczny / nie semantyczny / został przedefiniowany jako semantyczny itp. Po prostu subtelna różnica.
— Kzqai
-3

Użyj <strong>tagu, ponieważ jest bardziej semantyczny. <b>została umorzona, więc najlepiej z niej nie korzystać. Również tekst pogrubiony podano więcej Search Engine Optimization (SEO) Masa dlatego zawsze najlepiej użyć prawdziwy <strong>zamiast dokonywania <p>lub <span>pogrubiony za pomocą CSS.

— Matthew James Taylor
źródło
4
Nie używaj rzeczy, ponieważ są „bardziej semantyczne” - używaj ich, ponieważ mają semantykę, która ma zastosowanie do tego, co piszesz. Nie wiemy, jaka jest semantyka tekstu OP.
— Quentin
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.