HTML5 Formatting

HTML Formatting

HTML Formatting is a method of text formatting for a better appearance and look. HTML allows us to format text without using the CSS. HTML includes a lot of formatting tags. These tags are used to make bold, underline, and italic text. There are nearly 14 options available in HTML and XHTML for the way text appears.

For HTML the tags are divided into two categories:

• Physical tag
• Logical tag

Physical tag: These tags are used to give the text a visual appearance.

Logical tag:Logical or semantic tags are used to append the value.

Here we will know 14 tags for formatting HTML. The list of text for formatting HTML is below.

Element name	Description
<b>	It is a physical tag used to bold the text between the tags.
<strong>	It is a logical tag that tells the browser that text is important.
<i>	It is a physical tag used to make italic text.
<em>	It is a logical tag used to display the content in italics.
<mark>	This tag will be used to highlight the text.
<u>	This tag is used to underline the text that has been written between them.
<tt>	Use this tag, a text may appear in a teletype. (Don’t supported HTML5)
<sup>	It displays the contents just slightly above the usual line.
<sub>	It displays the contents just slightly below the usual line.
<del>	It tag is used to display the deleted contents.
<strike>	Using this tag will draw a strikethrough on a text line. (Don't support HTML5)
<ins>	This tag shows the added contents.
<big>	This tag is used with one conventional unit to increase font size.
<small>	This tag is used to reduce font size by one unit from the base font size.

1. Bold Text

HTML < b > and < strong > element formatting

The HTML < b > element is a physical tag that displays text in bold font without any logical importance. If you write anything within the < b>................ </b > element, it is shown in bold letters.

Example

 < p><b > Write in bold text your first paragraph.</b></p >

Code

<!DOCTYPE>
 <html>
 <body>
 <p><b > Write in bold text your first paragraph.</b></p >
 </body>
 </html> 

Output

<strong> tag

The HTML < strong > tag is a logical tag that displays content in bold font and informs the browser of its logical significance. Write something like < strong >????????.</strong > Important text is shown.

Example

<p><strong>This is an important content</strong>, and this is normal content</p>  

Code

<!DOCTYPE>
 <html>
 <body>
 <p><strong>This is an important content</strong>, and this is normal content</p>
 </body>
 </html> 

Output

2. Italic Text

HTML <i> and <em> elements formatting

The HTML < I > element is a physical element that displays the enclosed content in the italic font without any added importance. If you write anything in the < i>................ </i > element, it will be shown in italic letters.

Example

<p> <i>Write Your First Paragraph in italic text.</i></p> 

Code

<!DOCTYPE>
 <html>
 <body>
 <p><i>Write Your First Paragraph in italic text.</i></p>
 </body>
 </html> 

Output

<em>tag

The HTML < em > tag is a logical feature that shows the enclosed content in italic font, with added value in semantics.

Example

<p><em>This is an important content</em>, which displayed in italic font.</p> 

Code

<!DOCTYPE>
 <html>
 <body>
 <p><em>This is an important content</em>, which displayed in italic font.</p>
 </body>
 </html> 

Output

HTML Marked formatting

If you want to mark or highlight a file, the contents should be written in < mark>......</mark>.

Example

 <h2> I want to put a <mark> Mark</mark> on your face</h2>

Code

<!DOCTYPE>
 <html>
 <body>
 <h2>  I want to put a <mark> Mark</mark> on your face</h2>
 </body>
 </html> 

Output

4. Underlined Text

If we write something inside the element < u>...... </u >, the text underlined is displayed.

Example

<p> <u>Write Your First Paragraph in underlined text.</u></p>  

Code

<!DOCTYPE>
 <html>
 <body>
 <p><u>Write Your First Paragraph in underlined text.</u></p>
 </body>
 </html> 

Output

5. Strike Text

Anything written within the < stroke>....................... </stroke > element will be displayed with a strikethrough. It's a thin line that crosses the statement.

Example

<p> <strike>Write Your First Paragraph with Strike Text</strike>.</p>  

Code

<!DOCTYPE>
 <html>
 <body>
 <p><strike>Write Your First Paragraph with Strike Text</strike>.</p>
 </body>
 </html> 

Output

6. Monospaced Font

If you want each letter to have the same width, you should write the contents within the <tt>…………</tt> element.

Example

 <p>Hello <tt>Write Your First Paragraph in monospaced font.</tt></p>

Code

<!DOCTYPE>
 <html>
 <body>
 <p>Hello <tt>Write Your First Paragraph in monospaced font.</tt></p>
 </body>
 </html> 

Output

7. Superscript Text

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

Example

<p>Hello <sup>Write Your First Paragraph in superscript.</sup></p>     

Code

<!DOCTYPE>
 <html>
 <body>
 <p>Hello <sup>Write Your First Paragraph in superscript.</sup></p>
 </body>
 </html> 

Output

8. Subscript Text

If you put the content inside the item < sub>.............. </sub >, it is displayed in the subscript; means half the height of a character below the other characters is displayed.

Example

<p>Hello <sub>Write Your First Paragraph in subscript.</sub></p> 

Code

<!DOCTYPE>
 <html>
 <body>
 <p>Hello <sub>Write Your First Paragraph in subscript.</sub></p>
 </body>
 </html> 

Output

9. Deleted Text

Anything within <del>...... </del > is shown as deleted text.

Example

<p>Hello <del>Delete your first paragraph.</del></p> 

Code

<!DOCTYPE>
 <html>
 <body>
 <p>Hello <del>Delete your first paragraph.</del></p>
 </body>
 </html> 

Output

10. Inserted Text

Anything inserted inside <ins>...... </ins > will be displayed as inserted text.

Example

<p> <del>Delete your first paragraph.</del><ins>Write another paragraph.</ins></p>  

Code

<!DOCTYPE>
 <html>
 <body>
 <p><del>Delete your first paragraph.</del><ins>Write another paragraph.</ins></p>
 </body>
 </html> 

Output

11. Larger Text

If we want to add a font size larger than the rest of the text, then insert the contents in < big>................ </big>. It increases the size of one font more than the previous one.

Example

<p>Hello <big>Write the paragraph in larger font.</big></p>  

Code

<!DOCTYPE>
 <html>
 <body>
 <p>Hello <big>Write the paragraph in larger font.</big></p>
 </body>
 </html> 

Output

12. Smaller Text

If we want to make your font size smaller than the rest of the text, insert the contents in < small>................ </small > tag. It reduces the size of one font to the previous one.

Example

<p>Hello <small>Write the paragraph in smaller font.</small></p>

Code

<!DOCTYPE>
 <html>
 <body>
 <p>Hello <small>Write the paragraph in smaller font.</small></p>
 </body>
 </html> 

Output