HTML Formatting Tags | HTML Tutorial

HTML Formatting Tags

HTML Formatting is a process formatting text for making a good looking and user-friendly website.

HTML provides us the ability to display our text in various format using html formatting tags.

These formatting tags are used to make the text bold, italicized, big, small, underlined and so on.

You will use CSS for most of the formatting and styling purpose. However, browsers also have default format for certain HTML elements.

In this tutorial, you will learn some HTML formatting tags that are specially used for text.


HTML <b> Element

The HTML <b> is used to display the text as bold.

It creates extra importance and focus on the text used within this element.

<p>This is a <b>bold text</b> as an example.</p>

The output shows in a web browser:

This is a bold text as an example.


HTML <strong> Element

The HTML <strong> tag can be used to show more importance in a text.

This element works almost the same way as the <b> element do.

<p>This is a <strong>strong text</strong> as an example.</p>

The output shows in a web browser:

This is a strong text as an example.


HTML <i> Element

The HTML <i> element can be used to define italic text.

This plays very important role to catch visitor’s eyes.

<p>This is a <i>strong text</i> as an example.</p>

The output shows in a web browser:

This is a strong text as an example.


HTML <em> Element

The HTML <em> element is used to define an emphasized text.

This element works the same way as <i> do.

The web browsers display the text within <em> element in italic format.

<p>This text is <em>emphasized</em> by using <em> element.</p>

The output shows in a web browser:

This text is emphasized by using element.


HTML <mark> Element

The HTML <mark> element is used to highlight or mark the text inside of another element.

If you want to highlight the parts of your text, you can use this tag to show the relevancy in a specific context.

<p>This is HTML <mark>marked element</mark> as an example.</p>

The output shows in a web browser:

This is HTML marked element as an example.


HTML <sub> Element

The HTML <sub> element represents subscript text in the document.

The text within this element looks smaller and appears lower than the text around it.

It is very useful for writing mathematical or chemical formulas.

<p>The formula of water is H<sub>2</sub>O</p>
<p>This paragraph contains a <sub>subscript</sub> element.</p>

The output shows in a web browser:

The formula of water is H2O

This paragraph contains a subscript element.


HTML <sup> Element

The HTML <sup> element represents superscript text in the document.

The text within this element looks smaller and appears higher than the text around it.

It is also very useful for writing mathematical or chemical formulas.

<p>(a+b)<sup>2</sup> = a<sup>2</sup> + 2ab + b<sup>2</sup> </p>
<p>This paragraph contains a <sup>superscript</sup> element.</p>

The output shows in a web browser:

(a+b)2 = a2 + 2ab + b2

This paragraph contains a superscript element.


HTML <del> Element

The HTML <del> element is used to identify the text that has been deleted or not valid inside a document.

It shows a straight line through the text, which is present within the element.

It is very important to display the wrong words or information.

<p>
My favorite color is <del style="color:#1c87c9;">blue</del> <span style="color:#8ebf42;"> green</span>!
</p>

The output shows in a web browser:

My favorite color is blue green!


HTML <ins> Element

The HTML <ins> element is used to define the inserted text.

It shows underline anything that appears within this element.

<p>This paragraph contains <ins>inserted</ins> text.</p>

The output shows in a web browser:

This paragraph contains inserted text.


HTML <big> Element

The HTML <big> element is used to display the larger font size text.

The text within this element looks one font size larger than the text around it.

<p>The following word uses a <big>big</big> element.</p>

The output shows in a web browser:

The following word uses a big element.


HTML <small> Element

The HTML <small> element defines smaller size text.

This element makes text one font size smaller than the text in the HTML document.

<p>This paragraph contains <small>smaller size</small> text.</p>

The output shows in a web browser:

This paragraph contains smaller size text.


HTML <code> Element

The HTML <code> element is used for indicating any piece of code inside a webpage.

Web browsers often display text surrounded by <code> element in a monospaced font (a font in which all characters are of the same width)

<code>This paragraph contains code element.</code>

The output shows in a web browser:

This paragraph contains code element.

HTML <center> Element

The HTML <center> element is useful to centralize your content within a container.

This will move your text to the center of the parent element.

<center>This paragraph contains center element.</center>

The output shows in a web browser:

This paragraph contains center element.

HTML <div> Element

The HTML <div> element allows you to group together several elements to create sections or subsections of a web page.

This is one of the most used elements among all elements. You can separate different sections using this element.

For example, every webpage usually contains few sections i.e. header, main content, sidebar and footer. You can take each section within a <div> element.

This will help you to identify the section easily. You can easily modify those sections afterward.

You can also create your own customized section within the content.

<div style="background-color: #f2f2f2; margin-bottom: 15px; padding: 10px; ">
  <h3>Section 1</h3>
  <p>Section content goes here...</p>
</div>
<div style="background-color: #f2f2f2; padding: 10px; ">
  <h3>Section 2</h3>
  <p>Section content goes here...</p>
</div>

The output shows in a web browser:

Section 1

Section content goes here…

Section 2

Section content goes here…


Time to practice

OUTPUT