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

до

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

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

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

Элемент

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

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

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

Элемент

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

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

Резюмируя...

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

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

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

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

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

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

Для Google этот момент прокомментировал Мэт Катс (в одном из видео).

Недавно поднимался вопрос среди вебмастеров, в котором спросили, что лучше использовать, тег или лучше было бы ; ситуация неясна, так как раньше все использовали , а W3C рекомендует использовать . Не стоит безпокоиться об этом!

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

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

Более того, вы можете использовать и те и другие теги одновременно, выделяя их разными стилями с помощью CSS . Например, на страницах сайта 5pages.net (к примеру стр. 200 лет Гоголю) успешно используются и те и другие теги.

Для Яндекса официальной информации об этих тегах не найдено, однако, Константином Рощупкиным был проведен эксперимент , в котором он утверждает, что strong и em лучше, чем b и i . С моей точки зрения, эксперимент не доведен до конца, так как стоило дождаться полной индексации, потом поменять теги в документах и посмотреть на результаты после переиндексации. Если бы страницы встали в той же последовательности, что и раньше, тогда можно было бы 100% утверждать приоритеты тегов, однако, на данный момент, по своему опыту, скажу, что разницы в этих тегах совершенно нет и для Яндекса тоже!

Выводы

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

Однако, правильней было бы выделить заголовки соответствующими тегами Hx, а strong использовать для ключевых фраз на странице, делая страницы более релевантными этим ключам.

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

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

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

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

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

Но в тексте, чтобы выделить жирным ключи или нужные фразы, использовался 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). Делайте хорошие сайты для людей, а потом уже думайте об таких мелочах.

Яндекс же не дает никаких комментариев, но везде советует использовать семантические теги по максимуму.
Так или иначе, Яндекс всегда «притормаживает» с копированием стандартов у гугл и/или их переработкой, так что в этой части можно и ограничится мнением американского собрата.

Выводы

В интернете полно советчиков, и еще больше людей, считающих, что их мнение единственно правильное.
Я не буду придерживаться какой то конкретной версии, я лишь скажу очевидное — тег короче тега .
Если вы пишете код вручную, если вы вносите быстрые правки прямо через панель CMS, гораздо удобнее 5 раз прописать именно тег .
Какая разница в конечном итоге, ведь отображение то одинаковое.

Здравствуйте уважаемые посетители моего блога. В этой статье, я хочу рассказать вам об одной важной особенности , которую используют практически все Вебмастера, но далеко не все знают о том, какой вред может принести эта особенность. Сразу хочу отметить, что те приемы, которые мы будем рассматривать сегодня, больше относятся к поисковой системе Google, но как мне кажется, Яндекс тоже через некоторое время будет ее учитывать, и при обнаружении, серьезно наказывать владельцев определенных сайтов или блогов. Ну, что же, давайте будем переходить к конкретике, и рассмотрим одну из самых основных ошибок, которую так часто допускают Вебмастера (и я в том числе, до недавнего момента) при продвижении своих или клиентских ресурсов.

Массовое использование тега

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

Казалось бы, а что плохого в том, если я хочу обратить внимание своего читателя на важные моменты, которые описаны в статье. Для ответа на этот вопрос, предлагаю просто ознакомится с определением этого тега.

Тег — является элементом логической разметки текста и указывает на его важность в пределах остального текста.

Другими словами, только самые важные элементы по тексту, необходимо выделять этим тегом. Есть даже определенное правило – не более 4-5 выделений по тексту статьи , в соотношении величины статьи 4000-5000 символов. Примерно 1 выделение на 1000 символов.

Если рассматривать мой блог в качестве примера, то вот какой принцип выделения текста был у меня ранее:

Как видите, я старался как можно более ключевых слов и их вариаций выделить тегом , а также использовал этот тег для выделения, на мой взгляд, важных моментов по тексту статьи. Бывали случаи, когда количество таких выделений доходило до 40-50 штук на статью размером 5000-6000 символов!

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

Естественно, на данный момент, я полностью устранил эту проблему, и теперь жду, когда Google переиндексирует полностью все страницы моего сайта и наконец-то присвоит блогу его заслуженные позиции.

А теперь, я приведу вам 3 способа , которые можно использовать, если у вас такая же проблемная ситуация, как была у меня ранее.

1) Использование тега в минимальном количестве на странице сайта. В среднем это значение должно соответствовать формуле 1 выделение на 1000 символов.

2) Вместо тега использовать тег , который является элементом физической разметки и устанавливает жирный текст. Этим тегом, вы точно не навредите сайту! Но стоит отметить, что он является уже устаревшим и используется, как правило, на старых сайтах.

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

Теперь для выделения нужного мне слова или словосочетания, я делаю вот такую вставку:

нужное слово для выделения

и визуально результат получается точно такой же, как и с применением тега .

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

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