- Форматирование текста
- HTML Text Formatting
- Example
- HTML Formatting Elements
- HTML and Elements
- Example
- Example
- HTML and Elements
- Example
- Example
- HTML Element
- Example
- HTML Element
- Example
- HTML Element
- Example
- HTML Element
- Example
- HTML Element
- Example
- HTML Element
- Example
- HTML Exercises
- HTML Text Formatting Elements
- font-weight
- Try it
- Syntax
- Values
- Fallback weights
- Meaning of relative weights
- Common weight name mapping
- Variable fonts
- Accessibility concerns
- Formal definition
- Formal syntax
- Examples
- Setting font weights
- HTML
- CSS
- Result
- Specifications
- Browser compatibility
- See also
- Found a content problem with this page?
- MDN
- Support
- Our communities
- Developers
- HTML Bold
- CSS Bold: font-weight Property
- HTML Bold: Tag
- So Which «HTML Bold» Tag Should I Use?
- Combining CSS Bold and HTML Bold
Форматирование текста
Форматирование текста — средства его изменения, такие как выбор начертания шрифта и использование эффектов, позволяющих менять вид текста. В табл. 1 перечислены основные теги, которые применяются для изменения оформления текста.
Табл. 1. Теги для форматирования текста
Текст
Любые теги форматирования текста можно использовать совместно друг с другом. Чтобы сделать текст одновременно жирным и курсивным шрифтом используется сочетание тегов и (пример 1). Их порядок в данном случае не важен.
Пример 1. Жирный курсивный текст
Он словно вырезан из камня, стоек и неподвижен в отличие от его противников. Дух и жизненная сила в нём достигла совершенства. Но вот беда — никто не смеет принять его вызов.
Результат данного примера показан на рис. 1.
Рис. 1. Вид курсивного жирного начертания текста
Использование тегов и сдвигает текст относительно базовой линии и уменьшает размер шрифта (пример 2).
Пример 2. Создание нижнего индекса
Формула изумруда: Be3Al2(SiO3)6
Результат данного примера показан на рис. 2.
Рис. 2. Нижний индекс в тексте
Теги и выполняют те же функции, что теги и , но написание последних короче, привычней и удобней.
Следует отметить, что теги и , также как и являются не совсем эквивалентными и заменяемыми. Первый тег — является тегом физической разметки и устанавливает жирный текст, а тег — тегом логической разметки и определяет важность помеченного текста. Такое разделение тегов на логическое и физическое форматирование изначально предназначалось, чтобы сделать HTML универсальным, в том числе не зависящим от устройства вывода информации. Теоретически, если воспользоваться, например, речевым браузером, то текст, оформленный с помощью тегов и , будет отмечен по-разному. Однако получилось так, что в популярных браузерах результат использования этих тегов равнозначен.
HTML Text Formatting
HTML contains several elements for defining text with a special meaning.
Example
This is subscript and superscript
HTML Formatting Elements
Formatting elements were designed to display special types of text:
- — Bold text
- — Important text
- — Italic text
- — Emphasized text
- — Marked text
- — Smaller text
- — Deleted text
- — Inserted text
- — Subscript text
- — Superscript text
HTML and Elements
The HTML element defines bold text, without any extra importance.
Example
The HTML element defines text with strong importance. The content inside is typically displayed in bold.
Example
HTML and Elements
The HTML element defines a part of text in an alternate voice or mood. The content inside is typically displayed in italic.
Tip: The tag is often used to indicate a technical term, a phrase from another language, a thought, a ship name, etc.
Example
The HTML element defines emphasized text. The content inside is typically displayed in italic.
Tip: A screen reader will pronounce the words in with an emphasis, using verbal stress.
Example
HTML Element
The HTML element defines smaller text:
Example
HTML Element
The HTML element defines text that should be marked or highlighted:
Example
Do not forget to buy milk today.
HTML Element
The HTML element defines text that has been deleted from a document. Browsers will usually strike a line through deleted text:
Example
My favorite color is blue red.
HTML Element
The HTML element defines a text that has been inserted into a document. Browsers will usually underline inserted text:
Example
HTML Element
The HTML element defines subscript text. Subscript text appears half a character below the normal line, and is sometimes rendered in a smaller font. Subscript text can be used for chemical formulas, like H2O:
Example
HTML Element
The HTML element defines superscript text. Superscript text appears half a character above the normal line, and is sometimes rendered in a smaller font. Superscript text can be used for footnotes, like WWW [1] :
Example
This is superscripted text.
HTML Exercises
HTML Text Formatting Elements
Tag | Description |
---|---|
Defines bold text | |
Defines emphasized text | |
Defines a part of text in an alternate voice or mood | |
Defines smaller text | |
Defines important text | |
Defines subscripted text | |
Defines superscripted text | |
Defines inserted text | |
Defines deleted text | |
Defines marked/highlighted text |
For a complete list of all available HTML tags, visit our HTML Tag Reference.
font-weight
The font-weight CSS property sets the weight (or boldness) of the font. The weights available depend on the font-family that is currently set.
Try it
Syntax
/* Keyword values */ font-weight: normal; font-weight: bold; /* Keyword values relative to the parent */ font-weight: lighter; font-weight: bolder; /* Numeric keyword values */ font-weight: 100; font-weight: 200; font-weight: 300; font-weight: 400; /* normal */ font-weight: 500; font-weight: 600; font-weight: 700; /* bold */ font-weight: 800; font-weight: 900; /* Global values */ font-weight: inherit; font-weight: initial; font-weight: revert; font-weight: revert-layer; font-weight: unset;
The font-weight property is specified using any one of the values listed below.
Values
Normal font weight. Same as 400 .
Bold font weight. Same as 700 .
One relative font weight lighter than the parent element. Note that only four font weights are considered for relative weight calculation; see the Meaning of relative weights section below.
One relative font weight heavier than the parent element. Note that only four font weights are considered for relative weight calculation; see the Meaning of relative weights section below.
In earlier versions of the font-weight specification, the property accepts only keyword values and the numeric values 100, 200, 300, 400, 500, 600, 700, 800, and 900; non-variable fonts can only really make use of these set values, although fine-grained values (e.g. 451) will be translated to one of these values for non-variable fonts using the Fallback weights system.
CSS Fonts Level 4 extends the syntax to accept any number between 1 and 1000 and introduces Variable fonts, which can make use of this much finer-grained range of font weights.
Fallback weights
If the exact weight given is unavailable, then the following rule is used to determine the weight actually rendered:
- If the target weight given is between 400 and 500 inclusive:
- Look for available weights between the target and 500 , in ascending order.
- If no match is found, look for available weights less than the target, in descending order.
- If no match is found, look for available weights greater than 500 , in ascending order.
Meaning of relative weights
When lighter or bolder is specified, the below chart shows how the absolute font weight of the element is determined.
Note that when using relative weights, only four font weights are considered — thin (100), normal (400), bold (700), and heavy (900). If a font-family has more weights available, they are ignored for the purposes of relative weight calculation.
Inherited value bolder lighter 100 400 100 200 400 100 300 400 100 400 700 100 500 700 100 600 900 400 700 900 400 800 900 700 900 900 700 Common weight name mapping
The numerical values 100 to 900 roughly correspond to the following common weight names (see the OpenType specification):
Value Common weight name 100 Thin (Hairline) 200 Extra Light (Ultra Light) 300 Light 400 Normal (Regular) 500 Medium 600 Semi Bold (Demi Bold) 700 Bold 800 Extra Bold (Ultra Bold) 900 Black (Heavy) 950 Extra Black (Ultra Black) Variable fonts
Most fonts have a particular weight which corresponds to one of the numbers in Common weight name mapping. However some fonts, called variable fonts, can support a range of weights with a more or less fine granularity, and this can give the designer a much closer degree of control over the chosen weight.
For TrueType or OpenType variable fonts, the «wght» variation is used to implement varying widths.
Note: For the example below to work, you’ll need a browser that supports the CSS Fonts Level 4 syntax in which font-weight can be any number between 1 and 1000 . The demo loads with font-weight: 500; . Change the value to see the weight of the text change.
Accessibility concerns
People experiencing low vision conditions may have difficulty reading text set with a font-weight value of 100 (Thin/Hairline) or 200 (Extra Light), especially if the font has a low contrast color ratio.
Formal definition
Initial value normal Applies to all elements. It also applies to ::first-letter and ::first-line . Inherited yes Computed value the keyword or the numerical value as specified, with bolder and lighter transformed to the real value Animation type a font weight Formal syntax
font-weight =
|
bolder |
lighter=
normal |
bold |Examples
Setting font weights
HTML
p> Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, "and what is the use of a book," thought Alice "without pictures or conversations?" p> div> I'm heavybr /> span>I'm lighterspan> div>
CSS
/* Set paragraph text to be bold. */ p font-weight: bold; > /* Set div text to two steps heavier than normal but less than a standard bold. */ div font-weight: 600; > /* Set span text to be one step lighter than its parent. */ span font-weight: lighter; >
Result
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 Jul 26, 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.HTML Bold
This page contains various HTML bold codes — HTML codes for creating bold text.
There’s more than one way in HTML to bold text. This can be slightly confusing — especially if you aren’t familiar with HTML coding. However, once you get your head around it, you’ll find that each method has its place, and you can — and probably should — use a combination of these whenever you want HTML bold text.
CSS Bold: font-weight Property
CSS provides the font-weight property to make your text bold.
You can also specify the «boldness factor» (instead of just specifying bold ). In other words, you can apply different levels of boldness to different text. Plus you can even specify that text should not be bold. To learn more about this, read about the font-weight property.
The above example uses inline style sheets, however, I highly recommend learning how to use external style sheets and CSS classes, as this will enable you to apply your styles across your whole website in one go.
HTML Bold: Tag
When most people think «HTML bold», they usually think of text that has been boldened using the HTML tag.
Here’s an example of creating «HTML bold» using the tag:
So Which «HTML Bold» Tag Should I Use?
The HTML specification includes several tags for presented boldened/emphasized/highlighted text. Each tag has its own special meaning.
The following table outlines the HTML tags in question:
HTML Tag When to use this tag Use on text to be stylistically offset from the normal prose without conveying any extra importance, such as key words in a document abstract, product names in a review, or other spans of text whose typical typographic presentation is boldened. This element represents stress emphasis of its contents. Use this tag whenever you want to place emphasis on a particular word or phrase. , , , , , & Use these tags for defining different levels of headings. This element represents a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context. Use this tag when you want to highlight a particular word or phrase for reference purposes. This element represents strong importance for its contents. Use this tag whenever you want to convey importance for a particular word or phrase. Here’s what the HTML specification says about HTML bold and other emphasized/highlighted text:
Combining CSS Bold and HTML Bold
Actually, a combination of CSS and HTML is often the best way to bold text in HTML documents.
You should use HTML to define the meaning of the marked up text, then use CSS to define the way that the text looks.
As the HTML specification says: