- Text Formatting Tags in HTML with Examples
- Bold and Strong
- Italic and Emphasis
- Highlighting Text
- Teletype Text
- Underline and Strike
- Big and Small
- Delete and Insert
- Subscript and Superscript
- Conclusion
- Further reading
- See also
- 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 Tags in HTML with Examples
Text Formatting Tags in HTML with Examples HTML Formatting is the process of formatting text to improve its appearance and feel. HTML allows us to format text without using CSS. HTML contains numerous formatting tags, which we will cover today. Text can be bolded, italicised, or underlined using these tags. Formatting elements were designed to display special types of text. Here, we are going to learn 14 HTML formatting tags. All of the HTML formatting elements are listed below.
Bold and Strong
Making Text Bold or Strong: The tag can be used to make text bold or strong. Both opening and closing tags are used in the tag. The text that needs to be bolded must be enclosed by the and tags. We can also use the tag to emphasise the text’s semantic importance. It also begins with the tag and ends with the tag.
Welcome fellow Frontend Developers! This is an important content
, and this is just normal content Italic and Emphasis
Italicising or emphasising text: To italicise the text, use the tag. It begins with the tag and ends with the tag. The tag is used to emphasise text with additional semantic significance. It begins with the tag and ends with the tag.
The term Front end describes all the parts of a website that can be seen and interacted with by users. Front end web development usually involves coding with HTML, CSS, and JavaScript. Get out of bed now ! And start coding Highlighting Text
Highlighting text: The tag can also be used to mark or highlight text in HTML. It has a opening tag and a closing tag.
Do not forget to comment your code. Teletype Text
The element was used to identify text to be displayed using the browser’s default monospace or fixed-width font as it would appear on a fixed-width device such as a teletype. This element has been deprecated and the element is an appropriate modern replacement for .
Who is old enough to remember teletype?
Underline and Strike
The tag in HTML stands for underline, and it’s used to underline the text enclosed within the tag. This tag is generally used to underline misspelled words. This tag requires a starting as well as ending tag. Warning: In older versions of HTML, this element was known as the “Underline” element, and it is still sometimes used in this manner. Instead, use a style that includes the CSS text-decoration property set to underline to underline text. The tag defines a strike or line through Text. This tag creates a cut line in the text. This tag is depreciated from HTML5. Now, the tag is used instead of this tag.
This is some misspelled text. Invest in your potential. Develop skills for as low as £24.99 £14.99 — today only! Big and Small
Making text larger: If you want to put your font size larger than the rest of the text then put the content within . . It increase one font size larger than the previous one. Making text smaller: The is used to make the text smaller. The text that needs to be displayed smaller should be written inside . tags.
This is the first sentence. This whole sentence is in bigger letters. This is the first sentence. This whole sentence is in small letters. Delete and Insert
Striking through the text: The element is used to strike through the text marking the part as deleted. It also has an opening and a closing tag.
Adding a text: The element is used to underline a text marking the part as inserted or added. It also has an opening and a closing tag.
My favourite code editor is Sublime Text VS Code ! Subscript and Superscript
Making a text Subscript or Superscript: The element is used to superscript a text and the element is used to subscript a text. They both have an opening and a closing tag.
Make sure to drink plenty of H 2 O whilst working on your coding skills. The world's most famous equation: E = mc 2 Conclusion
- – Bold text
- – Important text
- – Italic text
- – Emphasised text
- – Marked text
- – Teletype text (Not Supported in HTML5)
- – Underline text
- – Draw a strikethrough a section of text (Not Supported in HTML5)
- – Increase font size by one conventional unit (Not Supported in HTML5)
- – Decrease font size by one unit from the base font size
- – Deleted text
- – Inserted text
- – Subscript text
- – Superscript text
I hope you find these HTML formatting elements useful in making your next web page more appealing.
Further reading
Explore some other interesting HTML5 elements; over on MDN Web Docs – HTML elements reference – HTML: HyperText Markup Language | MDN.
See also
If you liked this article, then please share. You can also find me on Twitter for more updates.
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.
Форматирование текста
Форматирование текста — средства его изменения, такие как выбор начертания шрифта и использование эффектов, позволяющих менять вид текста. В табл. 1 перечислены основные теги, которые применяются для изменения оформления текста.
Табл. 1. Теги для форматирования текста
Текст
Любые теги форматирования текста можно использовать совместно друг с другом. Чтобы сделать текст одновременно жирным и курсивным шрифтом используется сочетание тегов и (пример 1). Их порядок в данном случае не важен.
Пример 1. Жирный курсивный текст
Он словно вырезан из камня, стоек и неподвижен в отличие от его противников. Дух и жизненная сила в нём достигла совершенства. Но вот беда — никто не смеет принять его вызов.
Результат данного примера показан на рис. 1.
Рис. 1. Вид курсивного жирного начертания текста
Использование тегов и сдвигает текст относительно базовой линии и уменьшает размер шрифта (пример 2).
Пример 2. Создание нижнего индекса
Формула изумруда: Be3Al2(SiO3)6
Результат данного примера показан на рис. 2.
Рис. 2. Нижний индекс в тексте
Теги и выполняют те же функции, что теги и , но написание последних короче, привычней и удобней.
Следует отметить, что теги и , также как и являются не совсем эквивалентными и заменяемыми. Первый тег — является тегом физической разметки и устанавливает жирный текст, а тег — тегом логической разметки и определяет важность помеченного текста. Такое разделение тегов на логическое и физическое форматирование изначально предназначалось, чтобы сделать HTML универсальным, в том числе не зависящим от устройства вывода информации. Теоретически, если воспользоваться, например, речевым браузером, то текст, оформленный с помощью тегов и , будет отмечен по-разному. Однако получилось так, что в популярных браузерах результат использования этих тегов равнозначен.