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

до

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

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

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

Элемент

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

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

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

Элемент

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

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

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

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

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

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

Как правильно — или , или ? Если говорить кратко — с точки зрения визуального отображения тегов в браузере, корректными будут оба варианта. Однако с точки зрения около-браузерной софистики — различий между тегами просто масса.

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 раз прописать именно тег .
Какая разница в конечном итоге, ведь отображение то одинаковое.

Здравствуйте, уважаемые читатели блога ! В этой статье речь пойдет о тегах форматирования текста . Яркими примерами являются выделение текста жирным или курсивом. Также мы рассмотрим влияние некоторых тегов на внутреннюю оптимизацию сайта и правила их написания. Про то, вы можете прочитать в приведенной статье. Кстати, вы можете встретить подобные элементы оформления текста вы можете во многих текстовых редакторах, например в Ворде.

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

Правила и порядок написания тегов

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

Когда браузер обработает этот фрагмент, то вы увидите вот такой текст: Выделенный фрагмент. Кстати, в RSS ленте все теги не отображаются ().

Главное при написании тегов — не забывайте их закрывать. Иначе весь текст на странице будет выделен жирным (в примере с тегом ). Но бывают такие случаи, когда нужно выделить определенный фрагмент и жирным и курсивом одновременно. Но тега, выполняющего это действие, не существует. Выход из этой ситуации один: использовать два тега одновременно. В каком порядке их использовать значения не имеет. Поэтому, написав текст с тегами так:

Выделенный фрагмент

или вот так:

Выделенный фрагмент

Вы все равно получите Выделенный фрагмент курсивом и жирным одновременно. Однако, предпочтительно использовать первый вариант, потому что изначально он был единственным и правильным. Также не стоит забывать о том, что каждый браузер может обрабатывать теги по-разному (), в зависимости от настроек. А теперь перейдем к самим тегам форматирования

Выделение текста жирным и курсивом — теги , , и

Самые популярные теги форматирования текста — выделение его жирным и курсивом . Обычно их используют для придания важности какому-либо фрагменту. Первый случай служит для выделения фрагмента, содержащего полезную информацию или ключевые слова. Курсив применяется в тех же целях, что и жирный текст, но информация менее важна, потому что курсив на фоне основного текста менее заметен, нежели жирный текст.

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

Текст в тегах strong

Текст в тегах b

А вот как выглядят две данные строчки в исходном коде страницы:

Текст в тегах strong Текст в тегах b

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

Текст в тегах em

Текст в тегах I

А вот исходный код:

Текст в тегах em Текст в тегах I

Итак, рассмотренные теги выделения жирным и курсивом фактически не отличаются, но зачем же тогда нам, например, тег если есть ? Ведь последний содержит всего один символ (не считая скобок) и, следовательно, легче в написании. А все дело в том, что теги и влияют на . Если вы будете окружать этими тегами ключевые слова, то это благоприятно скажется на продвижении сайта.Главное не переусердствовать — максимум в тексте должно быть 5% жирного текста в теге , и столько же и курсива в теге .

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

Теги выделения текста чертой — , и

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

Еще два схожих по назначению тега - и . Оба выполняют функцию зачеркивания текста. Использовать этот тег можно в любых ситуациях: если вы обновляете документ (а точнее его часть), то можно перечеркнуть старое и добавить новое; если вы собираетесь написать нечто, отходящее от темы материала; что-то не соответствующее морально-этическим нормам.

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

Тег и атрибуты — параметры шрифта текста

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

• face — сам шрифт. Например, Arial, Courier или Verdana. Можно перечислить несколько, т.к. не у всех пользователей имеется обширный набор шрифтов, а написав несколько в атрибуте face, браузер сможет выбрать, какой использовать, а точнее — какой присутствует в системе;
• size — атрибут, указывающий размер текста. Может быть выражен как в условных единицах, так и в пикселях;
• color — цвет текста. Данный атрибут можно использовать как в HTML-кодах цветов, так и в словесных. Первые имеют вид #FFFFFF (где F — любая цифра или буква от A до F), а вторые записываются простыми словами (например, red — красный).

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

Этот текст имеет размер 6px

Этот текст красного цвета

Этот текст имеет шрифт Arial

Этот текст красного цвета и размера 5px

А вот что вы увидите, после обработки написанного кода:

Блочные элементы оформления текста — заголовки

-

, абзац

Напоследок мы рассмотрим блочные элементы, которые используются практически в каждом документе. Это теги заголовков и абзаца. Рассмотрим первое. Заголовки бывают 6-ти видов и каждый имеет свой тег. Каждый вид носит лишь свой порядковый номер и записывается с помощью тегов

,

,...,

. Вот как выглядят все заголовки в обработанном виде:

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

А теперь поговорим про тег выделения абзаца

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

В зеленых прямоугольниках один абзац, в красных — другой. А вот как этот код выглядит после обработки браузером (стрелочка указывает на пустую строку):

В итоге мы получаем довольно заметное отделение одного абзаца от другого, что идет на пользу — чтение становится более удобным.

Вот и подошла к концу статья про теги форматирования документа . Их намного больше, нежели я описал в этом материале. Просто о некоторых нужно рассказать довольно много, вследствие чего им будет посвящены отдельные статьи с полным обзором.!

Всем известно, что теги , , , являются презентационными, а следовательно, исходя из парадигмы «структура, представление, поведение» их использование не приветствуется. Куда более привычными представляются элементы , , . Так было на протяжении долгих лет практики разработки. Однако многое поменялось в семантике этих элементов с приходом HTML5 . Теперь у нас 4 новых тега со смыслом и каша в голове.

vs

Если раньше все учебники по вёрстке пестрили фразами вроде «используйте вместо », и это было наполовину верно, то сегодня такая привычка может сыграть злую семантическую шутку. А дело всё в том, что авторы 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.

В свою очередь , как и раньше, означает повышенную значимость своего содержимого.

vs

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

Per aspera ad Astra — в переводе с латыни изречение означает «Через тернии к звёздам».

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

Казнить нельзя, помиловать.

Внимательно читайте договор!

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

Холивар о

Раньше был ни чем иным, как зачёркнутый текст. Теперь представляет информацию, которая утратила свою актуальность.
У нас также есть элемент , результатом обработки которого по умолчанию в визуальных ПА является зачёркнутый текст. Он означает изменения в документе, и на первый взгляд их назначение может показаться одинаковым. Однако здесь есть тонкий момент. Рассмотрим пример страницы товара в интернет-магазине.
На ней может быть указано две цены, одна из которых зачёркнута. Её мы размечаем элементом . Это значит, что старая цена утратила свою актуальность (не важно когда это было, важен сам факт). Как проверить, что не ? подразумевает изменения, внесённые в документ (важно то, что в некоторый момент времени документ был изменён ). В нашем же случае, в новом документе уже содержится неактуальная информация.

Новая семантика и старый доктайп

Если по каким-то непонятным причинам вы не можете заменить доктайп на новый и формально верстаете в HTML 4.01 — не отчаивайтесь. Используйте старые новые элементы с новым смыслом и со временем вы скажете себе «спасибо». Возможно, кто-то скажет, что это неправильно, но ведь эти элементы, кроме даже не являются невалидными. Кроме того, HTML5 разрабатывался с расчётом на обратную совместимость, это же относится и к новой семантике старых элементов. Радикально ничего не изменилось, а добавилась лишь семантическая перчинка.