A em strong b i img

A em strong b i img

Часто новички спрашивают (https://searchengines.guru/showthread.php?t=314105) на форумах (https://searchengines.guru/showthread.php?t=20764), что лучше использовать, strong или b для поисковых систем.

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

1. W3C (http://www.w3.org/) рекомендует использовать тег strong вместо b, однако это всего-лишь рекомендации, не стандарты. То же самое по поводу тега em.

2. Поисковые системы и пользователи не видят разницы в тегах выделения жирным и наклонными шрифтами.

Для Google этот момент прокомментировал Мэт Катс (http://v >
Недавно поднимался вопрос среди вебмастеров, в котором спросили, что лучше использовать, тег или лучше было бы ; ситуация неясна, так как раньше все использовали , а W3C рекомендует использовать . Не стоит безпокоиться об этом!

Прелесть в том, что, фактически, инженер показал мне кусок кода, где я видел сам, что Google дает тегам bold и strong один и тот же вес (спасибо Паул, я весьма благодарен!). Вдобавок, я проверил, он также нашел код, который показал, что em и i обрабатываются также одинаково.

Теперь вы знаете что делать — верстайте так, как рекомендует W3C, делайте код семантически верным и не безпокойтесь о своих старых тегах, так как Google поддерживает их и обрабатывает абсолютно одинаково.

Более того, вы можете использовать и те и другие теги одновременно, выделяя их разными стилями с помощью CSS.

Для Яндекса официальной информации об этих тегах не найдено, однако, Константином Рощупкиным был проведен эксперимент (https://searchengines.guru/showthread.php?t=24623), в котором он утверждает, что strong и em лучше, чем b и i. С моей точки зрения, эксперимент не доведен до конца, так как стоило дождаться полной индексации, потом поменять теги в документах и посмотреть на результаты после переиндексации. Если бы страницы встали в той же последовательности, что и раньше, тогда можно было бы 100% утверждать приоритеты тегов, однако, на данный момент, по своему опыту, скажу, что разницы в этих тегах совершенно нет и для Яндекса тоже!

1. Выделяйте в теги ключи, а если необходимо просто выделить неключевую фразу жирным шрифтом, тогда используйте CSS стиль font-weight:bold;.

То же самое касается и тега em, — используйте его для ключевых фраз, а не для выделения текста типа “Добро пожаловать” или “только этой весной у нас скидки”.

2. Не используйте вложенные конструкции одинаковых тегов

ключевое слово

Это не увеличит релевантность страницы вашему ключевому слову, но будет считаться за спам и злые конкуренты обязательно пожалуются представителям поисковых систем на переоптимизацию ваших страниц с целью манипулирования выдачей.

3. Вы можете использовать теги в комбинациях, чтобы придать разный стиль разным участкам текста или элементам дизайна.

4. Используйте strong и em по рекомендациям W3C, но не заморачивайтесь на изменении тегов своих старых страниц, так как это не стоит потеряного времени.

В то время как многие элементы из HTML4 вошли в HTML5 без существенных изменений, некоторые исторически презентационные элементы обрели новую семантику.

Давайте посмотрим на и и сравним их с семантическими преемниками — и . Что получается:

  • — был просто курсивом, а сейчас обозначает дополнительное выделение (например, для иностранных слов, технических терминов) или просто курсивное начертание текста (W3C:Markup, WHATWG);
  • — просто выделял текст полужирным, а сейчас обозначает стилистическое усиление текста (например, для ключевых слов) или просто полужирное начертание (W3C:Markup, WHATWG);
  • — обозначал выделение, а сейчас обозначает экспрессивно-эмоциональное выделение, т.е. слово или фразу, произнесённые иначе (W3C:Markup, WHATWG);
  • — обозначал большее усиление экспрессии, а сейчас обозначает высокую важность, что, в общем, почти то же самое (ещё большее усиление или важность сейчас определяется уровнем вложенности) (W3C:Markup, WHATWG).
Читайте также:  Javascript отправка post запроса

Новая семантика презентационных элементов

В HTML4 элементы и были презентационными. Они по-прежнему могут использоваться там, где этого требует типографская традиция. Тем не менее, теперь они обрели семантику и могут быть оформлены при помощи CSS, что делает их не только презентационными — элемент , например, совсем не обязательно должен быть полужирным. Поэтому для обозначения смысловой нагрузки элементов рекомендуется использовать классы; это позволит легко изменить внешний вид элементов в дальнейшем.

Элемент

Элемент представляет собой фрагмент текста с дополнительным выделением или же экспрессивно-эмоциональным сдвигом относительно обычного текста (то, что обычно обозначается курсивом в типографике)

Обычно обозначаются курсивом: иностранные слова (с атрибутом lang ), таксономия и технические термины, названия кораблей, пометки в сценариях, нотное письмо, вставки размышлений или рукописного текста. Пример:

В указанном примере элемент используется для обозначения внутреннего диалога персонажа, произнесённого в другом тоне.

Элемент используется в этом примере для обозначения «идиоматических фраз из другого языка» (японских слов). Полный список значений атрибута lang вы можете найти в официальном списке IANA; или же вы можете воспользоваться замечательным сервисом по поиску языковых обозначений от Ричарда Исиды из W3C.

Элементом в данном примере обозначается таксономическая единица.

Используйте только в том случае, когда не удаётся найти ничего более подходящего: для фрагментов с экспрессивно-эмоциональным выделением, для смысловой важности, для имён при цитировании или в библиографии, для определений и для математических переменных. Однако для придания курсивного начертания таким блокам текста, как ремарки, стихотворные строфы и цитаты, используйте CSS . Не забывайте использовать атрибут class для задания функциональной роли элемента — это позволит с легкостью переопределить стили в дальнейшем. К примеру, вы можете сделать выборку по атрибуту lang в CSS, используя селектор вида [lang="ja-cyrl"] .

Элемент

Элемент представляет собой фрагмент текста, который выделяется из окружающего его контекста, но не передает никакого особого значения. Это, например, ключевые слова в выдержках, названия продуктов в обзорах или другие части текста, которые по правилам типографики обычно выделяются полужирным начертанием.

Для текста, обрамленного в (который должен просто отличаться от основного), нет необходимости использовать font-style:bold — можно обратиться к другим стилям: скруглённому фону, большему размеру шрифта, другому цвет или особому форматированию типа капители. К примеру, в приведенном выше отрывке, используется для указания на того, кто говорит или рассказывает.

Текст, который набран полужирным по типографским соглашениям (а совсем не потому, что он более важен) может использоваться для выделения имён в голливудских сплетнях или в качестве вводного текста для сложных или оформленных в классическом стиле текстов:

В данном примере буквица соединяется с текстом при помощи . Для ее создания используется псевдо-элемент :first-letter . В этом случае открывающая фраза выделена полужирным только из оформительских соображений, но если бы этот фрагмент был семантически важен, то или другой подобный элемент подошли бы лучше.

Несмотря на то, что мы можем использовать для традиционного типографического оформления вроде выделения капителью первого слова, фразы или предложения, псевдо-элемент :first-line больше подходит для таких целей. Например, все первые абзацы HTML5Doctor.com оформлены при помощи элегантного :first-of-type .

Используйте только тогда, когда нет ничего более подходящего, например: для текста с семантической важностью, для акцентированного текста (с «логическим ударением»), элементы от

для заголовков и для подсвеченного или выделенного текста. Для облака тегов используйте список с соответствующими классами. Для воссоздания традиционных типографских приёмов используйте CSS-селекторы псевдо-элементов: :first-line и :first-letter , каждый для своего случая. И ещё раз, не забывайте использовать атрибут class для обозначения того, зачем был использован каждый конкретный элемент — это упростит повторное изменение элемента в дальнейшем.

. и для сравнения: элементы и

Хотя

и остались практически такими же, как были, в их значении всё же произошли некоторые изменения. В HTML4 они означали «акцент» и «сильный акцент». Сейчас их значение несколько видоизменилось: обозначает экспрессивно-эмоциональное выделение (т.е. нечто, произнесённое иначе), а обозначает важность.

Элемент

Элемент обозначает часть текста с эмфатическим ударением.

Термин «ударение» имеет отношение к лингвистике. Ударение изменяет эмоциональную окраску слова, что, в свою очередь, может изменить смысл предложения. Например, фраза «Быстро позови доктора!» акцентирует важность того, чтобы позвали именно доктора — возможно, в ответ на чей-то вопрос «Мне позвать сестру?» Напротив, фраза «Быстро позови доктора!» акцентирует важность немедленного вызова.

Используйте в других случаях для обозначения важности и для курсивного начертания без эмоциональной окраски. Уровень вложенности обозначает силу акцентирования.

Элемент

Элемент обозначает часть текста с высокой важностью.

Добавить, в общем-то, и нечего — элемент хорошо всем нам знаком. Используйте вложенные элементы для обозначения относительной важности, для эмафтического ударения и для стилистически выделенных или просто полужирных фрагментов текста без подчёкнутой важности.

Резюмируя.

И последнее: все эти элементы (как и большинство HTML5-элементов) намеренно были сделаны медиа-независимыми, т.е. их семантика теперь не привязана к отображению в визуальных браузерах.

Что же мы имеем? Две презентационных дворняжки из HTML4 превратились в полноценные, насыщенные смыслом HTML5-элементы, готовые снова вернуться в ваш код. Сможете ли вы устоять перед их блестящими, полными семантики щенячьими глазками? Дайте нам знать!

Перевод оригинальной статьи «The i, b, em, & strong elements» Оли Стадхольма (Oli Studholme), опубликованной на сайте HTML5Doctor.com.

Комментарии +

по-моему, можно легко перепутать предназначение и

Что такое ? в первый раз слышу

fiskus_boulder, мне кажется, что имеет более косвенное отношение к документу, в котором он появляется. Это универсальное выделение, которое допустимо в любом месте.

sunnybear, твой супер-тег потерялся вместе с сутью вопроса. Приём!

Короче всё ушло в гамно. Ребята из W3C знают толк в особых извращениях.

Вот еще одна хорошая статья, продолжающая эту тему. Правда на английском.

Вот статья на русском и не буржуйская. Свои ребята провели исследования и меду прочим сам пробовал, отлично работает
http://bitvar.ru/besplatnoe-seo/vnutrennyaya-optimizaciya-po-polochkam/43-strong-em-v-i.html
Не так давно (10-07-2010) ребятами из исследовательского проекта bitvar были проведены исследования касающиеся strong em b i
Очень интересно и познавательно

Это свинское SEO, которое считает деньги и «генерит уникальный контент». Никакого отношения к веб-разработке упомянутая статья не имеет.

словоблудие.. выделение не может быть не смысловым. если что-то выделяется — значит смысл в этом есть. какой? да разный. без чёткой семантики все эти элементы будут использоваться в перемешку, а значит смысла в них никакого не будет.

Вадим Макеев честно говоря с этим ворожением поднадоел, не первый раз его встречаю, а вот следование стандартам W3C ещё никто не отменял. И это не свинское сео, а порядок обусловленный стандартами, вам бы вадим побольше читать технической лит-ры если плохо сечете, и творите хаос из отличного материала.

Патрик, актуальные стандарты W3C описаны именно в этой статье и говорят, прежде всего, о смысловой разметке документа. «Свинским SEO» названа статья, упомянутая Mity, в которой речь идёт не о семантике документа, а о трюкачестве, которое помогает удобно пробиться в поисковую выдачу.

Абсолютно согласен с Вадимом

В представленном примере из статьи

Но, господа позвольте, а разве предложение представленное в описанной выше статье не имеет целостную важность. И более правильное использование не будет выглядеть так — «Быстро позови доктора!». Иначе все остальные слова в данном предложении будут "водой" и теряются, поскольку его можно сократить до одного слова "ДОКТОРА!" которое будет лучше отражать сокращенный и экстренный смысл вложенный в него автором. И это не частность.
Именно ради этих случаев я и инициировал исследование в bitvar.ru, но не моя вина, что автор материала, после заранее оговоренного срока, счел возможным представить информацию в статье в таком виде. Я не ратую за статью меня волнует важность конструкции, ведь она очевидна.

Патрик, вы вообще понимаете, что в статье написано? Там даны варианты акцента в зависимости от нужд говорящего. Важно «доктор» или «быстро» в каждом конкретном случае.
Вы же в своем комментарии зачем-то передергиваете сказанное и сужаете значение до одного только случая, когда важно «доктор».
Короче, в огороде бузина, а в Киеве дядька, извините.

Не боюсь ошибиться, но по-моему смысловые различия между тэгами b и strong например были описаны еще во время XHTML.
Во всяком случае это точно не новость, хотя информация достоверная, спасибо автору=)

Ребят, небольшая опечатка в слова "подчёкнутой" в конце статьи.

Добавить, в общем-то, и нечего — элемент хорошо всем нам знаком. Используйте вложенные элементы для обозначения относительной важности, для эмафтического ударения и для стилистически выделенных или просто полужирных фрагментов текста без подчёкнутой важности

Существуют HTML-теги, предназначенные (вроде как) для одного и того же и рендерящиеся одинаково. Например пары em и i, strong и b.

Какие теги форматирования «правильнее» применять (там где уместно форматирование тегами — например при оформлении топиков/комментов здесь же на Хабре, на StackOverflow, и т.п.)?

Сам я склоняюсь к em/strong т.к. они более, так сказать, семантичны. С другой стороны, i/b вроде как лаконичнее.

  • Вопрос задан более трёх лет назад
  • 14866 просмотров

В W3C спецификации теги EM и STRONG вынесены в раздел Структурированный текст -> Элементы фраз.
EM: Indicates emphasis.
STRONG: Indicates stronger emphasis.
Внешний вид, как будут отображаться элементы фраз, определяется браузером. Эти теги могут учитываться, например, Text-to-Speech движками для изменения интонации или громкости голоса.

В то же время B и I относятся к разделу Форматирование -> Шрифты и дают явное указание браузеру, каким шрифтом отрисовывать фрагмент.
I: Renders as italic text style.
B: Renders as bold text style.

Ссылка на основную публикацию
40Pfl3107h 60 нет изображения
Материал на страницы добавляется по мере накопления данных из доступной технической документации, личного авторского опыта и от мастеров ремонтных форумов....
1С как открыть форму нового документа
В 1С Предприятии 8.2 для этих целей существует два возможных сценария работы: открыть форму нового документа и предоставить пользователю самому...
1С как сохранить конфигурацию поставщика в файл
Конфигурация поставщика. Из любой конфигурации, вне зависимости от её текущего состояния (типовая, снята сподержки, открыта на редактирование, изменена) можно выгрузить...
40Pft4509 60 не реагирует на пульт
Ответы на часто задаваемые вопросы Ситуация Телевизор не реагирует на команды пульта ДУ. Проверка • Используется оригинальный пульт дистанционного управления...
Adblock detector