Dlaczego tagi <b> i <i> są przestarzałe?

98

To pytanie pojawiło się podczas jednej z moich zajęć w college'u. Profesor udzielił tylko odpowiedzi, że był bardziej opisowy, ale wydaje się, że jest <b>i <i>jest dość wyraźny w ich znaczeniu i łatwiej jest pisać niż <strong>i <em>.

Jakie były oficjalne argumenty za wycofaniem tych tagów?

LanceLafontaine
źródło
38
Jestem dość pewien <b>i <i>nie jestem przestarzały.
Doval,
4
Mam skłonność do takiego rozumowania: Czy chcę, aby czytnik ekranu czytał to inaczej, czy nie? Jeśli chcę tylko dobrać słowa, które czytelnik (niewidomy) może łatwo znaleźć, mogę użyć b- dosłownie oznacza „to jest odważne”, a nie „to jest podkreślone”. Ale najważniejsze jest to, że mają różne znaczenia - nie ma w nich deprecjacji, po prostu nie to, że kiedy zwykłeś to robić, balbo izwykle miałeś na myśli stronglub em.
Luaan,
1
@MichaelT Pamiętam, kiedy po raz pierwszy zacząłem używać LaTeXa, byłem zdezorientowany na temat różnych sposobów, w których tekst może być pisany kursywą i pogrubiony, gdy zaczyna się na pustym dokumencie (bez pakietów stylów).
Cole Johnson
@Luaan: Nawet jeśli <i>i <b>nie są tak naprawdę przestarzałe, <tt>i <u>są, i pytanie byłoby tak samo odpowiednie dla nich.
supercat

Odpowiedzi:

135

Zeszłego lata przeczytałem pełną specyfikację HTML5 i każdą poprzednią specyfikację HTML (nawet te porzucone), wszystkie specyfikacje CSS, które mogłem znaleźć, i wiele specyfikacji XML. Ponieważ uwielbiam semantycznie bogate dokumenty hipertekstowe, pozwól, że przedstawię ci ideę odpowiedniej semantyki HTML w HTML5.

Przed HTML5

Przed HTML5 ii brzeczywiście były modne. Powodem było to, że zasadniczo działali jak emi strongodpowiednio, ale z naciskiem na prezentację, a nie na semantykę (co jest złe).

Rzeczywiście ioznaczało to, że tekst powinien być pisany kursywą (mówił coś o tym, jak tekst powinien być renderowany na ekranie). Z drugiej strony emoznaczało, że należy podkreślić tekst (mówiło coś o semantyce tekstu).

Istnieje tutaj ważna różnica teoretyczna. Jeśli używasz em, agent użytkownika (= przeglądarka) wie, że tekst powinien być wyróżniony, więc może renderować go kursywą, jeśli dokument jest wyświetlany na ekranie (lub wielkimi literami, jeśli formatowanie nie jest możliwe, a może nawet pogrubioną czcionką jest użytkownik woli), może wymówić to inaczej, jeśli dokument zostanie przekazany użytkownikowi itp.

Zauważ, że tak naprawdę nacisk kładziony jest na semantykę. Na przykład frazy

  • Kot jest mój. (= nie pies!)
  • Kot jest mój . (= nie twoje!)

nie mają tego samego znaczenia.

Ta sama różnica dotyczy b(czcionka pogrubiona) i strong(duży nacisk).

Ogólna zasada pisania cyfrowego, aw szczególności tworzenia hipertekstu, polega na oddzieleniu treści i stylu. W przypadku tworzenia hipertekstu oznacza to, że treść powinna znajdować się w pliku HTML, a styl powinien znajdować się w pliku CSS (lub kilku plikach CSS). Inną, ale powiązaną zasadą jest to, że dokument powinien być bogaty w semantykę (np. Zaznaczanie nagłówków, stopek, list, akcentów, adresów, obszarów nawigacyjnych itp.). Ma to wiele zalet:

  • Programy komputerowe znacznie łatwiej interpretują ten dokument. Programy te obejmują przeglądarki, aplikacje zamiany tekstu na mowę, wyszukiwarki i asystentów cyfrowych. (Na przykład przeglądarka pozwala zapisać adres w książce adresowej, jeśli tylko może go znaleźć i zinterpretować. Ponadto możesz wiedzieć, że program Microsoft Word może utworzyć i automatycznie zaktualizować spis treści, jeśli poprawnie oznaczysz nagłówki .)
  • Znacznie łatwiej jest później zmienić styl. (Jeśli chcesz zmienić kolor wszystkich nagłówków trzeciego poziomu w 860-stronicowym dokumencie, możesz zmienić pojedynczy wiersz w arkuszu stylów. Jeśli masz mieszaną zawartość i prezentację, musisz ręcznie przejrzeć cały dokument ręcznie I prawdopodobnie przegapiłbyś jeden lub dwa nagłówki, przez co dokument wyglądałby nieprofesjonalnie.)
  • W zależności od okoliczności można używać różnych arkuszy stylów (czy dokument jest wyświetlany na ekranie czy drukowany na papierze?). Możesz nawet pozwolić użytkownikowi samemu wybrać styl. (Moja strona internetowa oferuje wiele alternatywnych arkuszy stylów. W IE i FF możesz je zmienić za pomocą menu Widok).

Tak, w skrócie, ii bbyły przestarzałe, ponieważ były znaczniki HTML zaniepokojeni prezentacji , która jest całkowicie błędne.

W HTML5

W HTML5 ii bnie są już przestarzałe. Zamiast tego mają znaczenie półmatyczne . Więc teraz dotyczą one semantyki, a nie prezentacji.

Tak jak poprzednio, emzaznaczasz nacisk: „Kot jest mój”. Ale używasz iw prawie wszystkich innych przypadkach, w których używasz kursywy w drukowanej pracy. Na przykład:

  • Używasz ido oznaczania oznaczeń taksonomicznych: „Lubię R. norvegicus ”.
  • Służysz ido oznaczania frazy w innym języku niż otaczający tekst: À la carte
  • Używać ido oznaczania słowo gdy mówimy o samo słowo: „ napój jest zarówno rzeczownik i czasownik”

Dobrym pomysłem jest również użycie tego classatrybutu, aby określić dokładne użycie (także „mikroformat” Google i „mikrodane”). I oczywiście w drugim przypadku powinieneś naprawdę użyć langatrybutu, aby określić poprawny język. (W przeciwnym razie na przykład agent zamiany tekstu na mowę może źle wymawiać tekst.)

Mniej więcej rok temu specyfikacja HTML5 mówi również, że citenależy jej używać do oznaczania nazw książek, filmów, oper, obrazów itp .:

  • Co sądzisz o nimfomanki ?

Wreszcie, od dawna, dfnsłuży do oznaczania definiującego wystąpienia frazy w tekście (np. Definicji matematycznej lub definicji terminu):

  • Grupa to zbiór X wyposażony w jednym operacji binarnej * taki, że ...

Tak więc kursywa w drukowanej książce, która może oznaczać wiele różnych rzeczy, jest reprezentowana przez cztery różne tagi HTML5, co jest naprawdę świetne, ponieważ semantyka jest dobra, o czym starałem się przekonać wcześniej. (Na przykład możesz poprosić przeglądarkę o sporządzenie listy wszystkich definicji w tekście, abyś mógł je wszystkie poznać przed egzaminem).

Wracając do strongi b, specyfikacja HTML5 mówi, że strongnależy jej użyć do oznaczenia ważnej części tekstu, na przykład ostrzeżenia lub jakiegoś bardzo ważnego słowa do uchwycenia w zdaniu. Z drugiej strony bpowinny być używane do oznaczania rzeczy, które muszą być łatwe do znalezienia w tekście, takich jak słowa kluczowe. Używam również bjako nagłówków w elementach listy (LI).

Andreas Rejbrand
źródło
1
Korekta: tag definicji <dfn>nie jest <def>. W przeciwnym razie świetne kompleksowe podsumowanie wszystkich problemów. Twoja sugestia użycia <b>jako nagłówków w elementach listy jest interesująca; podejście semantyczne polega na użyciu listy definicji , ale ponieważ obecnie żadne przeglądarki nie obsługują display:run-in, wstawiaj znaczniki słów kluczowych za pomocą <b>lub <span>możesz zrobić to najlepiej.
AmeliaBR
@AmeliaBR. Dziękujemy za przestrzeganie literówki (def). Informacje o listach definicji: list definicji należy używać dla par nazwa-wartość i zawsze używam ich do tego (na przykład spójrz na moją księgę gości ). Uwielbiałem także display:run-in, ale ponieważ jego wsparcie maleje , musisz użyć trikafloat lub content:, zobacz rejbrand.se/rejbrand/news.asp?ItemIndex=169 . Kiedy mówię o używaniu bdo oznaczania „nagłówków” na listach, nie mam na myśli par nazwa-wartość, ale raczej proste listy, w których chcę użyć „nagłówka” w każdym elemencie.
Andreas Rejbrand,
1
@SarahofGaia Istnieją co najmniej dwie wady uzasadnienia, które <b>gwarantują pogrubienie tekstu. 1) Czytniki ekranu, monitory brajlowskie i inne sposoby konsumowania tekstu, dla których grubsze glify są bez znaczenia. 2) b { font-weight: normal }, co oznacza, że ​​styl wyświetlania nie jest ustalony dla <b>żadnego z nich.
8bittree
1
Wreszcie, są zawsze bezpłatne dostarczanie własnego CSS, jeśli nie ufasz przeglądarkę: b, strong { font-weight:bold; }. W ten sposób możesz być tak pewny, jak tylko możesz. CSS to sposób na określenie formatu wizualnego. HTML dotyczy znaczenia (treści), CSS - wizualnej jego prezentacji.
Andreas Rejbrand
1
Ta odpowiedź pozwoliła mi zrozumieć, dlaczego muszę zmienić tagi czcionek na css. Zawsze lubiłem pogrubione tagi czcionek i teraz to rozumiem, dlaczego nie powinienem ich używać. Dziękuję
Andreas
58

Jak mówi Doval, nie są przestarzałe. One nadal istnieją , ale powinny być wykorzystywane inaczej niż to, co wielu ludzi, gdzie wykorzystywane do przed HTML5.

Chodzi o HTML „semantyczny”. Powinien opisać „co”, a nie jak powinien wyglądać. Przeglądarka lub teoretycznie jakikolwiek inny nośnik wyświetlania (powiedzmy aplikacja do czytania dla osób niewidomych) powinna być w stanie zdecydować, jak dokładnie powinna być interpretowana.

Jest to podobne, dlaczego nie należy używać nazw klas CSS, takich jak „czerwony”, i stosować bardziej opisowe klasy, które opisują ideę funkcjonalną przy użyciu innego koloru tutaj. Możesz później zdecydować, że zielony jest lepszy (i być może wszystko „mocne” powinno być pokazane za pomocą czerwonego koloru zamiast pogrubionego tekstu). Lub użytkownik ślepy na kolory może mieć pewne specjalne ustawienia przeglądarki, w których kolory są zastępowane w inny sposób.

Thorsten Müller
źródło
1
Czy są jakieś sytuacje, w których lepiej jest używać <b> niż <strong>? A może <strong> zawsze jest tagiem „bardziej semantycznym”?
LanceLafontaine
4
Z grubsza można użyć <b> do rzeczy, które powinny być „podświetlone”, ale nie „podkreślone”, jak słowa kluczowe w tekście. W dokumentacji technicznej często można znaleźć różne style tekstu używane do pokazywania pewnych atrybutów, na przykład w programowaniu przykładów kodów książek lub terminów technicznych. Do takich zastosowań można użyć terminu technicznego <b> lub <i>.
thorsten müller,
3
@LanceLafontaine Spójrz na oficjalny standard .
Rufflewind
4
@ thorstenmüller Myślę, że to też zły przykład ... to przypadek podręcznika, w którym kierownictwo decyduje później, że zamiast pogrubienia chcą swoich atrybutów czcionką pisma maszynowego, a nie pogrubioną, ale podkreśloną, w takim przypadku użycie <span class="keyword">...</span>na pierwszym miejscu oszczędza wiele kłopotów.
CompuChip,
2
@LanceLafontaine <b>to przypadek krawędzi, ale są stałe przykłady korzystania <i>w przypadkach, gdy <em>jest nieodpowiednie: naukowych nazw gatunków lub łacińskich słów przyjętych w języku angielskim (ty mógł używać rozpiętość z atrybutem języka, ale ma wszelkiego rodzaju innych skutków - - czytnik ekranu może przełączać głosy na inny język). Można go również używać do kursywy w tytułach innych dzieł, chociaż należy zastosować podejście semantycznie poprawne <cite>.
AmeliaBR
41

Prawdziwa historia jest taka, że bi ipo raz pierwszy przestarzałe, nieaktualne, przeklinał i anatematized jako „prezentacyjny” w różnych projektach HTML5 (mówiąc ogólnie), ale potem zrozumiałem, że te znaczniki są szeroko stosowane, a także generowane przez wiele programów autorskich. Zamiast po prostu im na to pozwolić, opracowali dla nich nowe definicje „semantyczne”, aby móc dopuścić elementy, ale nadal udawać, że są surowi wobec „prezentacji” znaczników. Nowe definicje różniły się w zależności od projektu i są niejasne: trudno znaleźć dwie osoby, które rozumieją i interpretują je w ten sam sposób.

Przepraszamy, brak referencji. Powyższy opis jest wynikiem śledzenia zmian i czytania szkiców i dyskusji, często między wierszami. Nie mówią wprost przyczyny. Nadal uważam, że to prawdziwa historia.

Wniosek jest następujący: Idź dalej. Nie ma tu nic użytecznego. Elementy bi irobią to samo, co zawsze: sprawiają, że czcionka jest odpowiednio pogrubiona lub kursywą, przy zwykłych zastrzeżeniach. To jest rzeczywistość, którą należy wziąć pod uwagę, a nie quasischolastyczna „semantyka”, która nie ma wpływu na przeglądarki, wyszukiwarki i inne oprogramowanie.

Jukka K. Korpela
źródło
3
To powiedziawszy, możesz podążać za quasischolastyczną semantyką, traktując ją <b>jako zabawny rodzaj, <span>który domyślnie renderuje się pogrubioną czcionką. Następnie, jeśli możesz być zaniepokojony, podaj również jego użycie classatrybutu, aby w razie potrzeby móc zmienić styl wielu rzeczy, które go używały, ponieważ mają one wspólną semantykę. To quasischolastyczne w tym sensie, że ludzie będą myśleć, że jesteś quasi w głowie b.productname {font-weight: normal; font-style: italic; }po tym, jak zmieniłeś zdanie na temat prezentacji i skorzystałeś z mądrego wyboru znaczników semantycznych ;-)
Steve Jessop
1
@SteveJessop: Dla tych niewielu z nas na świecie, którzy wciąż dbają o rozmiar pliku, powiedzenie <b>this</b>wydaje się znacznie bardziej rozsądne niż <span class="bold">this</b>(ośmiobajtowy narzut pierwszego z nich jest dość irytujący; 23-bajtowy narzut drugiego z nich wydaje się szalony). Zastanawiam się, dlaczego HTML nigdy nie zdefiniował żadnej reprezentacji skróconej, takiej <@quack>this</@>jak odpowiednik <span class="quack">this</span>?
supercat
4
@ superupat: po to jest transfer-kodowanie: gzip. A może XML + XSLT, w zależności dokładnie od tego, gdzie i jak chcesz wprowadzić bardziej zwięzłą notację dla „szarlatanu”.
Steve Jessop
7
@supercat class='bold'? Mistrz Suku z The Codeless Code opowiedziałby wam o używaniu tak kiepskich nazw klas . Rozważ to swój ostatni pogrubionyRedText .
2
W czasach modemów 14,4 CSS był pomysłem, który nie został jeszcze zrealizowany ani zaimplementowany w żadnym kliencie użytkownika. Te elementy HTML to po prostu starodawne cruft, z którym utkniemy na zawsze.
Michael Hampton
11

<b>I <i>znaczniki pochodzi z pojęciami „bold” i „italic”. Problem polega na tym, że dla niektórych programów użytkownika mogą one być zupełnie bez znaczenia. Na przykład, jak brzmi „kursywa” w czytniku ekranu dla osoby niewidomej?

Zastąpienie ich <strong>i <em>usunięcie bezpośredniego linku do pojęć typograficznych. Zamiast tego klient użytkownika może je renderować w dowolny sposób.

Simon B.
źródło
2
Ściśle mówiąc, klient użytkownika może renderować <b>i <i>jakkolwiek uważa za stosowne.
Jonathan Eunice,
8

<b>I <i>znaczniki są niezbędne, jeśli wymagają dosłownie tekst „bold” lub „italic”.

Jeśli piszesz równanie w HTML, w którym kursywą „ ja ” ma inne znaczenie niż nie kursywą „ja”, ważne jest, aby móc to rozróżnić.

Myślę o nich w ten sam sposób, w jaki myślę <sup>lub <sub>znaczniki - nie można poprawnie przedstawić znaczenia równania bez użycia takich znaczników „wyglądu”.

Purystycznym podejściem byłoby użycie MathML lub TeX, ale obsługa przeglądarki jeszcze nie istnieje ...

SAL
źródło
14
Chciałbym, aby ludzie naciskający na znaczniki „semantyczne” zauważyli, że w niektórych przypadkach stare znaczniki były bardziej semantycznie poprawne niż jakiekolwiek alternatywy. Jeśli tekst dokumentu odnosi się do niektórych podkreślonych słów, wówczas pokazanie tych słów w jakikolwiek inny sposób niż przez podkreślenie byłoby semantycznie nieprawidłowe. Jeśli ktoś importuje tekst z systemu, który umieszcza jego część, in a monospaced typefaceale który nie czyni rozróżnienia, dlaczego, wówczas użycie jednego z „zamienników” na <tt>fałszywie oznaczałoby, że kod wykonujący import wiedział więcej niż cel.
supercat
Zgadzam się ze stosownością bi iw kontekście matematycznym (i fizycznym), ale takie użycie nie jest wspomniane w szkicach HTML5. Kiedy zadałem to pytanie, poważnie zareagowano na użycie znaków specjalnych Unicode (matematyczne pogrubione litery i matematyczne litery kursywy)!
Jukka K. Korpela,
1
@ supercat: ogólne twierdzenie (które przyznaję, że nie zawsze ma zastosowanie) jest takie, że nie powinieneś pisać czeków, których klient użytkownika nie może zrealizować. W szczególności nie powinieneś pisać strony, która twierdzi, że czyjś czytnik ekranu będzie mówił czcionką o stałej szerokości (wyobrażam sobie, że głos robota byłby odpowiedni: nigdy tak naprawdę nie korzystałem z czytnika ekranu). Oczywiście ignoruje to fakt, że strony większości ludzi nie działają przynajmniej na czytnikach ekranu, więc nie ma sensu płacić żadnej ceny za hipotetyczną dostępność, na której im nie zależy. Ale W3C celowo zaniedbuje ten fakt z zasady.
Steve Jessop
W przypadku importu kodu przypuszczam, że odpowiedź kanoniczna (jeśli nie jest zadowalająca) class="source-X-asserts-it-should-be-monospace", odróżnia ją od tekstu semantycznie odmiennego w tym sensie, że niektóre inne źródła twierdzą z nieznanych powodów, że powinna być monospace. W efekcie polega to na sprawdzeniu rzeczy, które HTML uważa za złe, a nie tylko tłumaczeniu złości na HTML.
Steve Jessop
1
@SteveJessop: Innymi słowy, powinniśmy poprawić <TT>, co bezpośrednio sugerowało, że tekst powinien być ustawiony kontrastową czcionką monospace, ze znacznikami, które po kilku warstwach pośrednich wskazują, że tekst powinien być pokazany w określonej czcionce, która zdarza się być monospace. Chociaż nie spodziewałbym się, że wszystkie czytniki ekranu zrobią coś pożytecznego <tt>, spodziewam się, że będą miały o wiele łatwiejszy czas <tt>niż <span class="styleNameThisImportUtilityPicked">.
supercat
0

Zasady projektowania leżące u podstaw tagów HTML są takie, że powinny one być „semantyczne”, tzn. Powinny wskazywać znaczenie i cel, a nie instrukcje niskiego poziomu.

Klasyczny test brzmi: „czy tagi mogą być sensownie użyte w przeglądarce dla osób niewidomych”.

Tak więc w przeglądarce opartej na dźwięku „i” dla kursywy jest dość bezużyteczne, ponieważ nie można używać kursywy. Znacznik „em” ma jednak znaczenie, ponieważ urządzenie audio może podkreślić frazę na wiele sposobów: zwiększając wysokość tonu, zwiększając głośność lub zmieniając akcent. Renderowanie w alfabecie Braille'a można podkreślić, podnosząc kropki, zmieniając odstępy, zmieniając rozmiar lub dodając wibracje.

James Anderson
źródło
Jak mówisz, nie możesz mówić kursywą - ale możesz mieć tekst kursywą, w którym fakt, że kursywą ma znaczenie semantyczne, np. Równania ...
SAL
2
„Tak więc w przeglądarce opartej na dźwięku„ i ”dla kursywy jest dość bezużyteczne, ponieważ nie można używać kursywy.” ... Tak, a to <img>dlatego, że nie można odczytać obrazu, a system bez sprzętu dźwiękowego nie może się prezentować <audio>. Czasami prezentacja jest głównym celem elementu i nie musi być powszechnie obsługiwana (i w przeciwieństwie do innych potencjalnie nieobsługiwanych elementów, <i>nie potrzebuje tekstu alternatywnego, ponieważ jedyną utraconą informacją jest kursywą). Prawdziwy problem polega na tym, że ludzie mówią, ikiedy mają na myśli em .
nmclean
@SAL: Dlaczego nie można mówić „kursywą”? Jeśli normalna mowa jest wypowiadana z wartością „wysokości tonu” 100, tekst w <i>znaczniku używa tonu 120, a tekst w <b>znaczniku 80, a tekst w <tt>synchronizacji mowy z syntezowaną maszyną do pisania umożliwiającą słuchaczowi aby łatwo rozróżnić te formy znaczników. Zadanie byłoby znacznie trudniejsze, gdyby zamiast użycia <i>znacznika tekst zamiast tego użył <span class="whatever">części, która spowodowała wyświetlenie części tekstu za pomocą „Acme SemiScript” zamiast „Waldorf Sans” [niektóre rodziny czcionek ...
supercat
... nie ma dobrej czcionki kursywy, ale czasami czcionka zawierająca tylko kursywę może wyglądać dobrze, gdy jest ustawiona w tekście napisanym przy użyciu innej rodziny czcionek].
supercat
@ superuper Opisujesz mowę wyróżnioną, a nie mowę kursywą. Jeśli chcesz innego tonu, powinieneś użyć ich, jak powiedział nmclean. Jeśli chcesz, aby kursywą była używana, użyj i. Nie ma znaczenia, że ​​czytnik ekranu nie wie, co robić, ponieważ nie ma nic do zrobienia. Tytuły książek są często pisane kursywą, ale nie wymawia się ich inaczej.
DCShannon,