The HTML Strong Importance Element ( ) indicates that its contents have strong importance, seriousness, or urgency. Browsers typically render the contents in bold type.
The source for this interactive example is stored in a GitHub repository. If you"d like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
| Content categories | Flow content , phrasing content , palpable content. |
|---|---|
| Permitted content | Phrasing content . |
| Tag omission | None, must have both a start tag and an end tag. |
| Permitted parents | Any element that accepts phrasing content , or any element that accepts flow content . |
| Permitted ARIA roles | Any |
| DOM interface | HTMLElement |
Attributes
Usage notes
The element is for content that is of "strong importance," including things of great seriousness or urgency (such as warnings). This could be a sentence that is of great importance to the whole page, or you could merely try to point out that some words are of greater importance compared to nearby content.
Typically this element is rendered by default using a bold font weight. However, it should not be used simply to apply bold styling; use the CSS font-weight property for that purpose. Use the ) is used to draw the reader" s attention to the element contents which are not otherwise granted special importance.> element to draw attention to certain text without indicating a higher level of importance. Use the element marks text that has stress emphasis. The element can be nested, with each level of nesting indicating a greater degree of emphasis."> element to mark text that has stress emphasis.
Another accepted use for is to denote the labels of paragraphs which represent notes or warnings within the text of a page.
_vs._"> vs.
It is often confusing to new developers why there are so many ways to express the same thing on a rendered website. ) is used to draw the reader" s attention to the element contents which are not otherwise granted special importance.> and are perhaps one of the most common sources of confusion, causing developers to ask "Should I use or ? Don"t they both do the same thing?"
Not exactly. The element is for content that is of greater importance, while the element is used to draw attention to text without indicating that it"s more important.
It may help to realize that both are valid and semantic elements in HTML5 and that it"s a coincidence that they both have the same default styling (boldface) in most browsers (although some older browsers actually underline ). Each element is meant to be used in certain types of scenarios, and if you want to bold text simply for decoration, you should instead actually use the CSS font-weight property.
The intended meaning or purpose of the enclosed text should be what determines which element you use. Communicating meaning is what semantics are all about.
_vs._"> vs.
Adding to the confusion is the fact that while HTML 4 defined as simply indicating a stronger emphasis, HTML 5 defines as representing "strong importance for its contents." This is an important distinction to make.
While is used to change the meaning of a sentence as spoken emphasis does ("I love carrots" vs. "I love carrots "), is used to give portions of a sentence added importance (e.g., "Warning! This is very dangerous. ") Both and can be nested to increase the relative degree of importance or stress emphasis, respectively.
Examples
Basic example
Before proceeding, make sure you put on your safety goggles.
The resulting output:
Labeling warnings
Important: Before proceeding, make sure you add plenty of butter.
This results in:
Specifications
| Specification | Status | Comment |
|---|---|---|
| HTML Living Standard The definition of "" in that specification. |
Living Standard | |
| HTML5 The definition of "" in that specification. |
Recommendation | |
| HTML 4.01 Specification The definition of "" in that specification. |
Recommendation |
Browser compatibility
The compatibility table in this page is generated from structured data. If you"d like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
| Desktop | Mobile | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | Safari on iOS | Samsung Internet | |
| strong | Chrome Full support 1 | Edge Full support Yes | Firefox
Full support
1 Notes Full support 1Notes Notes Before Firefox 4, creating a element incorrectly resulted in an HTMLSpanElement object, instead of the expected HTMLElement . | IE Full support Yes | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Edge Mobile Full support Yes | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
Здравствуйте, уважаемые читатели блога ! В этой статье речь пойдет о тегах форматирования текста . Яркими примерами являются выделение текста жирным или курсивом. Также мы рассмотрим влияние некоторых тегов на внутреннюю оптимизацию сайта и правила их написания. Про то, вы можете прочитать в приведенной статье. Кстати, вы можете встретить подобные элементы оформления текста вы можете во многих текстовых редакторах, например в Ворде.
Теги разделяются на 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-ти видов и каждый имеет свой тег. Каждый вид носит лишь свой порядковый номер и записывается с помощью тегов
, ,..., . Вот как выглядят все заголовки в обработанном виде:
. Вот как выглядят все заголовки в обработанном виде:
Цифра после слова заголовок соответствует цифре в теге
А теперь поговорим про тег выделения абзаца
Функция данного тега заключается в отделении текста между от другого такого же текста пустой строкой. Если посмотреть исходный код какого-либо документа, то вы можете увидеть следующее:
В зеленых прямоугольниках один абзац, в красных — другой. А вот как этот код выглядит после обработки браузером (стрелочка указывает на пустую строку):
В итоге мы получаем довольно заметное отделение одного абзаца от другого, что идет на пользу — чтение становится более удобным.
Вот и подошла к концу статья про теги форматирования документа . Их намного больше, нежели я описал в этом материале. Просто о некоторых нужно рассказать довольно много, вследствие чего им будет посвящены отдельные статьи с полным обзором.!
Основная проблема копирайтеров – им не всегда везет с грамотными заказчиками-профессионалами. Это значит, что нередко поступают ТЗ с устаревшей SEO-информацией, которая может только навредить текстам. Чтобы этого не происходило, хорошему копирайтеру желательно самому постоянно крутиться в мире SEO: читать про основы продвижения, проходить курсы у классных учителей, общаться на специализированных форумах
. Тогда можно будет оперативно получать информацию о постоянно меняющихся алгоритмах поисковиков и узнавать разные полезные мелочи. Вот возьмем банальщину – тег strong в текстах
. Нужен ли он? Как влияет на оптимизацию? Может ли из-за него сайт попасть под бан? Столько вопросов…
Когда используется тег strong?
Ответы на все вопросы стоит искать в азах HTML, а также в специфических отношениях поисковых систем к анализу статей на сайтах. Итак, пробежимся по азбучным истинам.
Для выделения текста полужирным используется тег b и тег strong. Эти теги парные. Слово, ключевой запрос или пассаж обрамляются при помощи открывающего и закрывающего тега, что в результате дает желаемое выделение текстового блока. Разница между тегами b и strong значительна.
Тег strong относится к тегам логической разметки , то есть не только обеспечивает конструкции полужирное выделение, но и подчеркивает важность помеченного текста. На тег стронг обращают внимание роботы поисковых систем, «считывая» со статей ключи и значимые фразы. Что же касается тега b, то он является тегом физической разметки и отвечает только за полужирное выделение.
Получается, оба эти тега для пользователя абсолютно равнозначны, но для анализирующих сайты роботов – нет. В этом и кроется основная проблема, так как нормальное количество стронгов в текстах могут поднять сайт в ранжировании, а вот излишек – подвести под бан.
Как часто можно использовать тег стронг в тексте?
Чтобы ответить на поставленный выше вопрос, необходимо понять: нужен тег вообще, или он как элемент продвижения он себя уже изжил. Сергей Кокшаров (он же известный всем seo-волшебник devaka) считает, что тег strong использовать не нужно и, более того, он способен даже навредить сайту при чрезмерном или неаккуратном применении. Да, когда-то w3c рекомендовали использовать тег стронг вместо b и повышать позиции выдачи сайта. Но это в прошлом. Сегодня тег strong лучше избегать, заменяя его иными способами полужирного выделения. Но об этом позже.
Такие ответы – гарантия, что сайт не возьмут в каталог Яндекса, а также отметят как потенциальный ресурс для бана.
Однако не стоит хвататься за голову и экстренно удалять все имеющиеся теги с сайта. Это излишне. Умеренное наличие тега strong и использование его только для значимых ключевых запросов не ударит по имиджу интернет-ресурса. Ко всему стоит подходить разумно.
Как использовать тег стронг для текстов сайта?
Теперь рассмотрим непосредственно тег strong для копирайтера. Когда при работе с текстом заказчик просить выделить ключи и значимые моменты полужирным шрифтом, к решению задачи нужно подойти со всей тщательностью. А именно:
Про теги для копирайтеров у меня уже была очень полная и интересная статья с познавательными комментариями и доступной инфографикой. Рекомендую ознакомиться:
Ошибки применения тега стронг
Первая и основная уже названа – переоптимизация за счет чрезмерно частого использования тега логической разметки. Но есть и другие огрехи, которые встречаются при оформлении текстов:
Возникнут проблемы также и в том случае, если безоглядно довериться редакторам Ворда или Вордпресса. Первый обеспечит текст кучей ненужного мусора, второй же везде проставит тег стронг, не вникая в специфику логической и физической разметки и уже тем более не беспокоясь о стилях.
Поэтому лучший вариант самостоятельно отслеживать каждое применение тега, чтобы точно знать, как и каким способом было осуществлено полужирное выделение и не нанесет ли это вред сайту.
Отклик, который пришел на статью практически сразу, уведомил, что все эти исследования и рассуждения бессмысленны. Источник – авторитетный, но раскрывать его смысла не вижу.
«Это информация не просто устаревшая, а лет так на 10 устаревшая. Алгоритмы, плюющие на такие приемы SEO, в том же Яндексе сделали еще в ~2008 году. Современным поисковым машинам вообще по фигу, какими тегами размечен текст».
Вывод: все теги – полная бессмыслица, оформляйте тексты так, как хочется и не обращайте ни на что внимание))))
Теперь точно всё.
Прочитано: 2 070
Какой тег лучше использовать с точки зрения 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 .
