HTML Text Formatting Tags
HTML Text Formatting tags overview and code sample
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.
The <mark> 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 where the user has entered a search query and results are shown highlighting the desired query.
Common standard formatting is black text on a yellow background, but this can be changed with CSS.
Bold, Italic, and Underline
To bold text, use the <strong> or <b> tags:
What’s the difference? Semantics. <strong> is used to indicate that the text is fundamentally or semantically important to the surrounding text, while <b> indicates no such importance and simply represents text that should be bolded.
If you were to use <b> 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 <strong>, 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.
HTML BOLD TEXT EXAMPLE:
To italicize text, use the <em> or <i> tags:
What’s the difference? Semantics. <em> is used to indicate that the text should have extra emphasis that should be stressed, while <i> 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 <em>: "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>: "I was forced to read Romeo and Juliet in high school.
HTML Italic Text EXAMPLE:
While the <u> 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.
HTML Underlined Text EXAMPLE
To mark some expression as an abbreviation, use <abbr> tag:
If present, the title attribute is used to present the full description of such abbreviation.
HTML Abbreviation Tag EXAMPLE
Inserted, Deleted, or Stricken tags
To mark text as inserted, use the <ins> tag:
To mark text as deleted, use the <del> tag:
To strike through text, use the <s> tag:
Anything that appears within <ins>...</ins> element is displayed as inserted text.
HTML Inserted Text Example
Anything that appears within <del>...</del> element, is displayed as deleted text.
HTML Deleted Text Example
HTML Strike Text Example:
Superscript and Subscript tags
To offset text either upward or downward you can use the tags <sup> and <sub>.
To create superscript:
To create subscript:
The content of a <sup>...</sup> element is written in superscript; the font size used is the same size as the characters surrounding it but is displayed half a character's height above the other characters.
HTML Superscript Text Example
The content of a <sub>...</sub> element is written in subscript; the font size used is the same as the characters surrounding it, but is displayed half a character's height beneath the other characters.
HTML Subscript Text Example
ATutorialHub Related Guide
AWS Amazon EC2-Deploy a MERN Stack application to AWS Amazon EC2
Sea battle game only using HTML and CSS
HTML Tutorials Comments (9)
panduranga gupta2021-07-05 07:03:13
good website for learning and help me a lot
The awsome website i am looking like for a long time, good work atutorialhub team keep doing
Learning a lot from the courses present on atutorialhub. The courses are very well explained. Great experience
It is very helpful to students and easy to learn the concepts
Great job Tutorials are easy to understand Please make use of it
Zain Khan2021-09-18 15:07:23
Great content and customized courses.
Rudrakshi Bhatt2021-09-09 15:08:10
Well structured coursed and explained really well!
Pavana Somashekar2021-09-11 15:09:08
Good platform for beginners and learn a lot on this website