Главная » Языки программирования

Пример выделения жирным текста и шрифта в HTML

Содержание
  1. 6. HTML – Форматирование текста с помощью html-тегов
  2. Полужирный или жирный текст
  3. Пример
  4. Подчеркнутый текст
  5. Пример
  6. Моноширинный шрифт
  7. Пример
  8. Нижний индекс
  9. Пример
  10. Удаленный текст
  11. Пример
  12. Маленький текст
  13. Пример
  14. Текст скрыт при загрузке страницы
  15. Текст скрыт при загрузке страницы
  16. Цвет текста
  17. Выделение текста цвета
  18. Как сделать жирный шрифт в HTML?
  19. Как сделать полужирный шрифт при помощи CSS-свойства font-weight
  20. Как сделать текст полужирным — какой метод уместнее?
  21. Комбинируем выделение текста с помощью CSS и HTML
  22. : The Bring Attention To element
  23. Try it
  24. Attributes
  25. Usage notes
  26. Examples
  27. Result
  28. Technical summary
  29. Specifications
  30. Browser compatibility
  31. See also
  32. Found a content problem with this page?
  33. MDN
  34. Support
  35. Our communities
  36. Developers

6. HTML – Форматирование текста с помощью html-тегов

Если Вы пользуйтесь текстовым редактором, например, таким как Microsoft Word или Microsoft Excel, то Вы должны быть знакомы с форматированием текста и как сделать текст жирным (полужирным), наклонным (курсивом), зачеркнутым или подчеркнутым. Это всего лишь четыре из одиннадцати доступных вариантов, указывающих, как можно форматировать текст в HTML и XHTML.

Полужирный или жирный текст

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

Пример

     
С помощью тега b делаем жирный шрифт.
 
С помощью тега strong делаем текст жирным.

Получим следующий результат:

Пример выделения жирным текста и шрифта в HTML, жирный шрифт, жирный текст, <b data-lazy-src=

Пример

    
С помощью тега i делаем наклонный текст или шрифт.
 
С помощью тега em делаем текст курсивом.

Получим следующий результат:

Подчеркнутый текст

Подчеркнуть текст в HTML можно с помощь тега . . Все, что находится внутри тега . отображается в HTML подчеркнутым текстом (шрифтом), как показано ниже:

Пример

     
С помощью тега u делаем подчеркнутый текст или слово.

Получим следующий результат:

Пример подчеркивания текста в HTML, подчеркнутый шрифт, подчеркнутый текст, <u data-lazy-src=

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

Пример

     
С помощью тега tt делаем моноширинный шрифт.

Получим следующий результат:

Пример моноширинного шрифта в HTML, моноширинный шрифт, <tt data-lazy-src=

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

Пример

     
С помощью тега sub делаем нижнийиндекс.

Получим следующий результат:

Пример нижнего индекса в HTML, нижний индекс, <sub data-lazy-src=

Содержимое внутри тега . отображается в HTML как удаленный текст.

Пример

     
Хочу зарабатывать много очень много денег.

Получим следующий результат:

Пример удаленного текста в HTML, удаленный текст, <del data-lazy-src=

Содержимое внутри тега . отображается в HTML маленьким текстом, на один размер шрифта меньше, чем остальная часть окружающего его текста, как показано ниже:

Пример

     
С помощью тега small делаем текст меньше.

Получим следующий результат:

Пример маленького текста в HTML, маленький текст, <small data-lazy-src=

Название статьи

Содержимое страницы.

Получим следующий результат:

тега span.

Получим следующий результат:

Пример группировки элементов и текста в HTML, тег span, <span data-lazy-src=

Скрытый текст тег —

Создание нижних и верхних индексов

Рассмотрим несколько примеров с использование этого тега при написание html – страниц с подключением стилей css .

Текст скрыт при загрузке страницы

  lang="ru"> meta charset="utf-8"> meta name="viewport" content="width=device-width, initial-scale=1"> Скрытый текст type="text/css"> @media screen and (max-width: 767px) < body < max-width: 767px; height: auto; > > h1 < color: blue; > details< width: 400px; font-size: 1.2em; > Текст скрыт при загрузке страницы 
 
Развернуть или свернуть текст Скрытый текст

Текст скрыт при загрузке страницы

Текст скрыт при загрузке страницы

Текст открыт при загрузке страницы

Тег details в рамке

Добавление своих значков

Цвет текста

Тег – парный тег , в отличие от тега отличается тем , что тег является блочным тегом , а помощью тега можно выделить одно слово в тексте или несколько слов :

Выделение текста цвета

  lang="ru"> meta charset="utf-8"> meta name="viewport" content="width=device-width, initial-scale=1"> Выделение текста цвета type="text/css"> @media screen and (max-width: 767px) < body < max-width: 767px; height: auto; > > h1 < color: blue; > p < font-size: 1.2em; /*Размер шрифта*/ > span < /*Стиль для всех элементов SPAN */ font-size: 13pt; /* Размер шрифта */ color: blue; /*Цвет шрифта */ font-family: "Arial"; /* Название шрифта */ font-weight: bold; /*Жирность шрифта */ > .text-color < /* Стиль для класса .text-color*/ font: 1em Georgia, Times, serif; /*Размер, Название шрифта */ color: #c80404; /*Цвет шрифта */ font-weight: bold; /*Жирность шрифта */ > Цвет текста С помощью элемента SPAN можно выделить важное  style="color: green">слово внутри абзаца . Можно выделить одно  class="text-color">слово в тексте или  class="text-color">несколько слов .

Источник

Как сделать жирный шрифт в HTML?

В этой статье представлены способы, позволяющие использовать полужирный шрифт в HTML.

Как сделать полужирный шрифт при помощи CSS-свойства font-weight

Не знаете как сделать текст жирным в CSS? CSS предоставляет нам специальное свойство font-weight , которое позволяет вывести полужирное начертание CSS.

Давайте взглянем на следующий пример:

Пример полужирного текста при помощи CSS.
 
. а также полужирного выделения всего абзаца.

Пример полужирного текста при помощи CSS.
… а также полужирного выделения всего абзаца .

С помощью этого свойства также можно указывать плотность текста. К тому же вы сможете определять текст, который не требуется выделять.

В приведенном выше примере используются встроенные стили. Но я настоятельно рекомендую вам использовать внешние файлы и CSS -классы, так как это поможет применять единую стилизацию ко всем страницам сайта одновременно.

Делаем текст полужирным используя тег жирного шрифта в html

Большинство людей, знакомых с языком гипертекста, когда видят жирный шрифт HTML, сразу же вспоминают о теге .

Давайте рассмотрим пример того как выделить текст жирным в HTML при помощи тега :

Пример полужирного текста при помощи HTML-тега.
 
. а также полужирного выделения всего абзаца.

Пример полужирного текста при помощи HTML-тега.
. а также полужирного выделения всего абзаца .

HTML-тег — самый быстрый способ вывести текст полужирным.

Как сделать текст полужирным — какой метод уместнее?

HTML предлагает несколько способов выделения текста. И у каждого тега конкретное предназначение.

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

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

Комбинируем выделение текста с помощью CSS и HTML

Будет лучше всего, если вы научитесь комбинировать HTML шрифты и CSS-методы выделения текста в HTML-документах .

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

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

Валентин Сейидов автор-переводчик статьи « HTML Bold »

Источник

: The Bring Attention To element

The HTML element is used to draw the reader’s attention to the element’s contents, which are not otherwise granted special importance. This was formerly known as the Boldface element, and most browsers still draw the text in boldface. However, you should not use for styling text or granting importance. If you wish to create boldface text, you should use the CSS font-weight property. If you wish to indicate an element is of special importance, you should use the element.

Try it

Attributes

This element only includes the global attributes.

Usage notes

  • Use the for cases like keywords in a summary, product names in a review, or other spans of text whose typical presentation would be boldfaced (but not including any special importance).
  • Do not confuse the element with the , , or elements. The element represents text of certain importance, puts some emphasis on the text and the element represents text of certain relevance. The element doesn’t convey such special semantic information; use it only when no others fit.
  • Similarly, do not mark titles and headings using the element. For this purpose, use the h1 to h6 tags. Further, stylesheets can change the default style of these elements, with the result that they are not necessarily displayed in bold.
  • It is a good practice to use the class attribute on the element in order to convey additional semantic information as needed (for example for the first sentence in a paragraph). This makes it easier to manage multiple use cases of if your stylistic needs change, without the need to change all of its uses in the HTML.
  • Historically, the element was meant to make text boldface. Styling information has been deprecated since HTML4, so the meaning of the element has been changed.
  • If there is no semantic purpose to using the element, you should use the CSS font-weight property with the value «bold» instead in order to make text bold.

Examples

p> This article describes several b class="keywords">text-levelb> elements. It explains their usage in an b class="keywords">HTMLb> document. p> Keywords are displayed with the default style of the b>element, likely in bold.b>

Result

Technical summary

Content categories Flow content, phrasing content, palpable content.
Permitted content Phrasing content.
Tag omission None, both the starting and ending tag are mandatory.
Permitted parents Any element that accepts phrasing content.
Implicit ARIA role No corresponding role
Permitted ARIA roles Any
DOM interface HTMLElement

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Apr 13, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

Оцените статью