HTML Formatting

By Tony 2023.3.4 • Last updated 2024.1.24

We often make text highlighted, bolded, underline, or italic to emphasize important text. This article will tell you how to format text in HTML.

Some formatting tags example:

<p>
ww<b>I'm bolded</b>
ww<strong>I'm strong</strong>
ww<u>I'm underlined</u>
ww<ins>I'm inserted</ins>
ww<mark>I'm highlighted</mark>
ww<i>I'm italic</i>
ww<em>I'm emphasized</em>
ww<del>I'm deleted</del>
wwSome text <sup>I'm superscript</sup>
wwSome text <sub>I'm subscript</sub>
</p>

So it's pretty clear what tag is for. Every formatting tag has a closing tag and the text inside them is formatted. You can also put a pair of formatting tags inside another pair of formatting tags so a text can be like ^this or _th^is.
Here is the output of the code above:

I'm bolded
I'm strong
I'm underlined
I'm inserted
I'm highlighted
I'm italic
I'm emphasized
I'm deleted
Some text ^{I'm superscript}
Some text _{I'm subscript}

You maybe noticed some formatting tags have the same output like <b> and <strong> tags or <i> and <em> tags. Yes, they are exactly same. You can open VS Code and explore all these formatting tags yourself. If you want to make the formatting output different, you can also use CSS to style the output.

Bonus: HTML Comment

Having comments in your code can have many purposes, like noting what a section of code is for, jot down ideas, explain code, or temperoraily making content invisible. To do this in HTML, simply follow the example below:

To add a comment in HTML, just type a less than symbol (<), followed by an exclamation mark (!) with two hyphens (--) behind it. To close the comment, type two hyphens (--) and put a greater than tag (>) to close it. Comments are not visible in the HTML output, but is visible in the code.