Css strong: — элемент выделения важного текста — HTML

Разное 

— элемент выделения важного текста — HTML

Элемент сильной значимости (<strong>) указывает на то, что его содержание имеет большое значение, серьёзность или срочность. Браузеры обычно отображают содержимое жирным шрифтом.

Категории контентаПотоковой контент, Фразовый контент, явный контент.
Допустимый контентФразовый контент.
Опускание теговНет, должен иметь как начальный тег, так и конечный тег.
Допустимые родителиЛюбой элемент, который принимает фразовый контент, или любой другой элемент, который принимает потоковой контент.
Допустимые ARIA-ролиЛюбые
DOM-интерфейсHTMLElement

Этот элемент включает в себя глобальные атрибуты.

Элемент <strong> предназначен для контента, который имеет «большое значение», включая вещи большой серьёзности или срочности (например, предупреждения).

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

Обычно этот элемент отображается по умолчанию с использованием жирного шрифта. Однако, он не должен быть использован просто для применения жирного стиля; используйте свойство CSS font-weight для этой цели. Используйте элемент <b>, чтобы привлечь внимание к определённому тексту без указания более высокого уровня важности. Используйте элемент

<em> element для выделения текста, который имеет выраженный акцент.

Другим приемлемым использованием для <strong> является обозначение ярлыков абзацев, которые представляют заметки или предупреждения в тексте страницы.

<b> против <strong>

Это часто путает новых разработчиков, почему существует так много способов выразить одно и то же на представленном веб-сайте. <b> и <strong> возможно, является одним из наиболее распространённых источников путаницы, заставляя разработчиков задавать себе вопрос: «Должен ли я использовать <b> или <strong>? Разве они не делают одно и тоже?»

Не совсем. Элемент <strong> для контента, который имеет большее значение, в то время как элемент <b> используется для привлечения внимания к тексту, не указывая на то, что это более важно.

Это может помочь понять, что оба являются правильным и семантическими элементами в HTML5, и это совпадение, что оба они имеют одинаковый стиль (полужирный) в большинстве браузеров (хотя некоторые старые браузеры фактически подчёркивают <strong>). Каждый элемент предназначен для использования в определённых типах сценариев, и если вы хотите жирный шрифт просто для украшения, вместо этого вы должные использовать свойства CSS font-weight.

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

<em> против <strong>

Добавление к путанице заключается в том, что, хотя HTML 4 определяет <strong> как просто указывающий на более сильный акцент, HTML 5 определяет <strong> как представляющий «большое значение для его содержимого». Это важное различие.

В то время, как <em> используется для изменения значения предложения, поскольку делается устный акцент («Я люблю морковь» против «Я люблюморковь«), <strong> используется, для придания предложению порции особого значения (например, «Предупреждение! Это очень опасно.«) Оба элемента <strong> и <em> могут быть вложены для увеличения относительной степени важности или усиленного акцента, соответственно.

Основной пример

<p>Прежде чем продолжить, <strong>убедитесь, что вы надели защитные очки</strong>.</p>

Результат:

Маркировочные предупреждения

<p><strong>Важно:</strong> прежде чем продолжить, убедитесь, что вы добавили много масла.</p>

Это приведёт к:

Specification
HTML Standard
# the-strong-element

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

  • Элемент <b>
  • Элемент <em>
  • Элемент font-weight

Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.
Want to get more involved?

Learn how to contribute.

This page was last modified on by MDN contributors.

HTML/Элемент strong

Синтаксис

(X)HTML

<strong> ... </strong>

Описание

Элемент strong (от англ. «strong» ‒ «сильный, серьёзный») применяется для выделения текста особой важности, серьёзности или срочности. Hапример, для обозначения предупреждения, предостережения, уведомления и так далее. Текст, вложенный в данный элемент, браузеры отображают ‘полужирным шрифтом‘. Данный элемент может быть использован в заголовках (сайта, раздела, объекта, таблицы) и тексте для логического выделения очень важной части текста или заголовка, на которую пользователь должен обратить внимание в первую очередь. Уровень важности выделенного текста может меняться в зависимости от элементов родителей. Так, например, элемент

strong использованный внутри элемента h2 будет иметь большую важность, чем такой же элемент strong использованный в элементе h3 или где-нибудь в текстовой части документа.

Примечание

По логическому смыслу

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

CSS

Визуальный эквивалент: font-weight: bold;.

Поддержка браузерами

Chrome

Поддерж.

Firefox

Поддерж.

Opera

Поддерж.

Maxthon

Поддерж.

IExplorer

Поддерж.

Safari

Поддерж.

iOS

Поддерж.

Android

Поддерж.

Спецификация

Верс.
Раздел
HTML
2.0Strong Emphasis: STRONGПеревод
3. 2Phrase Elements
4.019.2.1 Phrase elements: EM, STRONG, DFN, CODE, SAMP, KBD, VAR, CITE, ABBR, and ACRONYM
DTD: Transitional Strict Frameset
5.0
4.5.3 The strong element
5.14.5.3. The strong element
XHTML
1.0Extensible HyperText Markup Language
DTD: Transitional Strict Frameset
1.1Extensible HyperText Markup Language

Атрибуты

Глобальные атрибуты
accesskey, class, contenteditable, contextmenu, data-*, dir, draggable, dropzone, hidden, id, inert, lang, spellcheck, style, tabindex, title, translate, xml:lang

Пример использования

Листинг кода

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Элемент strong</title>
<style type=»text/css»>. warning { color: red; }</style>
</head>
<body>
<h2>Пример использования элемента «strong»</h2>
<h3>Раздел 1: <strong>»Копирование»</strong></h3>
<p><strong>Внимание</strong> копирование текста расположенного на данной странице на <span>любые носители информации</span>, а так же его печать <em>запрещены</em>.</p>

<p><strong>К носителям информации относятся:</strong> компьютеры, телефоны, планшеты, жесткие диски, flash-накопители, CD/DVD диски, дискеты, магнитные ленты, а так же <em>любые устройства способные запоминать/копировать и воспроизводить указанную информацию</em>.</p>
</body>
</html>

Элемент strong

: Элемент Strong Importance — HTML: Язык гипертекстовой разметки

HTML-элемент указывает, что его содержимое имеет большую важность, серьезность или срочность. Браузеры обычно отображают содержимое жирным шрифтом.

Этот элемент включает только глобальные атрибуты.

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

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

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

vs.

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

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

Это может помочь понять, что оба являются действительными и семантическими элементами в HTML и что это совпадение, что они оба имеют одинаковый стиль по умолчанию (жирный шрифт) в большинстве браузеров (хотя некоторые старые браузеры фактически подчеркивают ). Каждый элемент предназначен для использования в определенных типах сценариев, и если вы хотите выделить текст жирным шрифтом для украшения, вместо этого вам следует использовать CSS 9. 0004 свойство font-weight .

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

против

Путаницу усугубляет тот факт, что в то время как HTML 4 определяет как указание на более сильное выделение, HTML 5 определяет как представляющий «большую важность для его содержание». Это важное различие.

В то время как используется для изменения смысла предложения, как это делает ударение в речи («Я люблю морковей» против «Я люблю морковей »), используется для порций предложения с добавленной важностью (например, « Предупреждение! Это очень опасно. «). И , и могут быть вложены друг в друга для увеличения относительной степени важности или ударения соответственно.

Базовый пример 

 

  Прежде чем продолжить, наденьте защитные очки
 
.
Результат

Маркировка предупреждений 

 

  Важно! Прежде чем продолжить, убедитесь, что вы добавили достаточно
  масло.
Результат
Категории контента Потоковое содержание, фразовое содержание, ощутимое содержание.
Разрешенный контент Фразы контента.
Отсутствие тега Нет; должен иметь как начальный тег, так и конечный тег.
Разрешенные родители Любой элемент, принимающий фразовое содержание или любой элемент, который принимает потоковое содержание.
Неявная роль ARIA Нет соответствующей роли
Разрешенные роли ARIA Любой
Интерфейс DOM HTMLЭлемент
901 38
Спецификация
Стандарт HTML
# the-strong-element

Таблицы BCD загружаются только в браузере с включенным JavaScript.

Включите JavaScript для просмотра данных.

  • Элемент
  • Элемент
  • Свойство font-weight

Обнаружили проблему с содержанием этой страницы?

  • Отредактируйте страницу на GitHub.
  • Сообщить о проблеме с содержимым.
  • Посмотреть исходный код на GitHub.
Хотите принять участие?

Узнайте, как внести свой вклад.

Последний раз эта страница была изменена участниками MDN.

HTML: тег

В этом руководстве по HTML объясняется, как использовать элемент HTML, называемый тегом , с синтаксисом и примерами.

Описание

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

Синтаксис

В HTML синтаксис тега :

 

Выделенный текст идет здесь, но не здесь

Пример вывода

Атрибуты

К тегу применяются только глобальные атрибуты. Нет атрибутов, специфичных для тега .

Примечание

  • HTML-элемент находится внутри тега.
  • Тег используется для отделения текста от остального содержимого. Браузеры традиционно выделяют жирным шрифтом текст внутри тега . Вы можете изменить это поведение с помощью CSS.

Совместимость с браузерами

Тег имеет базовую поддержку со следующими браузерами:

  • Chrome
  • Андроид
  • Firefox (Геккон)
  • Firefox Mobile (Геккон)
  • Internet Explorer (IE)
  • Пограничный мобильный телефон
  • Опера
  • Опера Мобайл
  • Сафари (веб-кит)
  • Мобильный сафари

Пример

Мы обсудим тег ниже, исследуя примеры использования тега в HTML5, HTML 4.01 Transitional, XHTML 1.0 Transitional, XHTML 1.0 Strict и XHTML 1.1.

  • HTML5
  • HTML4
  • XHTML

Документ HTML5

Если вы создали новую веб-страницу в HTML5, ваш тег может выглядеть так:

 

<голова>
<мета-кодировка="UTF-8">
Пример HTML5 от www.<img class="lazy lazy-hidden" loading='lazy' src="//art-nto.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/2.bp.blogspot.com/-dWjz9lE-X7A/VIrJOTvygzI/AAAAAAAAA2U/SR1gCRrd3Vo/s1600/situs+belajar+pemrograman+coding.jpg' /><noscript><img loading='lazy' src='/800/600/https/2.bp.blogspot.com/-dWjz9lE-X7A/VIrJOTvygzI/AAAAAAAAA2U/SR1gCRrd3Vo/s1600/situs+belajar+pemrograman+coding.jpg' /></noscript> techonthenet.com

<тело>
 
Заголовок 1
 

Мы хотим выделить этот текст.

В этом примере документа HTML5 мы создали тег , заключающий в себе текст «этот текст». Ваш браузер по умолчанию будет отображать «этот текст» жирным шрифтом. Вы можете перезаписать это поведение с помощью CSS.

HTML 4.01 Transitional Document

Если вы создали новую веб-страницу в HTML 4.01 Transitional, ваш тег может выглядеть следующим образом:

 

<голова>

Переходный пример HTML 4.01 от www.techonthenet.com

<тело>
 
Заголовок 1
 

Мы хотим выделить этот текст.

В этом примере переходного документа HTML 4.01 мы создали тег , заключающий в себе текст «этот текст». Ваш браузер по умолчанию будет отображать «этот текст» жирным шрифтом. Вы можете перезаписать это поведение с помощью CSS.

Документ XHTML 1.0 Transitional

Если вы создали новую веб-страницу в XHTML 1.0 Transitional, ваш тег может выглядеть следующим образом:

 

<голова>

Переходный пример XHMTL 1.0 от www.techonthenet.com

<тело>
 
Заголовок 1
 

Мы хотим выделить этот текст.

В этом примере переходного документа XHTML 1.0 мы создали тег , заключающий в себе текст «этот текст». Ваш браузер по умолчанию будет отображать «этот текст» жирным шрифтом. Вы можете перезаписать это поведение с помощью CSS.

XHTML 1.0 Strict Document

Если вы создали новую веб-страницу в XHTML 1. 0 Strict, ваш тег может выглядеть так:

 

<голова>

Строгий пример XHTML 1.0 от www.techonthenet.com

<тело>
 
Заголовок 1
 

Мы хотим выделить этот текст.

В этом примере XHTML 1.0 Strict Document мы создали тег , заключающий в себе текст «этот текст». Ваш браузер по умолчанию будет отображать «этот текст» жирным шрифтом. Вы можете перезаписать это поведение с помощью CSS.

Документ XHTML 1.1

Если вы создали новую веб-страницу в XHTML 1.1, ваш тег может выглядеть следующим образом:

   <голова>Пример XHTML 1.<img class="lazy lazy-hidden" loading='lazy' src="//art-nto.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/domhtml.ru/wp-content/uploads/2020/03/STRONG_%D1%82%D0%B5%D0%B3_%D0%BF%D1%80%D0%B8%D0%BC%D0%B5%D1%80-1024x384.png' /><noscript><img loading='lazy' src='/800/600/https/domhtml.ru/wp-content/uploads/2020/03/STRONG_%D1%82%D0%B5%D0%B3_%D0%BF%D1%80%D0%B8%D0%BC%D0%B5%D1%80-1024x384.png' /></noscript><div class='yarpp-related yarpp-related-none'><p>No related posts.</p></div></div></article><div class="sparkle-author-box"><div class="sparkle-author-image"> <img alt='' src="//art-nto.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='https://secure.gravatar.com/avatar/28885a98486f3753fb07ad1bbcbbbd1d?s=260&d=mm&r=g' data-srcset='https://secure.gravatar.com/avatar/28885a98486f3753fb07ad1bbcbbbd1d?s=520&d=mm&r=g 2x' class='lazy lazy-hidden avatar avatar-260 photo' height='260' width='260' /><noscript><img alt='' src='https://secure.gravatar.com/avatar/28885a98486f3753fb07ad1bbcbbbd1d?s=260&d=mm&r=g' class='avatar avatar-260 photo' height='260' width='260' /></noscript></div><div class="sparkle-author-details"> <span class="author-name"> <a href="https://art-nto.ru/author/alexxlab" title="Записи alexxlab" rel="author">alexxlab</a> </span> <span class="author-designation"> Автор записи </span><div class="author-desc"></div></div></div><nav class="navigation post-navigation"><div class="nav-links"><div class="nav-previous"><a href="https://art-nto.ru/raznoe/frilans-zadaniya-sajt-frilanserov-i-birzha-udalennoj-raboty-v-internete.html" rel="prev">Фриланс задания: сайт фрилансеров и биржа удаленной работы в интернете</a></div><div class="nav-next"><a href="https://art-nto.ru/raznoe/osen-tsvety-na-rabochij-stol-oboi-na-rabochij-stol-osennie-tsvety.html" rel="next">Осень цветы на рабочий стол: Обои на рабочий стол осенние цветы</a></div></div></nav><div id="comments" class="comments-area"><div id="respond" class="comment-respond"><h3 id="reply-title" class="comment-reply-title">Добавить комментарий <small><a rel="nofollow" id="cancel-comment-reply-link" href="/raznoe/css-strong-element-vydeleniya-vazhnogo-teksta-html.html#respond" style="display:none;">Отменить ответ</a></small></h3><form action="https://art-nto.ru/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate><p class="comment-notes"><span id="email-notes">Ваш адрес email не будет опубликован.</span> <span class="required-field-message">Обязательные поля помечены <span class="required">*</span></span></p><p class="comment-form-comment"><label for="comment">Комментарий <span class="required">*</span></label><textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required></textarea></p><p class="comment-form-author"><label for="author">Имя <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" autocomplete="name" required /></p><p class="comment-form-email"><label for="email">Email <span class="required">*</span></label> <input id="email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-notes" autocomplete="email" required /></p><p class="comment-form-url"><label for="url">Сайт</label> <input id="url" name="url" type="url" value="" size="30" maxlength="200" autocomplete="url" /></p><p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Отправить комментарий" /> <input type='hidden' name='comment_post_ID' value='86638' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /></p></form></div></div></main></div><section id="secondaryright" class="home-right-sidebar widget-area" role="complementary"><aside id="search-2" class="widget clearfix widget_search"><form role="search" method="get" class="search-form" action="https://art-nto.ru/"> <label> <span class="screen-reader-text">Найти:</span> <input type="search" class="search-field" placeholder="Поиск…" value="" name="s" /> </label> <input type="submit" class="search-submit" value="Поиск" /></form></aside><aside id="categories-3" class="widget clearfix widget_categories"><h2 class="widget-title"><span>Рубрики</span></h2><ul><li class="cat-item cat-item-9"><a href="https://art-nto.ru/category/vektor">Вектор</a></li><li class="cat-item cat-item-5"><a href="https://art-nto.ru/category/dizajn">Дизайн</a></li><li class="cat-item cat-item-10"><a href="https://art-nto.ru/category/maket">Макет</a></li><li class="cat-item cat-item-7"><a href="https://art-nto.ru/category/programm">Программ</a></li><li class="cat-item cat-item-3"><a href="https://art-nto.ru/category/raznoe">Разное</a></li><li class="cat-item cat-item-6"><a href="https://art-nto.ru/category/sajt">Сайт</a></li><li class="cat-item cat-item-1"><a href="https://art-nto.ru/category/sovety">Советы</a></li><li class="cat-item cat-item-8"><a href="https://art-nto.ru/category/urok">Урок</a></li><li class="cat-item cat-item-4"><a href="https://art-nto.ru/category/shrift">Шрифт</a></li></ul></aside></section></div></div></div><footer id="colophon" class="site-footer" itemscope="itemscope" itemtype="http://schema.org/WPFooter"><div class="footer-social"><div class="sparkle-wrapper"></div></div><div class="copyright-footer"><div class="sparkle-wrapper"><div class="footer_text"><div id="c_copyright"><p>© 2019. <a href="http://art-nto.ru/" title="Независимое театральное объединение "Зрительские симпатии"">Независимое театральное объединение "Зрительские симпатии"</a></p><p class="text">Все права защищены и охраняются законом Российской Федерации об Авторском праве. Копирование материала разрешено только с использованием ссылки на Art-Nto.ru</p><p><a href="/sitemap.xml" class="c_sitemap">Карта сайта</a></p></div></div></div></div><div class="scroll-to-top"> <i class="icofont fa fa-angle-up"></i></div></footer></div> <noscript><style>.lazyload{display:none}</style></noscript><script data-noptimize="1">window.lazySizesConfig=window.lazySizesConfig||{};window.lazySizesConfig.loadMode=1;</script><script async data-noptimize="1" src='https://art-nto.ru/wp-content/plugins/autoptimize/classes/external/js/lazysizes.min.js'></script> <!-- noptimize -->
<style>iframe,object{width:100%;height:480px}img{max-width:100%}</style><script>new Image().src="//counter.yadro.ru/hit?r"+escape(document.referrer)+((typeof(screen)=="undefined")?"":";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+";"+Math.random();</script>
<!-- /noptimize --> <script defer src="https://art-nto.ru/wp-content/cache/autoptimize/js/autoptimize_3ad86f8a0143935d65b651aab6d91036.js"></script></body></html>