HTMLs Tutorial

HTML Tutorial HTML Tags HTML Basic Tags HTML Attributes HTML Elements HTML Formatting HTML Text Format HTML <body> tag HTML <samp> tag HTML <script> Tag HTML <section> tag HTML <select> tag HTML <source> tag HTML <span> tag HTML <strike> tag HTML <strong> tag HTML <style> tag HTML <sub> tag HTML <summary> tag HTML <sup> Tag HTML <svg> tag HTML <table> tag HTML <u> tag HTML Headings HTML Paragraphs HTML <wbr> tag HTML Anchor HTML Image HTML Lists HTML Ordered List HTML Unordered List HTML Form HTML Form input HTML with CSS HTML Layouts HTML References HTML Frames HTML Links

HTML5 Advance

HTML5 Tutorial HTML5 Tags HTML<Button>Tag HTML <canvas> Tag HTML<caption> Tag HTML City tag HTML <Data> Tag HTML5 SVG HTML Event Attribute HTML5 Audio HTML5 Youtube HTML5 Button Tag HTML5 Tags

Misc

How to add JavaScript to HTML How to change font in HTML How to change text color in HTML HTML Date HTML Hide Element HTML Nested Table HTML Reset Button What does HTML stand for? HTML Background Image HTML <address> Tag Div Tag in HTML How to insert Image in HTML How to create a link with no underline in HTML How to insert spaces/tabs in text using HTML/CSS HTML <br> tag HTML Code HTML <video> Tag HTML Canvas Design a tribute page using HTML and CSS What is a Container tag Font tag in HTML Difference between HTML and DHTML Empty Tag in HTML HTML Button Link Html Line Break Img src HTML Nested List in HTML Placeholder in HTML TD in HTML HTML Space Code HTML Target Attribute

HTML5 Formatting
2020-04-07 16:08:11

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>
HTML Formatting

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

HTML Formatting

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

HTML Formatting

<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 Formatting

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

HTML Formatting

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

HTML Formatting

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

HTML Formatting

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

HTML Formatting

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

HTML Formatting

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

HTML Formatting

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

HTML Formatting

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

HTML Formatting

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

HTML Formatting

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

HTML Formatting