Strong и b в чем разница
HTML5: старые теги нового назначения
Если раньше все учебники по вёрстке пестрили фразами вроде «используйте вместо », и это было наполовину верно, то сегодня такая привычка может сыграть злую семантическую шутку. А дело всё в том, что авторы HTML5 предлагают использовать для выделения отрывков текста с целью обратить внимание читателя, однако не подразумевая усиления значимости текста или интонации. Спецификация приводит примеры использования для разметки ключевых слов в документе
The frobonitor and barbinator components are fried.
и лидов (первый абзац статьи в журналистике)
Kittens ‘adopted’ by pet rabbit
Six abandoned kittens have found an unexpected new mother figure — a pet rabbit.
Veterinary nurse Melanie Humble took the three-week-old kittens to her Aberdeen home.
В свою очередь , как и раньше, означает повышенную значимость своего содержимого.
Отныне содержит текст, выбивающийся из общего окружения, но не имеющий эмоциональной окраски. На мой взгляд, логично использовать там, где типографская традиция предполагает курсив (например, слова на иностранном языке, термины и др.)
Per aspera ad Astra — в переводе с латыни изречение означает «Через тернии к звёздам».
же означает эмфатическое ударение, эмоциональный акцент на данном отрывке текста. Это тот случай, когда в речи мы выделяем слова голосом (интонацией, громкостью и др.)
Казнить нельзя, помиловать.
Внимательно читайте договор!
«Текст мелким шрифтом» (информация, являющаяся юридической формальностью, как то лицензия предприятия или юридический адрес и др.) мы, как правило, размечали элементом с классом, задающих в визуальных ПА более мелкий шрифт. Теперь же в нашем арсенале появился новый старый семантический элемент — .
Разница между использованием тегов «strong» и «b» в плане SEO
Сегодняшний вопрос поступил из Парижа. Жан-Марк интересуется:
Привет, Мэтт. В контексте SEO – какая разница между тегами “strong” и “b” для выделения некоторых слов в тексте? С точки зрения пользователя оба тега работают одинаково (выделяют слова жирным шрифтом). Когда каким тегом пользоваться?
Жан-Марк Г., Париж, Франция
Тема вопроса показалась мне знакомой, как будто я говорил об этом раньше. Я порылся в почте и обнаружил, что мы уже отвечали на эту тему, но в 2006 году. Поэтому сейчас я дам вам актуальный ответ на этот вопрос. Вряд ли с 2006 года многое изменилось в этом плане, но я решил все же ответить.
Тогда, в 2006 году, теги «strong» и «b» были равнозначны в плане ранжирования, индексации и так далее. Таким же образом, существуют теги «em», «m» и «i» для курсива, и они имеют абсолютно одинаковое значение, вы можете пользоваться любым из них, для ранжирования в Google это не имеет значения. Так что я сомневаюсь, что в этом плане что-то изменилось с 2006 года.
Лично я всегда считал, что теги «b» и «i» вроде как уже устарели, но, похоже, они еще используются в HTML5. Теги «strong» и «m» – просто более «модные», многие предпочитают пользоваться именно ими. С технической точки зрения в одном случае речь идет о визуальном представлении («bold» – жирный шрифт), а в другом – о семантике («strong» значит «этот текст более важен»). Но на практике во всех браузерах этот текст будет выделен жирным шрифтом.
Так что, если говорить кратко, не стоит об этом волноваться.
Насколько мне известно, Google относится к тегам «strong» и «b» одинаково, как и в случае с «m» и курсивом. Здесь не о чем беспокоиться. Что бы вы ни выбрали с точки зрения семантики или ваших собственных предпочтений, я думаю, это не имеет значения для Google.
Какие HTML теги правильные? Отличия b от strong
Какие теги использовать?
Как правильно — или , или ? Если говорить кратко — с точки зрения визуального отображения тегов в браузере, корректными будут оба варианта. Однако с точки зрения около-браузерной софистики — различий между тегами просто масса.
W3C, семантика, и благие цели
Сэр Тим Бернерс-Ли. Именно этому человеку мы обязаны в части облика Всемирной Паутины, интернета, таким, каким мы его знаем. Кстати, к названию WWW (WorldWideWeb — Всемирная Паутина) он тоже причастен.
Сэр Бернерс-Ли и самый первый в мире сайт. Wikipedia.
В 1994 году им была основана W3C — консорциум, по сей день являющийся главным и единственным институтом стандартизации представления данных в сети Интернет. В мире онлайна принято считаться с мнением W3C и все популярные браузеры сотрудничают с организацией, и следуют ее рекомендациям.
Теги: физические и семантические
Согласно предписаниям W3C, теги принято делить на теги физического и логического (семантического) уровня форматирования.
Теги физического форматирования были придуманы Бернерсом-Ли еще в далёком 1991 году.
Теги логического форматирования появились в середине 90-х, уже под эгидой Консорциума Всемирной Паутины (W3C) в спецификации HTML 2.0.
Физические призваны просто отображать форматирование текста так как было задумано автором. Логические же, как и следует из названия, обеспечивают и определенную логику обработки контента заключенного в них.
Зачем нужны логические теги?
Отличия b от strong
При применении обоих тегов, мы будем наблюдать в браузере один и тот же эффект, так в чем же разница?
Разница в том что тег является тегом логической разметки, а просто делает текст жирным, не прибавляя к этому никакой смысловой нагрузки.
Зачем? В идеале W3C хотели чтобы браузеры отображали важный участок текста иначе. На деле же оказалось, что эффект можно наблюдать только в речевых браузерах для слабовидящих, где слова выделенные strong-ом, действительно подчеркиваются интонацией.
Отличия i от em
С тегами для придания шрифту начертания курсивом, ситуация весьма схожая. Использование тега , также как и использование тега дадут одинаковый эффект.
Комментарии W3C советуют использовать тег для выделения курсивом. Ни о чем конкретном при этом не говорится, мы вольны выделять хоть имя автора, указанное в тексте, хоть просто важное по смыслу понятие или даже целое предложение. В общем, всё как в печатной литературе.
С тегом всё как и со строногом — он логический. Лично меня очень забавляет официальное описание тега на сайте W3C.
Офсайт консорциума пишет что тег предназначен для выделения «emphatic stress» текста.
Эмпатический, мать его, стресс. Ну я согласен, что на русский это можно перевести не так грубо, но яснее ситуация не становится. Есть ощущение, что консорциум и сам не знает, для чего добавил элемент.
На сегодняшний день W3C советует использовать CSS вместо , а как тег выделения курсивом.
Влияние strong и b на оптимизацию
Есть пара мифов о том, как использование тегов логической разметки и влияет на позиции.
Первый убеждает нас в том, что использование логических тегов вместо привычных и позволит сайту подняться в выдаче.
Второй говорит о том, что теги выделения нельзя использовать в текста больше определенного количества раз.
По факту помнится, кто то даже проводил эксперимент, который конечно так и не дал ответ на вопрос на 100%.
На позицию сайта в поисковой системе влияет множество нюансов, ничего нельзя сказать однозначно.
Кроме того, есть случаи, когда использование верстки именно физическими тегами необходимо.
Я часто использую физическую разметку в верстке шаблонов писем. Субъективно могу сказать что такие теги вызывают меньше ошибок в онлайн версиях почтовиков.
Мнение Google и Яндекс
Несколько лет назад, в ходе трансляции на Youtube, Google, в лице своего представителя (Matt Cutts), ясно дали ответ на этот вопрос. Ответ: нам без разницы какие теги вы используете (b/i или strong/em). Делайте хорошие сайты для людей, а потом уже думайте об таких мелочах.
Matt Cutts объясняет что к чему. Youtube
Яндекс же не дает никаких комментариев, но везде советует использовать семантические теги по максимуму.
Так или иначе, Яндекс всегда «притормаживает» с копированием стандартов у гугл и/или их переработкой, так что в этой части можно и ограничится мнением американского собрата.
Выводы
Да, и, пожалуй, я испытываю определенную ностальгическую привязанность к старым (но отлично работающим) тегам HTML, но это уже отношения к теме не имеет.:-)
Фотограф, блогер, специалист по рекламе в интернете. В прошлом веб-дизайнер/разработчик. Веду своё шоу в VK Клипах, люблю рок, джаз, Стивена Кинга и Харуки Мураками.
Strong и b в чем разница
HTML — это язык разметки гипертекста. С его помощью мы сообщаем браузеру, какие элементы веб-страницы ему предстоит отобразить. Если ранее он отображал только визуальные элементы и текст, то сегодня язык HTML способен передавать и смысловую нагрузку наполнения страницы. Для этого разработчики используют специальные элементы для форматирования текста.
Текст форматируется по трем причинам:
В спецификации W3C все теги HTML размещены в двух разделах. и находятся в разделе «Структурированный текст». Это значит, что они определяют внешний вид, а также учитываются специальными программами, которые предназначены для изменения интонации и громкости.
Внешний вид необязательно будет жирным или курсивом. Он может регулироваться стилями CSS, но по-прежнему передавать браузеру значение большей важности выделенного тегами текста, относительно другого. и вынесены в раздел «Форматирование» и указывают браузеру, как отобразить фрагмент текста.
Со стороны поисковых систем нет существенных указаний, как использовать основные теги HTML для оптимизации страниц. Сотрудники Google отрицают какую-либо разницу и разрешают использовать любые из них. Тем не менее трансформация алгоритмов дает повод усомниться.
Миссия поисковых систем — предоставить релевантный результат в ответ на запрос пользователя. Для этого они пытаются понять смысл того, что вы публикуете на своих страницах. Использование семантических тегов упрощает эту задачу. Они обращают внимание поисковых роботов на слова и фразы, которые помогают им определить, к какому запросу, вероятнее всего, принадлежит страница.
Однако существуют рекомендации W3C:
В HTML5 тег используйте для особо важных фрагментов. Это наиболее актуально:
Тег используйте для выделения:
Задано предложение: «Кошки — милые животные». В зависимости от того, где поставлен тег изменится смысл.
« Кошки — милые животные» — если кто-то утверждает, что милы другие животные.
«Кошки — милые животные» — Если кто-то утверждает, что кошки — противные животные.
«Кошки — милые животные » — Если кто-то утверждает, что кошки — милые овощи.
Важность. Теги strong и b
Это задание архивной части. Перейдите по ссылке, чтобы пройти актуальный тренажёр.
Ещё раз отметим, что эта часть посвящена логической разметке текста, поэтому уделяется особое внимание смыслу элементов, их предназначению, а не визуальному форматированию.
В предыдущих заданиях вы познакомились с элементами, которые предназначены для разметки крупных блоков текста: заголовков, абзацев и списков. В этом и последующих заданиях мы познакомимся с элементами, предназначенными для разметки небольших фраз и отдельных слов.
Первые два тега предназначены, чтобы указать на важность слова или фразы.
Тег определяет важность отмеченного текста.
Тег предназначен для выделения текста без придания ему особой важности.
Визуально оба тега одинаковы, они выделяют текст полужирным.
Лучше всего отличия этих тегов будут заметны людям, которые используют специальные настройки ОС, в частности, слепым и слабовидящим. Когда они включают функцию чтения текста, то «говорилка» будет интонацией выделять слова с тегом . То же самое касается и тегов и . Тег «говорилка» будет выделять интонацией.
Что не так с онлайн-курсами и как это исправить: опыт HTML Academy
Мы в HTML Academy постоянно работаем над повышением эффективности наших образовательных программ и курсов (ради этого мы ставим опыты на студентах и внедряем геймификацию).
Подобные изыскания привели нас к пониманию того, что для подготовки профессионала, который мог бы работать в области веб-технологий (хотя бы на позиции начального уровня) недостаточно одних курсов, состоящих из видеолекций и последующих заданий. Освоить весь объём контента, необходимого для выхода на определённый уровень знаний, в подобном режиме просто невозможно.
Именно поэтому мы решили создать курс, прохождение которого позволяло бы людям не просто получить базовые знания вёрстки, но стать настоящим ИТ-специалистом. В сегодняшнем материале мы расскажем о том, что в итоге из всего этого получилось.
Прочитать статью целиком вы можете на Хабре.