HTML Basic Formatting Tags | HTML Tutorial for Beginner

What are HTML Basic Formatting Tags?

In WordPress, you can easily format the text as Bold, Italic, Underline, Mark, Sup, Sub, Delete, etc. by pressing a button, but when you code a dynamic website like Html, CSS, javascript, and PHP when creating a website, it becomes a bit difficult to color or format the test, but with the help of some basic formatting tags of HTML, you can do formatting in the text without the help of CSS even in HTML.

Basic formatting tags are those tags by which the format of elements can be changed. For example, by not displaying the text normally, it changes its size, color, and design. These tags are most commonly used in HTML.

Normally this tag is used inside the tag of Html because in CSS you cannot style for each element. The following tags come in this.

1) The Heading Tags in HTML

If you want to give any of your text as Heading, then you can use the <Heading> tag of Html. 6 levels of heading can be determined for text in HTML. 

1. <hl>,
2. <h2>
3. <h3>,
4. <h4>,
5. <h5> 
6. and <h6> 

are used to determine the heading, which reduces the size of the text as the number of points increases. It can be used with text in the following two ways.

Example of the level of Heading Tags in HTML

See the Pen The Level of Heading Tags in HTML by Ramkrishna Sahu (@ramkrishna-sahu) on CodePen.

In the last example, the closing tag is not given, so the effect of <h1> is for change in font, paragraph break, or even white space.

2) The Paragraph Tag in Html:

If you want to write a paragraph after the heading, then the <p> tag is used for the paragraph, from where we want to start a new paragraph, we write <p> so that the text starts appearing from the next line. Like the following example:

Example of <p> tag in HTML:

<p>This is a first Paragraph</p>
<p>This is a Second Paragraph</p>

3) The Line Break Tag in HTML

The <br> tag is used for such a situation when the line has to be changed, which is called carriage return. Generally, when poetry etc. is being written, in which after some words they have to display the text on the next line, this tag is used. It can be understood by a naked example.

Example of <br> tag in HTML:

Rkonline<br>
Learn Programming Language<br>
Keep Learning coding.

4) Bold Text in Html:

To bold a text in a word document, simply click on the B button given and our selected text becomes bold, in the same way, to bold the text in HTML, we write the <b> tag and call it To close it, type </b>

Example of <b> Tag in HTML:

<b>This Text is bold Now</b>

5) Italic Text in Html:

To italicize the text in HTML, we write <i> tag, and to close it, we will write </i> tag.

Example of <i> Tag in HTML

<p>This text is <i>italic</i></p>

6) Strong Text in Html:

To show important text in HTML, <strong> tag is used, it is similar to bold, but it gives the meaning of importance to the text.

Example of <strong> Tag in HTML

<strong>This tag is strong like as <b>bold text</b></strong>

7) Emphasized text in HTML:

This tag is used to display the text in italic in HTML. This tag is written in <em>. The difference between Italic and it is that it gives the meaning of the text to be important.

Example of <em> Tag in HTML

<p>This Text <em>Emphasized Text</em>Format</p>

8) Mark Text in Html

If you want to display the text in HTML by highlighting it, then use this tag. This tag is written as <mark>.

Example of <mark> Tag in HTML

<p><mark>Text Display in Mark Format like Highlight</mark></p>

9) Inserted Text in Html:

If you want to display the text in HTML by underlining it, then use this tag. This tag is written in <ins>

Example of <ins> Tag in HTML

<p>Text Display in <ins>Inserted</ins> Format</p>

10) Deleted. Text in Html

To display text in HTML as if it has been deleted, the <del> tag is used for this.

Example of <del> Tag in HTML

<p>Text Display in <del>Deleted</del>Format</p>

11) Superscript Text in Html:

In HTML, if the text is to be displayed above other text (Superscript), then the <sup> tag is used for this.

Example of <sup> Tag in HTML

<p>The Number of 10<sup>2</sup> is- <b>100</b></p>

xi) Subscript Text in Html:

In HTML, if the text is to be displayed below other text (Subscript), then the <sub> tag is used for this.

Example of <sub> Tag in HTML

<p>The chemical formula of oxygen also known as dioxygen is O<sub>2</sub>.</p>

Font size and attributes:

The function of Attributes is to amplify the tag. Amplify means to expand other types of features related to the work of tag. For example, you can display an image on the browser using the <img> tag. 

But which image is to be displayed, at which place of the browser that image is to be displayed, and what will be its length and width, for this attributes like SCR, coordinate, width, height, etc. are used.

HTML tags can be considered incomplete without attributes. If you are displaying an element on the browser and along with that you want to set the color, background color, etc. of that element, then this work is not possible without an attribute. 

There are many HTML tags that have unique attributes, but there are some attributes that are used with multiple tags.

Html Attribute and its functions:

Attribute	Options (What can we do )	Function (what are their functions )
Align	Right, left, center, justify	Horizontally Aligns Tags
Valign	Top, middle, bottom	Vertically Aligns Tags within an HTML element.
Bg-color	Numeric, hexadecimal, and RGB values	Place a Background Color Behind an Element.
Background	URL	Place Background images behind an Element.
Title	User Define	“Pop–up” title for your elements.
Id	User Define	Name an element for use with Cascading Style Sheets
Width	User Define	Specifies The width of the Table, Image, or Table Cell
Height	User Define	Specifies The Height of the Table, Image, or Table Cell

All the above attributes are used when they are needed according to their work written in it. Attributes are used in different tags according to their function.

Examples of HTML Basic Formating Tags:

The output with examples of all the basic formatting tags given above is being given here, if you want, you can also practice from here.

See the Pen HTML Basic Formatting Tags With Examples by Ramkrishna Sahu (@ramkrishna-sahu) on CodePen.

You can also watch this video. if you like this video then please Subscribe to the youtube channel and hit the like👍 button.