Правильное использование сильного элемента в HTML (плюс пример кода) »

В тегах HTML

Раскрытие информации: Ваша поддержка помогает сайту работать! Мы зарабатываем комиссионные за некоторые услуги, которые мы рекомендуем на этой странице. Узнайте больше

Элемент
Узнайте, как шрифты и веб-типографика работают в HTML: руководство для начинающих
Что делает Правильное использование сильного элемента в HTML (плюс пример кода) ?
Элемент используется для обозначения текста, который имеет большее значение, чем окружающий текст. По умолчанию все браузеры отображают текст полужирным шрифтом.
Дисплей
встроенный
Использование
семантический

Пример кода

 

Глава 1: Правильное использование сильного элемента

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

Глава 1: Правильное использование сильного элемента

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

Внимание!

Вот что такое элемент . Используйте его, и вы фактически скажете:

«Посмотрите сюда! Эти слова важнее окружающих слов. Так что внимание!»

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

 

Примечание. Не используйте <strong> просто сделать слово жирным. Вместо этого используйте тег <b> тег или тег <span> элемент и CSS, чтобы сделать шрифт полужирным.

Используйте <strong> для обозначения важности, срочности или серьезности.

Давайте посмотрим, как это выглядит при отображении в браузере:

Примечание: Не используйте только для того, чтобы сделать слово жирным . Вместо этого используйте тег или элемент и CSS, чтобы сделать шрифт полужирным. Используйте , чтобы подчеркнуть важность, срочность или серьезность.

.bold{font-weight: полужирный;}

This Word is

So Serious

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

 

Опасно: плавание в этом районе ограничено. Не заходить в воду.

Давайте посмотрим, что ваш браузер делает с вложенными тегами :

Опасно: купание в этом месте запрещено. Не заходить в воду.

Адам Вуд

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

Search HTML.com

Search for:

Most Popular

  • Тег HTML
  • Тег HTML Body: Master The Most Important HTML Element Now
  • Тег HTML</li><li> Элемент HTML P: вот код Определение текста абзаца</li><li><meta> Тег HTML</li></ul><h2><span class="ez-toc-section" id="_CSS_HTML_CSS_SitePoint"> Отображение в строке CSS: полужирный шрифт — HTML и CSS — Форумы SitePoint </span></h2><p data-readability-styled="true"> qaz216 <time itemprop="datePublished" datetime="2009-11-02T20:40:20Z"> 2 ноября 2009 г.<img loading="lazy" src="/800/600/http/fuzeservers.ru/wp-content/uploads/e/f/9/ef919947ad1c95201bcc6a8908bdf6db.jpeg"><noscript><img loading='lazy' src='/800/600/http/fuzeservers.ru/wp-content/uploads/e/f/9/ef919947ad1c95201bcc6a8908bdf6db.jpeg' /></noscript> , 20:40 </time></p><p data-readability-styled="true"> 1</p><p> Новичок в CSS, и у меня может быть глупый вопрос.</p><p> С точки зрения дизайна, должен ли я использовать полужирные теги HTML (например: <b><center><ins class="adsbygoogle" style="display:inline-block;width:580px;height:400px" data-ad-client="ca-pub-5948177564140711" data-ad-slot="9081085738"></ins> <script>(adsbygoogle=window.adsbygoogle||[]).push({});</script></center>жирный текст здесь</b>) или использовать CSS для встроенной разметки?</p><p> Пример …</p><p> HTML: <br/> Давайте использовать тег HTML <b>BOLD</b>.</p><p> CSS: <br/> Давайте воспользуемся CSS, чтобы сделать <span class="boldStmt">ЖИРНЫМ шрифтом</span>.</p><p> .boldStmt { <br/> вес шрифта: полужирный; <br/> }</p><p> Спасибо!</p><p data-readability-styled="true"> Кохутек <time itemprop="datePublished" datetime="2009-11-02T21:07:36Z"> 2 ноября 2009 г., 21:07 </time></p><p data-readability-styled="true"> 2</p><p> Я не использовал ни того, ни другого. Вы можете использовать <em>, чтобы выделить слово или фразу, или <strong><div class="advv"> <ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-5948177564140711" data-ad-slot="7683656859"></ins> <script>(adsbygoogle=window.adsbygoogle||[]).push({});</script> </div>, чтобы сделать акцент еще сильнее.</p><p> С помощью CSS вы можете соответствующим образом оформить HTML-элементы.<img loading="lazy" src="/800/600/http/lamvt.vn/wp-content/uploads/2017/04/css-la-gi.jpg"><noscript><img loading='lazy' src='/800/600/http/lamvt.vn/wp-content/uploads/2017/04/css-la-gi.jpg' /></noscript></p><p> Пример:</p><pre> эм { вес шрифта: полужирный; стиль шрифта: обычный; цвет синий; } сильный { вес шрифта: полужирный; /* не требуется, так как в браузерах есть уже установил вес шрифта по умолчанию жирным шрифтом. Это просто для демонстрации. */ черный цвет; } </pre><p data-readability-styled="true"> газ216 <time itemprop="datePublished" datetime="2009-11-02T21:11:26Z"> 2 ноября 2009 г., 21:11 </time><center><ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-5948177564140711" data-ad-slot="2646898692"></ins> <script>(adsbygoogle=window.adsbygoogle||[]).push({});</script></center></p><p data-readability-styled="true"> 3</p><p> Спасибо!</p><p data-readability-styled="true"> Кохутек <time itemprop="datePublished" datetime="2009-11-02T21:14:11Z"> 2 ноября 2009 г., 21:14 </time></p><p data-readability-styled="true"> 4</p><p> Да, вы используете CSS для оформления HTML-элементов по своему усмотрению. <br/> Если у вас есть один общий стиль для элементов <strong> и один общий стиль для элементов <em>, вам не нужно добавлять класс или идентификатор.<img loading="lazy" src="/800/600/http/i.ytimg.com/vi/0i1lg5rTvfo/hqdefault.jpg"><noscript><img loading='lazy' src='/800/600/http/i.ytimg.com/vi/0i1lg5rTvfo/hqdefault.jpg' /></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 loading="lazy" src="https://secure.gravatar.com/avatar/28885a98486f3753fb07ad1bbcbbbd1d?s=260&d=mm&r=g"><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/prezentacziya-na-chem-delaetsya-kak-sozdat-prezentacziyu-pravila-sozdaniya-effektivnyh-prezentaczij.html" rel="prev">Презентация на чем делается: Как создать презентацию: правила создания эффективных презентаций</a></div><div class="nav-next"><a href="https://art-nto.ru/raznoe/fotoshop-dlya-fotografov-adobe-photoshop-dlya-fotografov-photoplay.html" rel="next">Фотошоп для фотографов: Adobe Photoshop для фотографов | Photoplay</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/style-bold-html-how-to-make-text-bold-in-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='69464' 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><script src="/cdn-cgi/scripts/7d0fa10a/cloudflare-static/rocket-loader.min.js" data-cf-settings="5ad5f89760478cf08822dce4-|49" defer></script><script src="/cdn-cgi/scripts/7d0fa10a/cloudflare-static/rocket-loader.min.js" data-cf-settings="98a0cc341777d737c0bf5215-|49" defer></script>