In this chapter, you will learn how to style and format text in HTML. We will highlight important words, make text bold or italic, and underline special words. You will also see how to show inserted or deleted text, write abbreviations, use superscript and subscript, and strike through text. By the end, you can make your content clear, organized, and easy to read.
Text Formatting
HTML is not only about creating elements like paragraphs or headings. It also provides text formatting tags to style specific parts of your text. You can highlight, bold, italicize, underline, or even strike through text using HTML. These tags help make your content more readable and visually organized.
Highlighting Text with <mark>
The <mark> tag is new in HTML5. It highlights text to show its importance or relevance in a context.
For example, when a user searches for a word in an article, you can highlight that word so it’s easier to find:
<p>Here is some content from an article that contains the <mark>searched query</mark> that we are looking for. Highlighting the text will make it easier for the user to find what they are looking for.</p>Output:
The highlighted text usually appears as black text on a yellow background, but you can change the color using CSS.
Highlighting is useful for search results, important notes, or key points.
Bold, Italic, and Underline
HTML provides several tags to emphasize or style text.
Bold Text
You can bold text using <strong> or <b>:
<strong>Bold Text Here</strong>
<b>Bold Text Here</b>
Difference:
<strong>: Indicates that the text is important. Screen readers may stress these words when reading aloud.<b>: Simply makes the text bold without implying importance. It’s for visual emphasis only.
Italic Text
Italic text is created using <em> or <i>:
<em>Italicized Text Here</em>
<i>Italicized Text Here</i>
Difference:
<em>: Marks text that should be emphasized. Screen readers may stress it.<i>: Just changes the style to italic without extra meaning. Use it for titles, foreign words, or stylistic text.
Example:
<em>Would you just submit the edit already?</em>
<i>I was forced to read Romeo and Juliet in high school.</i>Underlined Text
The <u> tag was deprecated in HTML4, but HTML5 brought it back with a new meaning. It represents non-textual annotations, like misspelled words or special names.
<p>This paragraph contains some <u>mispelled</u> text.</p>
Browsers show underlined text by default, but the purpose is now semantic, not purely stylistic.
Practice Exercise
- Write a paragraph and highlight a key word using
<mark>. - Bold one sentence using
<strong>and another using<b>; notice the difference. - Italicize a word with
<em>and another with<i>. - Underline a misspelled word or special name using
<u>.
Abbreviations with <abbr>
Sometimes, you may use short forms or acronyms in your text. The <abbr> tag is used to mark these abbreviations and give their full description.
Example:
<p>I like to write <abbr title="Hypertext Markup Language">HTML</abbr>!</p>
- Here,
HTMLis an abbreviation. - The
titleattribute contains the full meaning: “Hypertext Markup Language”. - When users hover over the abbreviation, most browsers show the full text as a tooltip.
Abbreviations help readers understand short forms without confusion.
Inserted, Deleted, and Strikethrough Text
HTML allows you to show text changes using semantic tags. These are useful for editing, documentation, or corrections.
Inserted Text: <ins>
The <ins> tag shows text that has been added.
<p>This is <ins>new text</ins> added to the paragraph.</p>
Browsers usually display inserted text with underline to indicate it is new.
Deleted Text: <del>
The <del> tag shows text that has been removed or deleted.
<p>This is <del>deleted text</del> from the paragraph.</p>
Browsers display deleted text with a line through it.
Strikethrough Text: <s>
The <s> tag is used to strike through text without implying deletion.
<p>This is <s>struck-through text</s> for emphasis.</p>
Use <s> when you want to show text that is no longer relevant or just stylistically crossed out.
Superscript and Subscript
Superscript and subscript are used to raise or lower text in relation to the normal line. These are common in math, chemistry, and scientific writing.
Superscript: <sup>
The <sup> tag moves text upwards.
<p>Water molecule is H<sub>2</sub>O and area is 10 m<sup>2</sup>.</p>
10 m<sup>2</sup>displays as 10m210 m²10m2.- Superscript is often used for exponents or footnotes.
Subscript: <sub>
The <sub> tag moves text downwards.
<p>Water molecule is H<sub>2</sub>O</p>
H<sub>2</sub>Odisplays as Hâ‚‚O.- Subscript is used in chemical formulas, mathematical indices, or scientific notations.
Summary
<mark>: Highlight important text.<strong>/<b>: Bold text, with<strong>adding semantic importance.<em>/<i>: Italic text, with<em>adding emphasis.<u>: Underline text for annotations or special emphasis.<abbr>: Abbreviations with full description.<ins>: Inserted text.<del>: Deleted text.<s>: Strikethrough text.<sup>: Superscript for exponents or footnotes.<sub>: Subscript for chemical formulas or indices.
Try it Yourself
- Highlight a word in a paragraph using
<mark>. - Bold one sentence with
<strong>and another with<b>. - Italicize text using
<em>and<i>. - Underline a misspelled word with
<u>. - Add an abbreviation
<abbr>with a title. - Show added text with
<ins>and removed text with<del>. - Strike through irrelevant text using
<s>. - Write a chemical formula with
<sub>and an exponent with<sup>.
Also Read: