Почему теги <b> и <i> устарели?

98

Этот вопрос возник в одном из моих занятий в колледже. Профессор только дал ответ , что он был более описательный характер, но это , кажется , как будто <b>и <i>довольно явно в их смысл и проще набрать , чем <strong>и <em>.

Каковы были официальные аргументы за осуждение этих тегов?

LanceLafontaine
источник
38
Я вполне уверен <b>и <i>не осуждаю.
Доваль
4
Я склонен рассуждать об этом так: хочу ли я программу чтения с экрана читать это по-другому или нет? Если я просто хочу выбрать слова, чтобы их было легко найти (не слепому) читателю, я мог бы использовать b- это буквально означает «это жирный шрифт», а не «это подчеркнуто». Но суть в том, что они разные по смыслу - здесь нет амортизации, просто нет, когда вы привыкли делать, bили iвы обычно имели в виду strongили em.
Luaan
1
@MichaelT Я помню, когда я впервые начал использовать LaTeX, я был озадачен всеми способами выделения текста курсивом и полужирным шрифтом при начале работы с пустым документом (без пакетов стилей).
Коул Джонсон
@Luaan: Даже если <i>и на <b>самом деле не устарели, <tt>и <u>есть, и вопрос будет так же применим к этим.
Суперкат

Ответы:

135

Прошлым летом я прочитал полную спецификацию HTML5 и все предыдущие спецификации HTML (даже заброшенные), а также все спецификации CSS, которые я смог найти, и множество спецификаций XML. Поскольку я люблю семантически насыщенные гипертекстовые документы, позвольте мне дать вам представление о соответствующей семантике HTML в HTML5.

До HTML5

До HTML5 iи bправда были не в моде. Причина заключалась в том, что они по существу работали как emи strong, соответственно, но с акцентом на представление, а не на семантику (что плохо).

Действительно, iозначало, что текст должен быть выделен курсивом (он говорил что-то о том, как текст должен отображаться на экране). С другой стороны, emозначало, что текст должен быть подчеркнут (что-то говорит о семантике текста).

Здесь есть важное теоретическое отличие. Если вы используете em, пользовательский агент (= браузер) знает, что текст должен быть выделен, поэтому он может отображать его курсивом, если документ отображается на экране (или все заглавные буквы, если форматирование невозможно, или, возможно, даже жирным шрифтом пользователь предпочитает это), он может произносить его по-разному, если документ говорит пользователю и т. д.

Обратите внимание, что акцент действительно делается на семантику. Например, фразы

  • Кошка моя. (= не собака!)
  • Кот мой . (= не твое!)

не имеют того же значения.

То же самое относится к b(жирный шрифт) и strong(сильный акцент).

Общий принцип цифрового письма в целом и создания гипертекста в частности заключается в том, что вы должны разделять контент и стиль. При создании гипертекста это означает, что содержимое должно быть в файле HTML, а стиль должен быть в файле CSS (или нескольких файлах CSS). Другой, но связанный принцип состоит в том, что документ должен быть богат семантикой (например, разметка верхних и нижних колонтитулов, списков, выделений, адресов, областей навигации и т. Д.). Это имеет ряд преимуществ:

  • Для компьютерных программ гораздо проще интерпретировать документ. Эти программы включают в себя браузеры, приложения преобразования текста в речь, поисковые системы и цифровых помощников. (Например, браузер может позволить вам сохранить адрес в адресной книге, если только он может найти и интерпретировать его. Кроме того, вы можете знать, что Microsoft Word может создать и автоматически обновить оглавление для вас, если вы правильно разметите заголовки .)
  • Гораздо проще изменить стиль позже. (Если вы хотите изменить цвет всех заголовков третьего уровня в документе на 860 страниц, вы можете изменить одну строку в таблице стилей. Если бы у вас было смешанное содержимое и презентация, вам пришлось бы просматривать весь документ вручную И, возможно, вы пропустите заголовок или два, что сделает документ непрофессиональным.)
  • Вы можете использовать разные таблицы стилей в зависимости от обстоятельств (документ отображается на экране или печатается на бумаге?). Вы даже можете позволить конечному пользователю выбрать стиль самостоятельно. (Мой веб-сайт предлагает несколько альтернативных таблиц стилей. В IE и FF их можно изменить с помощью меню «Вид».)

Итак, короче говоря, iи bустарели, потому что это были HTML-теги, связанные с представлением , что совершенно неверно.

В HTML5

В HTML5 iи bбольше не рекомендуется. Вместо этого им дают семантическое значение . Так что теперь они на самом деле о семантике, а не о представлении.

Как и прежде, использовать emразмечать внимание: «Кошка на мой.» Но вы используете iпочти во всех других случаях, когда вы будете использовать курсив в печатной работе. Например:

  • Вы используете iдля обозначения таксономических обозначений: «Мне нравится R. norvegicus ».
  • Вы используете iдля разметки фразу на другом языке по сравнению с окружающим текстом: à la carte
  • Вы используете iразметку слова, когда говорите о самом слове: « напиток - это и существительное, и глагол»

Также полезно использовать classатрибут, чтобы указать точное использование (также Google «микроформат» и «микроданные»). И, конечно же, во втором случае вы должны действительно использовать langатрибут, чтобы указать правильный язык. (В противном случае, например , агент преобразования текста в речь может неправильно произносить текст.)

Примерно год назад в спецификации HTML5 также указывалось, что она citeдолжна использоваться для разметки названий книг, фильмов, опер, картин и т. Д .:

  • Что вы думаете о нимфоманка ?

Наконец, давным-давно dfnиспользуется для разметки определяющего экземпляра фразы в тексте (например, математическое определение или определение термина):

  • Группа представляет собой набор X оснащен одной бинарной операцией * такой , что ...

Таким образом, курсив в вашей печатной книге, который может означать много разных вещей, представлен четырьмя различными тегами HTML5, что действительно здорово, потому что семантика хороша, как я пытался убедить вас об этом ранее. (Например, вы можете попросить свой браузер составить список всех определений в тексте, чтобы убедиться, что вы знаете их все до экзамена.)

Обращаясь к strongи b, спецификация HTML5 говорит, что это strongследует использовать для разметки важной части текста, например, предупреждения или какого-либо очень важного слова в предложении. С другой стороны, bследует использовать для разметки то, что должно быть легко найти в тексте, например ключевые слова. Я также использую в bкачестве заголовков в элементах списка (LI).

Андреас Рейбранд
источник
1
Исправление: определение тега есть <dfn>, а не <def>. В остальном отличное исчерпывающее резюме по всем вопросам. Ваше предложение использовать в <b>качестве заголовков в элементах списка интересно; семантический подход состоит в том, чтобы использовать список определений , но так как в настоящее время ни один браузер не поддерживает display:run-in, встроенная разметка ключевых слов с <b>или <span>является лучшим, что вы можете сделать.
AmeliaBR
@AmeliaBR. Спасибо за наблюдение за опечатку (def). О списках определений: списки определений должны использоваться для пар имя-значение, и я всегда использую их для этого (например, посмотрите на мою гостевую книгу ). Я также любил display:run-in, но так как его поддержка уменьшается , вы должны использовать трюк floatили content:, см. Rejbrand.se/rejbrand/news.asp?ItemIndex=169 . Когда я говорю об использовании bдля разметки «заголовков» в списках, я имею в виду не пары имя-значение, а скорее простые списки, в которых я хочу использовать «заголовок» в каждом элементе.
Андреас Рейбранд
1
@SarahofGaia Есть как минимум два недостатка с аргументами, которые <b>гарантируют смелость текста. 1) Программы чтения с экрана, дисплеи Брайля и другие средства потребления текста, для которых более толстые глифы являются бессмысленным понятием. 2) b { font-weight: normal }, то есть стиль отображения не является фиксированным <b>.
8bittree
1
Наконец, вы всегда можете поставить свой собственный CSS , если вы не доверяете браузер: b, strong { font-weight:bold; }. Таким образом, вы можете быть уверены, насколько это возможно. CSS - это способ указать визуальный формат. HTML о значении (контенте), CSS о его визуальном представлении.
Андреас Рейбранд
1
Этот ответ дал мне понимание, почему мне нужно поменять теги шрифта на css. Мне всегда нравились шрифтовые шрифты и все такое, теперь я понимаю, почему я не должен их использовать. Спасибо
Андреас
58

Как говорит Доваль, они не устарели. Они все еще существуют, но должны использоваться не так, как многие люди до HTML5.

Это о «семантическом» HTML. Оно должно описывать «что», а не то, как оно должно выглядеть. Браузер или теоретически любой другой носитель информации (скажем, приложение для чтения для слепых) должен быть способен решить, как именно следует интерпретировать.

Это похоже на то, почему вы не должны использовать имена классов CSS, такие как «красный», и использовать более описательные классы, которые описывают функциональную идею, лежащую в основе использования другого цвета. Позже вы можете решить, что зеленый лучше (и, возможно, что-нибудь «сильное» следует показать, используя красный цвет вместо жирного текста). Или дальтоник пользователь может иметь некоторые специальные настройки браузера, где цвета заменяются другими средствами.

Торстен Мюллер
источник
1
В каких ситуациях предпочтительнее использовать <b>, а не <strong>? Или <strong> всегда является «более семантическим» тегом?
LanceLafontaine
4
Грубо говоря, вы можете использовать <b> для вещей, которые должны быть «выделены», но не «выделены», например ключевые слова в тексте. В технической документации часто встречаются разные стили текста, используемые для отображения определенных атрибутов, например, в примерах кода в книгах по программированию или технических терминах. Для таких случаев использования может быть использован технический термин <b> или <i>.
Торстен Мюллер
3
@LanceLafontaine Взгляните на официальный стандарт .
Rufflewind
4
@ thorstenmüller Я думаю, что это тоже плохой пример ... это тот случай, когда руководство решает, что вместо жирного шрифта они хотят, чтобы их атрибуты были написаны шрифтом пишущей машинки, а не жирным шрифтом, а подчеркнуты, и в этом случае использование <span class="keyword">...</span>в первую очередь спасает вас. куча проблем.
CompuChip
2
@LanceLafontaine <b>- это крайний случай, но есть веские примеры для использования <i>в случаях, когда <em>это неуместно: научные названия видов или латинские слова переведены на английский язык (вы можете использовать диапазон с атрибутом языка, но это имеет множество других последствий - - программа чтения с экрана может переключать голоса на другой язык). Это может также использоваться для выделения курсивом названий других работ, хотя семантически правильный подход должен использовать <cite>.
AmeliaBR
41

Истинная история , что bи iбыли первыми устаревании осуждается, выругалась и anatematized как «презентационный» в различных проектах HTML5 ( в широком смысле), но потом они поняли , что эти метки широко используются , а также генерироваться многими программами авторинга. Вместо того, чтобы просто позволить им, они разработали для них придуманные новые «семантические» определения, чтобы иметь возможность разрешать элементы, но при этом притворяться строгими в отношении «презентационной» разметки. Новые определения менялись от одного проекта к другому и неясны: вряд ли можно найти двух людей, которые понимают и интерпретируют их одинаково.

Извините, нет ссылок. Приведенное выше описание является результатом отслеживания изменений и чтения проектов и обсуждений, часто между строк. Они явно не говорят причину. Я все еще думаю, что это правдивая история.

Вывод: двигаться дальше. Здесь нет ничего полезного. bИ iэлементы делают то же самое, что и всегда: они делают шрифт полужирным или курсивным, соответственно, с обычными оговорками. Это реальность, которую вы должны принять во внимание, а не квазихоластическая «семантика», которая не оказывает влияния на браузеры, поисковые системы или другое программное обеспечение.

Юкка К. Корпела
источник
3
Тем не менее, вы можете следовать квазихоластической семантике, просто рассматривая ее <b>как забавный вид, <span>который по умолчанию отображается жирным шрифтом. Затем, если вам это не безразлично, присвойте его использование этому classатрибуту, чтобы при необходимости вы могли перекомпилировать сразу несколько вещей, которые его использовали, поскольку они имеют общую семантику. Это квазихоластика в том смысле, что люди будут думать, что вы квази в голове, b.productname {font-weight: normal; font-style: italic; }когда вы передумали о представлении и воспользовались своим мудрым выбором семантической разметки ;-)
Steve Jessop
1
@SteveJessop: Для тех немногих из нас, кто все еще заботится о размере файла, высказывание <b>this</b>кажется гораздо более разумным, чем <span class="bold">this</b>(восьмибайтовые издержки первого достаточно утомительны; 23-байтовые издержки последнего кажутся сумасшедшими). Интересно, почему HTML никогда не определял какое-либо краткое представление, <@quack>this</@>как эквивалентное <span class="quack">this</span>?
суперкат
4
@supercat: для этого и используется кодировка передачи: gzip. Или, может быть, XML + XSLT, в зависимости от того, где и как вы хотите ввести более краткую запись для «кряка».
Стив Джессоп
7
@supercat class='bold'? Мастер Суку из Codeless Code хотел бы поговорить с вами об использовании таких плохих имен классов . Считайте, что это ваш последний boldRedText .
2
Во времена модемов 14.4 CSS была идеей, еще не реализованной или не реализованной ни в одном пользовательском агенте. Эти элементы HTML - просто древнее наследие, с которым мы застряли навсегда.
Майкл Хэмптон
11

<b>И <i>теги возникли с понятиями «жирный» и «курсив». Проблема в том, что они могут быть совершенно бессмысленными для некоторых пользовательских агентов. Например, как звучит «курсив» в программе чтения с экрана для слепого человека?

Заменив их <strong>и <em>убрав прямую ссылку на типографские понятия. Вместо этого, пользовательский агент может их визуализировать так, как считает нужным.

Саймон Б
источник
2
Строго говоря, агент пользователя может оказывать <b>и <i>тем не менее он считает нужным, тоже.
Джонатан Юнис
8

<b>И <i>теги имеют важное значение , когда вы буквально требуют текст «жирный» или «курсив».

Если вы пишете уравнение в HTML, где выделенное курсивом « Я » имеет значение, отличное от не выделенного курсивом «Я», важно уметь проводить это различие.

Я думаю , что они так же , как я думаю о <sup>или <sub>тегах - вы не можете правильно представлять значение уравнения без использования таких тегов «внешнего вида».

Пуристический подход заключается в использовании MathML или TeX, но поддержка браузера еще не ...

SAL
источник
14
Я бы хотел, чтобы люди, настаивающие на «семантической» разметке, осознавали, что в некоторых случаях старые теги были более семантически правильными, чем любые альтернативы. Если текст документа ссылается на определенные подчеркнутые слова, то показ этих слов любым способом, кроме подчеркивания, будет семантически неправильным. Если кто-то импортирует текст из системы, которая помещает часть текста, in a monospaced typefaceно не делает различий относительно того, почему, то использование одной из «замен» for <tt>будет ложно означать, что код, выполняющий импорт, знает больше, чем о цели.
суперкат
Я согласен с пригодностью bи iв математическом (и физическом) контексте, но такое использование не упоминается в черновиках HTML5. Когда я поднял этот вопрос, он серьезно ответил, что вместо него должны использоваться специальные символы Unicode (математические жирные буквы и математические курсивные буквы)!
Юкка К. Корпела
1
@supercat: общее утверждение (которое, я признаю, не всегда применимо) заключается в том, что вы не должны выписывать чеки, которые пользовательский агент не может обналичить. В частности, вы не должны писать страницу, в которой утверждается, что чей-то читатель экрана будет говорить моноширинным шрифтом (я думаю, что голос робота был бы уместен: я никогда не использовал читатель экрана). Конечно, это игнорирует то, что страницы большинства людей по меньшей мере не работают с программами чтения с экрана, и поэтому нет никакого смысла им платить какую-то цену за гипотетическую доступность, которая их не волнует. Но W3C сознательно игнорирует этот факт в принципе.
Стив Джессоп
В случае импорта кода, я предполагаю, что канонический (если он неудовлетворительный) ответ таков class="source-X-asserts-it-should-be-monospace", что отличает его от текста, который семантически отличается в том смысле, что какой-то другой источник утверждает по неизвестным причинам, что он должен быть моноширинным. По сути, это проверка того, что HTML считает плохим, а не просто перевод плохого в HTML.
Стив Джессоп
1
@SteveJessop: Другими словами, мы должны улучшить <TT>, что прямо предложило, чтобы текст был установлен контрастным моноширинным шрифтом, с разметкой, которая после нескольких уровней косвенного обращения будет указывать, что текст должен отображаться каким-то конкретным шрифтом, который происходит с быть моноширинным Хотя я бы не ожидать , что все читатели экрана , чтобы сделать что - то полезное <tt>, я бы ожидать , что они должны были бы гораздо легче с <tt>чем <span class="styleNameThisImportUtilityPicked">.
суперкат
0

Принципы дизайна, лежащие в основе тегов HTML, заключаются в том, что они должны быть «семантическими», то есть они должны указывать значение и намерение, а не инструкции низкого уровня.

Классический тест «могут ли теги быть осмысленно использованы в браузере для слепых».

Так что для браузера на основе аудио «i» для курсива довольно бесполезен, так как вы не можете произносить курсивом. Однако тег «em» имеет смысл, поскольку аудиоустройство может выделить фразу разными способами: путем увеличения высоты звука, увеличения громкости или изменения акцента. Рендерер Брайля может подчеркнуть, увеличивая точки, изменяя расстояние, изменяя размер или добавляя вибрации.

Джеймс Андерсон
источник
Как вы говорите, у вас не может быть курсивной речи - но у вас может быть курсивный текст, в котором факт, что курсив имеет семантическое значение, например уравнения ...
SAL
2
«Так что для браузера на основе аудио« i »для курсива довольно бесполезен, так как вы не можете произносить курсивом». ... Да, и это <img>потому, что вы не можете произнести изображение, а система без звукового оборудования не может представить <audio>. Иногда представление является самой целью элемента, и его не нужно поддерживать повсеместно (и, в отличие от других потенциально неподдерживаемых элементов, <i>не требуется альтернативный текст, потому что тот факт, что он выделен курсивом, является единственной потерянной информацией). Настоящая проблема в том, когда люди говорят, iкогда они имеют в виду em .
nmclean
@SAL: Почему нельзя иметь «курсив»? Если нормальная речь произнесена со значением «основного тона» 100, текст в <i>тэге использует тональность 120 и текст в <b>тэге 80, а текст в <tt>синхронизации речи с синтезированной пишущей машинкой, создающей текст, позволит слушателю легко различать эти формы разметки. Работа была бы намного сложнее, если бы вместо <i>тега использовался текст, вместо которого использовался бы текст, <span class="whatever">который приводил к отображению частей текста с использованием «Acme SemiScript», а не «Waldorf Sans» [некоторые семейства шрифтов ...
supercat
... не имеет хорошего курсивного шрифта, но иногда шрифт только курсивом может выглядеть хорошо, если установлен внутри текста, написанного с использованием другого семейства шрифтов].
суперкат
@supercat Вы описываете выделенную речь, а не курсив. Если вы хотите другой тон, тогда вы должны использовать em, как сказал nmclean. Если вы хотите, чтобы он был выделен курсивом, используйте i. Неважно, что программа чтения с экрана не знает, что делать, потому что ей нечего делать. Названия книг часто выделяются курсивом, но вы не произносите их по-другому.
DCShannon