- HTML Text Formatting Bold, Italic, and Underline
- Italic Text
- Underlined Text
- 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
- # Text Formatting
- # Highlighting
- # Bold, Italic, and Underline
- # Bold Text
- # Italic Text
- # Underlined Text
- # Abbreviation
- # Inserted, Deleted, or Stricken
- # Superscript and Subscript
- Как сделать жирный или подчеркнутый текст в CSS и HTML
- Навигация по статье:
- Как сделать подчеркнутый текст CSS-стилями
- Подчеркнутый текст HTML-тегами
- Как сделать жирный текст CSS-стилями
HTML Text Formatting Bold, Italic, and Underline
What’s the difference? Semantics. is used to indicate that the text is fundamentally or semantically important to the surrounding text, while indicates no such importance and simply represents text that should be bolded.
If you were to use a text-to-speech program would not say the word(s) any differently than any of the other words around it — you are simply drawing attention to them without adding any additional importance. By using , though, the same program would want to speak those word(s) with a different tone of voice to convey that the text is important in some way.
Italic Text
To italicize text, use the or tags:
What’s the difference? Semantics. is used to indicate that the text should have extra emphasis that should be stressed, while simply represents text which should be set off from the normal text around it.
For example, if you wanted to stress the action inside a sentence, one might do so by emphasizing it in italics via : «Would you just submit the edit already?»
But if you were identifying a book or newspaper that you would normally italicize stylistically, you would simply use : «I was forced to read Romeo and Juliet in high school.
Underlined Text
While the element itself was deprecated in HTMl 4, it was reintroduced with alternate semantic meaning in HTML 5 — to represent an unarticulated, non-textual annotation. You might use such a rendering to indicate misspelled text on the page, or for a Chinese proper name mark.
This paragraph contains some mispelled text.
PDF — Download HTML for free
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.
# Text Formatting
While most HTML tags are used to create elements, HTML also provides in-text formatting tags to apply specific text-related styles to portions of text. This topic includes examples of HTML text formatting such as highlighting, bolding, underlining, subscript, and stricken text.
# Highlighting
The element is new in HTML5 and is used to mark or highlight text in a document «due to its relevance in another context». 1
The most common example would be in the results of a search were the user has entered a search query and results are shown highlighting the desired query.
p>Here is some content from an article that contains the mark>searched querymark> that we are looking for. Highlighting the text will make it easier for the user to find what they are looking for.p> 
A common standard formatting is black text on a yellow background, but this can be changed with CSS.
# Bold, Italic, and Underline
# Bold Text
To bold text, use the or tags:
strong>Bold Text Herestrong> What’s the difference? Semantics. is used to indicate that the text is fundamentally or semantically important to the surrounding text, while indicates no such importance and simply represents text that should be bolded.
If you were to use a text-to-speech program would not say the word(s) any differently than any of the other words around it — you are simply drawing attention to them without adding any additional importance. By using , though, the same program would want to speak those word(s) with a different tone of voice to convey that the text is important in some way.
# Italic Text
To italicize text, use the or tags:
What’s the difference? Semantics. is used to indicate that the text should have extra emphasis that should be stressed, while simply represents text which should be set off from the normal text around it.
For example, if you wanted to stress the action inside a sentence, one might do so by emphasizing it in italics via : «Would you just submit the edit already?»
But if you were identifying a book or newspaper that you would normally italicize stylistically, you would simply use : «I was forced to read Romeo and Juliet in high school.
# Underlined Text
While the element itself was deprecated in HTMl 4, it was reintroduced with alternate semantic meaning in HTML 5 — to represent an unarticulated, non-textual annotation. You might use such a rendering to indicate misspelled text on the page, or for a Chinese proper name mark.
p>This paragraph contains some u>mispelledu> text.p> # Abbreviation
To mark some expression as an abbreviation, use tag:
p>I like to write abbr title="Hypertext Markup Language">HTMLabbr>!p> If present, the title attribute is used to present the full description of such abbreviation.
# Inserted, Deleted, or Stricken
To mark text as inserted, use the tag:
To mark text as deleted, use the tag:
To strike through text, use the tag:
s>Struck-through text heres> # Superscript and Subscript
To offset text either upward or downward you can use the tags and .
Как сделать жирный или подчеркнутый текст в CSS и HTML
Заполняя свой сайт, мы обязательно сталкиваемся с необходимостью форматирования контента, для того, что бы придать ему более наглядный вид или обратить внимание читателя на какие-то основные моменты.
В сегодняшней статье мы рассмотрим с вами как сделать подчеркнутый и жирный текст CSS-стилями и HTML-тегами. Хорошо, когда как в WordPress есть визуальный редактор и можно легко придать любому фрагменту необходимый стиль написания.
Навигация по статье:
Но бывают случаи, когда даже для сайта, сделанного с помощью CMS, приходится задавать форматирование CSS-стилями или HTML-тегами. В WordPress это касается заполнения виджетов «Текст», например, или редактирования текста в отдельных плагинах, которые не поддерживают визуальный редактор.
Как сделать подчеркнутый текст CSS-стилями
Чтобы как-то выделить фрагмент, и сделать его более заметным, мы можем сделать подчеркнутый текст css-стилями, используя свойство text-decoration:underline;
Так же это CSS-свойство имеет и другие интересные значения:
- blink — позволяет сделать слово или предложение мерцающим,
- line-through — перечёркивает слово или предложение,
- overline — позволяет провести линию над словом.
Это свойство так же используется для стилизации отображения ссылок по умолчанию. Поэтому, если вы хотите что бы ссылки на страницах вашего сайта отображались без подчеркивания, вам нужно задать для нее text-decoration: none;
Подчеркнутый текст HTML-тегами
Если вы столкнулись с необходимостью сделать подчеркивание в единичном случае, то конечно писать стили для этого одного фрагмента не целесообразно. В таких ситуациях вы можете сделать подчеркнутый текст средствами HTML. Для этого вам всего лишь нужно поместить нужный фрагмент между тегами …
Как сделать жирный текст CSS-стилями
Для выделения жирным в CSS предусмотрено свойство font-weight, которое в свою очередь имеет достаточно большое количество принимаемых значений, используя которые, вы можете подобрать для своей ситуации наиболее подходящий жирный текст css-стилями.
Итак, свойство font-weight может принимать фиксированные значения:
- bold – жирный
- bolder – еще жирнее
- normal – начальный вид
- lighter – делает буквы тоньше, по сравнению с normal
Кроме этого, можно использовать числовые значения, что бы подобрать степень жирности на свое усмотрение. Для этого можно задать число от 100 до 900, при этом 100 будет соответствовать значению lighter, а 900 будет иметь наибольшую жирность, на порядок выше, чем у значения bolder.