Jaka jest różnica między <b> a <strong>, <i> i <em>?

Jaka jest różnica między <b>i <strong>, <i>a <em>w HTML / XHTML? Kiedy powinieneś użyć każdego z nich?

Mają taki sam wpływ na normalne silniki renderujące przeglądarki internetowe , ale istnieje między nimi zasadnicza różnica .

Jak pisze autor w liście do dyskusji :

Pomyśl o trzech różnych sytuacjach:

• przeglądarki internetowe
• ślepi ludzie
• telefony komórkowe

„Pogrubienie” jest stylem - kiedy mówisz „pogrubienie słowa” , ludzie w zasadzie wiedzą, że oznacza to dodanie więcej, powiedzmy „tuszu” wokół liter, aż wyróżnią się wśród pozostałych liter.

To niestety nic nie znaczy dla osoby niewidomej. W telefonach komórkowych i innych urządzeniach PDA tekst jest już pogrubiony, ponieważ rozdzielczość ekranu jest bardzo mała. Nie możesz śmiać odważnie bez zepsucia czegoś.

<b>to styl - wiemy, jak powinien wyglądać „odważny”.

<strong>jest jednak wskazówką, jak należy coś rozumieć . „Silny” może (i często ma) oznaczać „pogrubienie” w przeglądarce, ale może również oznaczać niższy ton dla mówiącego programu, takiego jak Szczęki (dla osób niewidomych) lub być reprezentowany przez podkreślenie (ponieważ nie można pogrubić pogrubienie) w Palm Pilot.

HTML nigdy nie był przeznaczony do stylów. Zrobić kilka wyszukiwania dla „Tim Berners-Lee” i „sieci semantycznej”. <strong>ma charakter semantyczny - opisuje otaczający go tekst (np. „ten tekst powinien być mocniejszy niż reszta wyświetlanego tekstu” ) w przeciwieństwie do opisu, w jaki sposób powinien być wyświetlany otaczany tekst (np. „ten tekst powinien być pogrubienie ” ).

<b>i <i>są wyraźne - określają odpowiednio pogrubienie i kursywę.

<strong>i <em>są semantyczne - określają, że załączony tekst powinien być „mocny” lub „podkreślony” w jakiś sposób, zwykle pogrubiony i pochylony, ale umożliwia kontrolę rzeczywistego stylu za pomocą CSS. Dlatego są one preferowane na nowoczesnych stronach internetowych.

<strong>i <em>dodaj dodatkowe znaczenie semantyczne do swojego dokumentu. Tak się składa, że ​​nadają tekstowi pogrubiony i pochylony styl.

Możesz oczywiście zastąpić ich styl za pomocą CSS.

<b>a <i>z drugiej strony zastosowanie tylko stylizacji czcionki i nie powinny być dłużej stosowane. (Ponieważ należy sformatować za pomocą CSS, a jeśli tekst byłby naprawdę ważny, prawdopodobnie i tak byłbyś „mocny” lub „podkreślony”!)

Mam nadzieję, że to ma sens.

Oto podsumowanie definicji wraz z sugerowanym użyciem:

<b>... zakres tekstu, na który zwraca się uwagę w celach użytkowych, nie przekazując żadnego dodatkowego znaczenia i bez implikacji alternatywnego głosu lub nastroju, takich jak kluczowe słowa w streszczeniu dokumentu, nazwy produktów w recenzji, użyteczne słowa w interaktywne oprogramowanie tekstowe lub artykuł lede .

<strong> ... teraz reprezentuje ważność, a nie silny nacisk.

<i>... rozpiętość tekstu naprzemiennym głosem lub nastrojem, lub inaczej skompensowana w stosunku do normalnej prozy w sposób wskazujący na inną jakość tekstu, na przykład oznaczenie taksonomiczne , termin techniczny , idiomatyczne wyrażenie z innego języka , myśl lub nazwa statku w tekstach zachodnich.

<em> ... wskazuje nacisk.

(Są to wszystkie bezpośrednie cytaty ze źródeł W3C, z moim podkreśleniem. Zobacz: https://rawgithub.com/whatwg/html-differences/master/Overview.html#changed-elements i http://www.w3.org /TR/html401/struct/text.html#h-9.2.1 dla oryginałów)

<b>i <i>oba są związane ze stylem, <em>a jednocześnie <strong>są semantyczne. W HTML 4 pierwsze są klasyfikowane jako elementy stylu czcionki , a drugie jako elementy fraz .

Jak wskazałeś poprawnie <i>i <em>często uważa się je za podobne, ponieważ przeglądarki często wyświetlają oba kursywą. Ale zgodnie ze specyfikacją <em> wskazuje nacisk i <strong> wskazuje mocniejszy nacisk , co jest dość jasne, ale często błędnie interpretowane. Z drugiej strony, rozróżnienie między momentem użycia <i>lub <b>naprawdę jest kwestią stylu.

Choć <strong>i <em>są oczywiście bardziej semantycznie poprawne, nie wydają się jednoznaczne uzasadnione powody, aby używać <b>i <i>znaczniki dla klienta treści napisane.

W takich treściach słowa lub frazy mogą być pogrubione lub pochylone i generalnie nie do nas należy analiza uzasadnienia semantycznego takiego pogrubienia lub kursywy.

Ponadto takie treści mogą odnosić się do pogrubionych i pochylonych słów i zwrotów, aby przekazać określone znaczenie.

Przykładem może być pytanie egzaminacyjne z języka angielskiego, które instruuje ucznia, aby zastąpił pogrubione słowo.

<em>i <strong>zużywają więcej pasma niż <i>i <b>.

Wymagają także więcej pisania (jeśli nie są generowane automatycznie).

Zaśmiecają również ekran edytora większą ilością tekstu. Wydaje mi się, że programiści lubią mniejsze pliki źródłowe, jeśli są takie same. (I bądźmy szczerzy, są takie same. Tak, istnieją „techniczne” (<i> kaszel </i>, hm, przepraszam) różnice, ale to na ogół fałszywe.)

Za pomocą dowolnego z powyższych tagów możesz użyć arkuszy stylów, aby dostosować ich wygląd do potrzeb, jeśli chcesz, aby wyglądały inaczej niż ich domyślne renderowania.

Jak inni powiedzieli, <b> i <i> są jawne (tzn. „Pogrub ten tekst”), podczas gdy <strong> i <em> są semantyczne (tj. „Ten tekst powinien zostać podkreślony”).

W kontekście nowoczesnej przeglądarki internetowej trudno dostrzec różnicę (obie wydają się dawać ten sam wynik, prawda?), Ale pomyśl o czytnikach ekranu dla osób niedowidzących. Gdyby czytnik ekranu napotkał znacznik <i>, nie wiedziałby, co robić. Ale jeśli natrafi na znacznik <em>, wie, że wszystko, co jest w środku, powinno zostać podkreślone dla słuchacza. I w tym praktyczna różnica.

<i>, <b>, <em>I <strong>znaczniki są tradycyjnie reprezentacyjne. Ale w HTML5 nadano im nowe znaczenie semantyczne .

<i>i <b>został użyty do stylu czcionki w HTML4. <i>zastosowano kursywę i <b>pogrubienie. W HTML5 <i>znacznik ma nowe znaczenie semantyczne „ alternatywny głos lub nastrój ”, a <b>znacznik ma znaczenie przesunięcia stylistycznego .

Przykładami użycia <i>tagu są - oznaczenie taksonomiczne, termin techniczny, fraza idiomatyczna z innego języka, transliteracja, myśl, nazwy statków w tekstach zachodnich. Jak na przykład -

<p><i>I hope this works</i>, he thought.</p>

Przykładami użycia <b>tagu są słowa kluczowe w ekstrakcie dokumentu, nazwy produktów w recenzji, słowa, które można wykonać w interaktywnym oprogramowaniu tekstowym, artykuł.

Poniższy przykładowy akapit jest stylistycznie odsunięty od akapitów po nim.

<p><b class="lead">The event takes place this upcoming Saturday, and over 3,000 people have already registered.</b></p>

<em>i <strong>miał znaczenie podkreślenia i silnego podkreślenia w HTML4. Ale w HTML5 <em>pomocą podkreślił nacisk i <strong>dochodowe silne znaczenie .

W poniższym przykładzie powinna nastąpić zmiana językowa podczas czytania tego słowa przed ...

<p>Make sure to sign up <em>before</em> the day of the event, September 16, 2016</p>

W tym samym przykładzie możemy użyć <strong>tagu w następujący sposób ...

<p>Make sure to sign up <em>before</em> the day of the event, <strong>September 16, 2016</strong></p>

nadać znaczenie w dniu wydarzenia.

MDN Ref:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/b

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/i

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong

Jak stwierdzili inni, różnica jest, że <b>i <i>czcionki hardcode style, podczas <strong>i <em>dyktować znaczenie semantyczne, ze stylem czcionki (lub mówiąc intonację przeglądarki, lub co-ma-ty), które zostaną określone w czasie, gdy tekst jest renderowane (lub Mówiony).

Możesz to potraktować jako różnicę między „fizycznym” stylem czcionki a stylem „logicznym”, jeśli chcesz. W późniejszym czasie, może chcesz zmienić sposób <strong>i <em>są wyświetlane tekst, powiedzmy, przez zmieniających właściwości w arkuszu stylów, aby dodać zmiany kolorów i rozmiarów, a nawet korzystać z różnych rodzajów czcionek w całości. Jeśli użyłeś znacznika „logicznego” zamiast znacznika „fizycznego”, możesz po prostu zmienić właściwości wyświetlania w jednym miejscu w arkuszu stylów, a następnie wszystkie strony, które odnoszą się do tego arkusza stylów, zostaną automatycznie zmienione , bez kiedykolwiek będę musiał je edytować.

Całkiem zręczny, co?

Jest to również uzasadnienie definiowania stylów podrzędnych (do których odwołuje się użycie style=właściwości w znacznikach tekstowych) dla akapitów, komórek tabeli, tekstu nagłówka, podpisów itp <div>. Oraz używania znaczników. Możesz zdefiniować reprezentację fizyczną dla swoich stylów logicznych w arkuszu stylów, a zmiany są automatycznie odzwierciedlane na stronach internetowych, które odwołują się do tego stylu. Chcesz innej reprezentacji kodu źródłowego? Przedefiniuj czcionkę, rozmiar, wagę, odstępy itp. Dla swojego stylu „kodu”.

Jeśli używasz XHTML, możesz nawet zdefiniować własne znaczniki semantyczne, a Twój arkusz stylów wykonałby dla ciebie konwersje do fizycznych stylów czcionek i układów.

Używam zarówno <strong>, jak i <b>, dokładnie z powodów wymienionych w tym wątku odpowiedzi. Czasami pogrubienie jakiegoś tekstu po prostu wygląda lepiej, ale niekoniecznie jest to semantycznie ważniejsze niż reszta zdania. Oto przykład ze strony, nad którą teraz pracuję:

„Pobiera <strong> wszystkie </strong> książki o <b> lacrosse </b>.”

W tym zdaniu słowo „wszystko” jest bardzo ważne, a „lacrosse” mniej - po prostu chciałem, aby było odważne, ponieważ reprezentuje wyszukiwane hasło, więc chciałem trochę wizualnej separacji. Jeśli przeglądasz stronę za pomocą czytnika ekranu, naprawdę nie sądzę, aby musiała wychodzić z drogi, aby podkreślić słowo „lacrosse”.

Chciałbym sobie wyobrazić, że większość programistów używa jednego z nich, ale oba są w porządku - <b> zdecydowanie nie jest przestarzałe, jak twierdzą niektórzy ludzie. Dla mnie to tylko cienka granica między atrakcyjnością wizualną a znaczeniem.

Używaj ich tylko wtedy, gdy korzystanie z klas stylów CSS jest z jakiegokolwiek powodu niewygodne lub niemożliwe (np. W systemach blogów, zezwalaj na używanie tylko niektórych tagów w postach i ewentualnie osadzonych stylów). Innym powodem jest obsługa bardzo starych przeglądarek (niektóre urządzenia mobilne?) Lub prymitywnych wyszukiwarek (które dają punkty <b>lub <strong>tagi zamiast analizować style CSS).

Jeśli możesz zdefiniować style CSS, użyj ich.

W przypadku pogrubienia tekstu za pomocą <b> znacznika

W przypadku tekstu ważne jest użycie <strong> znacznika

Dla tekstu kursywą za pomocą <i> znacznika

Dla podkreślonego tekstu za pomocą <em> znacznika

<b>i <i>należy tego unikać, ponieważ opisują styl tekstu. Zamiast tego użyj <strong>i <em>ponieważ to opisuje semantykę (znaczenie) tekstu.

Jak wszystkie rzeczy w HTML, to nie należy myśleć o tym, jak ma to wyglądać , ale co faktycznie średni . Jasne, może być odważnie i kursywą dla Ciebie, ale nie dla czytnika ekranu.

b lub i oznacza, że ​​chcesz, aby tekst był renderowany pogrubioną czcionką lub kursywą. strong lub em oznacza, że ​​chcesz, aby tekst był renderowany w sposób, który użytkownik rozumie jako „ważny”. Domyślnie renderowane jest jako pogrubienie, a em - kursywą, ale niektóre inne kultury mogą używać innego odwzorowania.

Podobnie jak łańcuchy w programie, b i ja byłyby „zakodowane na stałe”, a silne i em byłyby „zlokalizowane”.

„Mają ten sam efekt. Jednak XHTML, czystsza, nowsza wersja HTML, zaleca użycie <strong>znacznika. Silny jest lepszy, ponieważ jest łatwiejszy do odczytania - jego znaczenie jest wyraźniejsze. Ponadto <strong>przekazuje znaczenie - pokazuje tekst silnie - podczas gdy <b>(dla pogrubienia) przekazuje się metodę - pogrubienie tekstu Przy silnym, twój kod nadal ma sens, jeśli używasz arkuszy stylów CSS, aby zmienić metody poprawiania tekstu.

To samo dotyczy różnicy między <i>i <em>„.

Google Dixit:

http://wiki.answers.com/Q/What_is_the_difference_between_HTML_tags_b_and_strong

Elementy formatowania HTML:

HTML definiuje również specjalne elementy do definiowania tekstu o specjalnym znaczeniu. HTML używa elementów takich jak <b> i <i> do formatowania wyników, takich jak pogrubienie lub kursywa.

Pogrubienie i silne formatowanie HTML:

Element HTML <b> definiuje pogrubiony tekst, bez żadnego dodatkowego znaczenia.

<b>This text is bold</b>

Element HTML <strong> definiuje silny tekst z dodanym semantycznym „silnym” znaczeniem.

<strong>This text is strong</strong>

Kursywa i podkreślone formatowanie HTML:

Element HTML <i> definiuje kursywę, bez żadnego dodatkowego znaczenia.

<i>This text is italic</i>

Element HTML <em> definiuje wyróżniony tekst z dodatkowym znaczeniem semantycznym.

<em>This text is emphasized</em>

Na ogół powinieneś unikać <b>i <i>. Zostały one wprowadzone w celu układania strony (zmiany wyglądu) we wczesnych wersjach HMTL przed utworzeniem CSS, podobnie jak w międzyczasie usunięty fonttag, i były głównie utrzymywane dla kompatybilności wstecznej i ponieważ niektóre fora pozwalają na wbudowany HTML i to jest łatwe sposób na zmianę wyglądu tekstu (np. używając BBCode [i], możesz użyć <i>i tak dalej).

Od czasu stworzenia CSS układanie w rzeczywistości nie jest już niczym, co powinno być zrobione w HTML, dlatego właśnie CSS został stworzony w pierwszej kolejności (HTML == Struktura, CSS == Układ). Znaczniki te mogą równie dobrze zniknąć w przyszłości, w końcu możesz po prostu użyć CSS i spanznaczników, aby tekst był pogrubiony / pochylony, jeśli potrzebujesz „pozbawionej znaczenia” odmiany czcionki. HTML 5 nadal im na to pozwala, ale deklaruje, że zaznaczanie tekstu w ten sposób nie ma znaczenia .

<em>a <strong>z drugiej strony tylko mówi, że coś jest „podkreślić” lub „zdecydowanie podkreślić”, pozostawia go całkowicie otwarty do przeglądarki, jak to czynią. Większość przeglądarek będzie renderować emkursywą i strongpogrubieniem, jak domyślnie sugeruje standard, ale nie są do tego zmuszone (mogą używać różnych kolorów, rozmiarów czcionek, czcionek itp.). Możesz użyć CSS, aby zmienić zachowanie tak, jak chcesz. Możesz empogrubić, jeśli chcesz strong, na przykład odważnie i czerwono.

<strong>i <em>są abstrakcyjne (co ludzie mają na myśli, gdy mówią, że to semantyczne). <b>i <i>są specyficznymi sposobami tworzenia czegoś „silnego” lub „podkreślonego”

Analogia:

Zarówno <strong>jest jak <b>i <em>jest<i>

tak jak

„pojazd” to „jeep”

Używamy tego <strong>tagu do tekstu, który ma wysoki priorytet do celów SEO, takich jak nazwa produktu, nazwa firmy itp., A <b>prosty czyni go odważnym.

Podobnie używamy <em>tekstu, który ma wysoki priorytet dla SEO, a <i>tekst po prostu kursywą.