HTML Formatting

HTML Formatting is a process of formatting text for better look and feel. There are many formatting tags in HTML. These tags are used to make text bold, italicized, or underlined. There are almost 13 options available that how text appears in HTML and XHTML.

Here, we are going to learn 12 HTML formatting tags.

1. Bold and strong Elements

If you write anything within <b>........</b> element, is shown in bold letters.

The HTML <strong> tag gives text a strong emphasis which traditionally means that the text is displayed as bold by the browser. This tag is also commonly referred to as the <strong> element</strong>.

See this example:

<p> <b>Write Your First Paragraph in bold text.</b> </p>
<p> <strong>Write Your First Paragraph in strong text.</strong> </p>
Try it with the Editor

2. Italic and em Elements

If you write anything within <i>........</i> element, is shown in italic letters.

<i> and <em> tags is generally interpreted by the browser in a similar way. The two commonly used tags to place italics onto a website are <em> and <i>. They are short and sweet.

See this example:

<p> <i>Write Your First Paragraph in italic text.</i> </p>
<p> <em>Write Your First Paragraph in emphasized text..</em> </p>
Try it with the Editor

3. HTML Horizontal Lines

HTML <hr> tag is used to specify a paragraph-level thematic break in HTML document.

The <hr> tag creates a line from the current position in the document to the right margin and breaks the line accordingly.

HR tag is used to draw a horizontal line within the texts to separate content.

See this example:

<p>HTML is the standard markup language for creating Web pages.<p>
<hr>
<p>CSS describes how HTML elements are to be displayed on screen, paper, or in other media.<p>

HTML

HTML is a language for describing web pages.


HR Tag

HR tag is used to draw a horizontal line within the texts to sepate content.

Try it with the Editor

4. HTML Marked formatting

If you want to mark or highlight a text, you should write the content within <mark>.......</mark>.

See this example:

<h2>I want to put a <mark> Mark </mark> on your face</h2>
Try it with the Editor

5. Underlined Text

If you write anything within <u>........</u> element, is shown in underlined text..

See this example:

<u>Write Your First Paragraph in underlined text.</u>
Try it with the Editor

6. Strike Text

Anything written within <strike>.........</strike> element is displayed with strikethrough. It is a thin line which cross the statement.

See this example:

<p> <strike>Write Your First Paragraph with strike through</strike> </p>
Try it with the Editor

7. Monospaced Text

If you want that each letter has the same width then you should write the content within <tt>...........</tt> element.

Note: We know that most of the fonts are known as variable-width fonts because different letters have different width. (for example: 'w' is wider than 'i'). Monospaced Font provides similar space among every letter.

See this example:

<p> Hello <tt> Write Your First Paragraph in monospaced font.</tt> </p>
Try it with the Editor

8. Superscript Text

If you put the content within <sup>............</sup> element, is shown in superscript ; means it is displayed half a character's height above the other characters.

See this example:

<p> Hello <sup> Write Your First Paragraph in superscript.</sup> </p>
Try it with the Editor

9. Subscript Text

If you put the content within <sub>........</sub> element, is shown in subscript ; means it is displayed half a character's height below the other characters.

See this example:

<p> Hello <sub> Write Your First Paragraph in subscript.</sub> </p>
Try it with the Editor

10. Deleted Text

Anything that puts within <del>........</del> is displayed as deleted text.

See this example:

<p> Hello <del> Delete your first paragraph</del> </p>
Try it with the Editor

11. Inserted Text

Anything that puts within <ins>.......<ins> is displayed as inserted text

See this example:

<p><del> Delete your first paragraph </del> <ins> Write another paragraph.</ins> </p>
Try it with the Editor

12. Larger Text

If you want to put your font size larger than the rest of the text then put the content within <big>.......</big>. It increase one font size larger than the previous one.

See this example:

<p> <big>Write the paragraph in larger font.<big> </p>
Try it with the Editor

13. Smaller Text

If you want to put your font size smaller than the rest of the text then put the content within <small>.......</small> tag. It reduces one font size than the previous one.

See this example:

<p> <small>Write the paragraph in small font.<small> </p>
Try it with the Editor