Тег strong является одним из основных инструментов структурирования текста в языке HTML. В этой статье мы разберем, как правильно использовать этот тег для получения аккуратной и читабельной разметки текста веб-страницы. Также рассмотрим разницу между тегами форматирования и структурирования текста.
Жирный текст при помощи <strong>
Тег html <strong> используется для того, чтобы сделать выделенный текст жирным (bold). Он является парным, соответственно, требует второго закрывающего тега.
Синтаксис при употреблении будет выглядеть таким образом:
<strong>Этот текст будет отображаться жирным шрифтом</strong>Ничего сложного в использовании этого тега нет, у него отсутствуют атрибуты, употребляется только самостоятельно. Однако есть некоторые нюансы, которые выделяют его среди тегов, дающих визуально аналогичный эффект.
Теги <b> и <strong> — в чем отличия?
Попробуйте открыть любой текстовый редактор и набрать в нем следующий код:
<strong>Пример текста 1</strong> <b>Пример текста 2</b>
Сохраните файл с разрешением .html и откройте в любом браузере. Вы увидите, что результат получился совершенно одинаковый. Возникает вопрос: в каких случаях употребляют один тег, а в каких — другой, и есть ли разница?
Разница действительно существует. Тег <b> отвечает только за визуальное форматирование текста, то есть показывает, как выделенный отрывок будет выглядеть в браузере. И, соответственно, самим браузером он воспринимается только визуально, не неся никакой дополнительной смысловой нагрузки.
А вот тег html <strong> обладает более широким функционалом. Это инструмент структурирования текста.
Помимо визуального эффекта, он позволяет поисковым системам ранжировать отформатированный текст более высоко, поэтому для оптимизации работы веб-сайта рекомендуется использовать именно этот тег.
Также этот тег воспринимается системами Text-to-Speech, что немаловажно для более корректного интонирования.
При верстке сайта рекомендуется использовать именно тег html <strong> (и соответствующий курсиву тег <em>), если требуется выделить небольшие фрагменты текста, либо использовать средства CSS при форматировании больших блоков.
fb.ru
This Word is So Serious
One little-known fact is that HTML actually allows you to imply levels of importance by stacking up multiple <strong>
elements. While browsers won’t generally render these elements any differently, browsers and anyone using assistive technologies will pick up the cue. Here’s how you could use this option if you’re so inclined:
<p><strong>Danger: Swimming in this area is restricted. <strong>Do not enter the water.</strong></strong></p> Let’s see what your browser does with the nested <strong> tags:
html.com
Какие теги использовать?
Как правильно — <b> или <strong>, <i> или <em>? Если говорить кратко — с точки зрения визуального отображения тегов в браузере, корректными будут оба варианта. Однако с точки зрения около-браузерной софистики — различий между тегами просто масса.
W3C, семантика, и благие цели
Сэр Тим Бернерс-Ли. Именно этому человеку мы обязаны в части облика Всемирной Паутины, интернета, таким, каким мы его знаем. Кстати, к названию WWW (WorldWideWeb — Всемирная Паутина) он тоже причастен.
В 1994 году им была основана W3C — консорциум, по сей день являющийся главным и единственным институтом стандартизации представления данных в сети Интернет. В мире онлайна принято считаться с мнением W3C и все популярные браузеры сотрудничают с организацией, и следуют ее рекомендациям.
Теги: физические и семантические
Согласно предписаниям W3C, теги принято делить на теги физического и логического (семантического) уровня форматирования.
Теги физического форматирования были придуманы Бернерсом-Ли еще в далёком 1991 году.
Теги логического форматирования появились в середине 90-х, уже под эгидой Консорциума Всемирной Паутины (W3C) в спецификации HTML 2.0.
Физические призваны просто отображать форматирование текста так как было задумано автором. Логические же, как и следует из названия, обеспечивают и определенную логику обработки контента заключенного в них.
Зачем нужны логические теги?
Сама идея использования тегов, которые будут «обдуманно» применяться к различному контенту уже несет в себе немалые возможности.
Например, обозначьте тег <CODE>, и браузер, и яндекс поймут, что тут идет пример кода, а <ABBR> будет означать, что используется аббревиатура.
Теги логического форматирования содержат в себе меньший объем текста и используются избирательно для единичных слов или фразы.
Отличия b от strong
При применении обоих тегов, мы будем наблюдать в браузере один и тот же эффект, так в чем же разница?
Разница в том что тег <strong> является тегом логической разметки, а <b> просто делает текст жирным, не прибавляя к этому никакой смысловой нагрузки.
Зачем? В идеале W3C хотели чтобы браузеры отображали важный участок текста иначе. На деле же оказалось, что эффект можно наблюдать только в речевых браузерах для слабовидящих, где слова выделенные strong-ом, действительно подчеркиваются интонацией.
Отличия i от em
С тегами для придания шрифту начертания курсивом, ситуация весьма схожая. Использование тега <i>, также как и использование тега <em> дадут одинаковый эффект.
Комментарии W3C советуют использовать тег <i> для выделения курсивом. Ни о чем конкретном при этом не говорится, мы вольны выделять хоть имя автора, указанное в тексте, хоть просто важное по смыслу понятие или даже целое предложение. В общем, всё как в печатной литературе.
С тегом <em> всё как и со строногом — он логический. Лично меня очень забавляет официальное описание тега на сайте W3C.
Офсайт консорциума пишет что тег <em> предназначен для выделения «emphatic stress» текста.
Эмпатический, мать его, стресс. Ну я согласен, что на русский это можно перевести не так грубо, но яснее ситуация не становится. Есть ощущение, что консорциум и сам не знает, для чего добавил элемент.
На сегодняшний день W3C советует использовать CSS вместо <i>, а <em> как тег выделения курсивом.
Влияние strong и b на оптимизацию
Есть пара мифов о том, как использование тегов логической разметки <strong> и <em> влияет на позиции.
Первый убеждает нас в том, что использование логических тегов вместо привычных <b> и <i> позволит сайту подняться в выдаче.
Второй говорит о том, что теги выделения нельзя использовать в текста больше определенного количества раз.
По факту помнится, кто то даже проводил эксперимент, который конечно так и не дал ответ на вопрос на 100%.
На позицию сайта в поисковой системе влияет множество нюансов, ничего нельзя сказать однозначно.
Кроме того, есть случаи, когда использование верстки именно физическими тегами необходимо.
Я часто использую физическую разметку в верстке шаблонов писем. Субъективно могу сказать что такие теги вызывают меньше ошибок в онлайн версиях почтовиков.
Мнение Google и Яндекс
Несколько лет назад, в ходе трансляции на Youtube, Google, в лице своего представителя (Matt Cutts), ясно дали ответ на этот вопрос. Ответ: нам без разницы какие теги вы используете (b/i или strong/em). Делайте хорошие сайты для людей, а потом уже думайте об таких мелочах.
Яндекс же не дает никаких комментариев, но везде советует использовать семантические теги по максимуму.
Так или иначе, Яндекс всегда «притормаживает» с копированием стандартов у гугл и/или их переработкой, так что в этой части можно и ограничится мнением американского собрата.
Выводы
В интернете полно советчиков, и еще больше людей, считающих, что их мнение единственно правильное.
Я не буду придерживаться какой то конкретной версии, я лишь скажу очевидное — тег <b> короче тега <strong> .
Если вы пишете код вручную, если вы вносите быстрые правки прямо через панель CMS, гораздо удобнее 5 раз прописать именно тег <b>.
Какая разница в конечном итоге, ведь отображение то одинаковое.
Да, и, пожалуй, я испытываю определенную ностальгическую привязанность к старым (но отлично работающим) тегам HTML, но это уже отношения к теме не имеет.:-)
axivan.com
Синтаксис
Описание
Элемент strong (от англ. «strong» ‒ «сильный, серьёзный») применяется для выделения текста особой важности, серьёзности или срочности. Hапример, для обозначения предупреждения, предостережения, уведомления и так далее.
кст, вложенный в данный элемент, браузеры отображают ‘полужирным шрифтом‘. Данный элемент может быть использован в заголовках (сайта, раздела, объекта, таблицы) и тексте для логического выделения очень важной части текста или заголовка, на которую пользователь должен обратить внимание в первую очередь. Уровень важности выделенного текста может меняться в зависимости от элементов родителей. Так, например, элемент
strong использованный внутри элемента h1 будет иметь большую важность, чем такой же элемент strong использованный в элементе h2 или где-нибудь в текстовой части документа.
Примечание
По логическому смыслу strong похож на элемент em, но в отличии от последнего strong является более важным элементов и его использование (повторение) в тексте должно быть менее частым (в крайних случаях) чем элемента em.
CSS
Визуальный эквивалент: font-weight: bold;.
Поддержка браузерами
Спецификация
Атрибуты
programmerbook.ru
Массовое использование тега <strong>
Практически каждый из вас, знает об этом теге и широко применяет его, для выделения ключевых слов по тексту или даже целых предложений. Также, его используют для выделения важных моментов, на которые автор статьи хочет обратить внимание. И все бы ничего, но в последнее время ПС настолько скрупулезно начали анализировать контент, что чрезмерное выделение слов именно этим тегом, может вызывать подозрение, и как следствие наложение серьезных санкций на ваш сайт.
Казалось бы, а что плохого в том, если я хочу обратить внимание своего читателя на важные моменты, которые описаны в статье. Для ответа на этот вопрос, предлагаю просто ознакомится с определением этого тега.
Другими словами, только самые важные элементы по тексту, необходимо выделять этим тегом. Есть даже определенное правило – не более 4-5 выделений по тексту статьи, в соотношении величины статьи 4000-5000 символов. Примерно 1 выделение на 1000 символов.
Если рассматривать мой блог в качестве примера, то вот какой принцип выделения текста был у меня ранее:
Как видите, я старался как можно более ключевых слов и их вариаций выделить тегом <strong>, а также использовал этот тег для выделения, на мой взгляд, важных моментов по тексту статьи. Бывали случаи, когда количество таких выделений доходило до 40-50 штук на статью размером 5000-6000 символов!
И если Яндекс, пока еще на это закрывает глаза, то поверьте мне что Google, может очень серьезно наказать ваш ресурс за излишний переспам. Что собственно говоря и произошло в случае с моим блогом. Здесь конечно, нельзя винить один только этот тег, но я думаю, что эта ошибка вместе с остальными и сыграла свою заключительную роль.
Естественно, на данный момент, я полностью устранил эту проблему, и теперь жду, когда Google переиндексирует полностью все страницы моего сайта и наконец-то присвоит блогу его заслуженные позиции.
А теперь, я приведу вам 3 способа, которые можно использовать, если у вас такая же проблемная ситуация, как была у меня ранее.
1) Использование тега <strong> в минимальном количестве на странице сайта. В среднем это значение должно соответствовать формуле 1 выделение на 1000 символов.
2) Вместо тега <strong> использовать тег <b>, который является элементом физической разметки и устанавливает жирный текст. Этим тегом, вы точно не навредите сайту! Но стоит отметить, что он является уже устаревшим и используется, как правило, на старых сайтах.
3) Вариант с использованием тега <span> который, я применяю у себя на блоге. После долгих раздумий, что же использовать на своем ресурсе, для выделения важных моментов, на которые я хочу обратить внимание своих читателей, было принято решение использования тега <span>, как абсолютно безопасного, и универсального тега.
Теперь для выделения нужного мне слова или словосочетания, я делаю вот такую вставку:
<span style="font-weight: bold;">нужное слово для выделения</span>
и визуально результат получается точно такой же, как и с применением тега <strong>.
Единственным отличием, является тот момент, что таких выделений по тексту, я могу делать сколько угодно и не переживать за переспам, ведь по сути устанавливаю только стиль для отдельного слова или словосочетания.
Вот и все, о чем я хотел рассказать в данной статье. Обязательно посмотрите на свои сайты друзья, со стороны и если подобная проблема у вас существует, то исправляйте ее.
Ну, а теперь давайте перейдем к приятным вещам, и я объявлю победителей ежемесячного конкурса комментаторов:
Поздравляю вас ребята и жду на свой e-mail, ваши R-кошельки и логины от хостинга AdminVPS (тот, кто получал бонус на хостинг, присылает только номер кошелька).
Для того, чтобы получить бонус на хостинг, регистрируйтесь в нем, строго по ссылке, приведенной выше. После регистрации открываете тикет в поддержке хостинга с просьбой зачислить вам бонус, как победителю (указываете свое призовое место) на блоге seofive.ru в ежемесячном конкурсе комментаторов.
Ну все, буду заканчивать. Всем пока!
www.seofive.ru
Выделение фрагментов текста. Теги strong и em.
Самым важным средством HTML применяющемся для выделения важных фрагментов текста является тег <STRONG>. Он выделяет текст полужирным шрифтом. Выделять текст полужирным шрифтом умеет также тег <b>. Хоть теги <strong> и <b> похожи по своему действию, но они не являются эквивалентными. Тег <b> является тегом физической разметки и просто устанавливает полужирное начертание текста. А <strong> является тегом логической разметки и отмечает важность выделенного текста. Тег <strong> имеет более важное значение при поисковой оптимизации сайта и его содержимое имеет больший вес для поисковиков.
Для курсивного выделения фрагментов текста применяются теги <i> и <em>. Содержимое этих тегов выводится под наклоном имитируя рукописный шрифт.
При разработке web-сайтов для выделения текста чаще применяются теги <strong> и <em>, чем теги <b> и <i>. Пример использования тегов <strong>, <b>, <em> и <i> для оформления текстов:
<p><strong>HTML</strong> (от англ. <em>HyperText Markup Language</em> — «язык разметки гипертекста»; произносится эйч-ти-эм-эл) — стандартный <i>язык разметки документов</i> во <b>Всемирной паутине</b>.</p>
И выглядит это так:
Применим теги <strong> и <em> на нашей страничке из предыдущих статей:
<h1>Сайт об автомобилях.</h1>
<p>Добро пожаловать на наш автомобильный сайт. Здесь Вы найдете много интересных и полезных статей об автомобилях, об их технических характеристиках и особенностях.</p>
<p>Научным языком <strong>автомобиль</strong> это:</p>
<p><em>Механическое моторное безрельсовое дорожное транспортное средство минимум с 4 колёсами</em>.</p>
<hr>
<h2>Классификация автомобилей</h2>
<p>Автомобили бывают следующих типов:</p>
<ul>
<li>Легковой;</li>
<li>Грузовой;</li>
<li>Внедорожник;</li>
<li>Багги;</li>
<li>Пикап;</li>
<li>Спортивный;</li>
<li>Гоночный.</li>
</ul>
Результат:
Кроме элементов <strong>, <b>, <em> и <i> в HTML имеется множество тегов для оформления текста html документа. Привожу краткий список таких тегов:
- <abbr> — Аббревиатура. по умолчанию в браузере отображается подчеркнутым;
- <acronym> — Акроним. В отличие от аббревиатуры обозначает устоявшееся сокращение. Отображается подчеркнутым;
- <cite> — небольшая цитата, отображается курсивом;
- <code> — фрагмент исходного кода программы, отображается моноширинным шрифтом;
- <del>— отмечает текст, удаленный из Web-страницы, отображается зачеркнутым;
- <dfn> — обозначает новый термин в документе, отображается курсивом;
- <ins> — используется для выделения текста, который был добавлен в новую версию документа, отображается подчеркнутым;
- <kbd> — применяется для выделения данных вводимых с клавиатуры, либо для названия клавиш, выводится моноширинным шрифтом;
- <q> — используется для выделения цитат, содержимое автоматически помещается в кавычки;
- <samp> — обозначает данные, выводимые какой-либо программой, отображается моноширинным шрифтом;
- <tt> — фактически тоже самое что и <samp>, только является тегом физической разметки, а <samp> — логической. отображается моноширинным шрифтом;
- <var> — выделение имени переменной в исходном коде программы, отображается курсивом.
И вот так они отображаются в браузере:
Разрыв строк
Как мы узнали из предыдущих статей, для перевода строк используются блочные элементы, в частности тег <p>, выделяющий абзац.
Давайте поместим на нашу web-страницу сведения об авторских правах:
<p>Все права защищены. 2013 год.</p>
<p>Сайт об автомобилях.</p>
Результат:
И как мы видим строки разделены слишком большим расстоянием, как-будто они не имеют друг к другу никакого отношения. В этом случае для разрыва строк лучше использовать тег <br>. Этот тег устанавливает перенос строки, но в отличие от тега <p>, не устанавливает отступ перед строкой. Применим тег <br> на нашей страничке:
<p>Все права защищены. 2013 год.<br>Сайт об автомобилях.</p>
Так гораздо лучше:
Поэтому в некоторых случаях при оформлении текста html страницы не забывайте про тег <br>.
Вставка специальных символов. Литералы.
Иногда на web-страницу требуется вставить какой-нибудь специальный символ, например такие символы: <, >, ©. Для вставки специальных символов в HTML используются литералы. Литерал — это последовательность символов, которая начинается с символа & и заканчивается символом ;, а между ними помещается последовательность букв — код символа. Так для вставки символов <, >, © используются соответственно следующие литералы: <, &rt; и ©.
Вставим на нашу страницу в блок об авторских правах символ ©:
<p>Все права защищены. © 2013 год.<br>Сайт об автомобилях.</p>
Теперь страничка выглядит совсем круто:
Ниже привожу названия наиболее часто используемых символов:
Особое место среди этих символов занимает «неразрывный пробел». Если необходимо чтоб в каком-то месте строки текста перенос не выполнялся, то вставляете туда «неразрывный пробел». Кроме литерала «неразрывный пробел» для запрета переноса строк можно использовать парный тег <nobr>. Тег nobr уведомляет браузер о том, что отображать текст следует без переносов. Правда применение этого тега может привести к появлению в окне браузера горизонтальной полосы прокрутки и пользователю придется прокручивать текст по горизонтали, чтобы увидеть его полностью, что очень не удобно. И еще этот тег не входит в спецификацию HTML, что приводит к не валидному коду. По этому советую применять этот тег только в крайних случаях при оформлении текста html страницы.
HTML также позволяет вставлять любой символ, поддерживаемый кодировкой Unicode. Для этого используется литерал со следующей структурой: &#<код символа>;. Узнать код нужного символа можно либо в Интернете, либо можно воспользоваться утилитой «Таблица символов», поставляемая в составе Windows. Запустить ее можно так: «Пуск->Все Программы->Стандартные->Служебные->Таблица символов» или нажать WIN+R и набрать в окне выполнить charmap. Появится окно «Таблица символов».
Если в списке символов выделить символ, который нельзя ввести с клавиатуры, в строке статуса с левой стороны появится надпись вида «Клавиша: Alt+<код символа>». Берете это код символа и вставляете в литерал. Для примера вставим символ © в нашу страницу с помощью кода символа. Выделяем этот символ в «Таблице символов» и в статусной строке с левой стороны видим надпись «Клавиша: Alt+0169». Берем код «0169» и в нашей web-странице вместо литерала © вставляем ©:
<p>Все права защищены. © 2013 год.<br>Сайт об автомобилях.</p>
И убеждаемся, что на странице отображается все правильно.
На сегодня у меня все. Как всегда подведу итоги:
В следующей статье я расскажу как вставлять картинки на страницу, поэтому советую подписаться на обновления моего блога!)))
webcodius.ru