In this tutorial you will learn about the HTML Formatting and its application with practical example.
HTML Formatting Tags enable us to organize the HTML Element in manner that enhance the readability of the webpage. Formatting tags allows us to define the proper format or structure for the information to be presented on the webpage. A well organized information is combination of heading, paragraph, listing element, space, line breaks etc.
Headings
HTML Heading tags are used to add heading element in a webpage, there are six level available for heading elements.
Example –
1 2 3 4 5 6 |
<h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6> |
output:
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Paragraph
Paragraph can be created using <p></p> tag on webpage.
Example:
1 |
<p>Here is a first paragraph of text.</p> |
Output:
Here is a first paragraph of text.
Preserved Formatting
Sometimes we need a paragraph or text to keep its formatting as it is, this can be achieved using <pre> tag.
Example:
1 2 3 4 |
<pre>Line one, Line two, Line three, Line four</pre> |
Output:
1 2 3 4 |
Line one, Line two, Line three, Line four |
Centering Text
Text on a webpage can be aligned center using <center> tag.
Example:
1 2 3 |
<center style="border:1px solid red;height:50px;"> <p>This paragraph is aligned center.</p> </center> |
Output:
Line Break
Line break (<BR>) tag is used to insert a break of one line in text or paragraph.
Example –
1 |
<p>We are going to insert <br />line break.</p> |
Output:
We are going to insert
line break.
Horizontal Rule
We can add a Horizontal Rule in webpage using <hr> tag.
Example:
1 |
We are going to insert horizontal rule... <hr /> ...that was a horizontal rule. |
Output:
We are going to insert horizontal rule…
…that was a horizontal rule.
Unordered List
Some times we need to represent the text in the form of list of items. An unordered list items can be created using <ul> tag.
Example:
1 2 3 4 |
<ul> <li>Item 1</li> <li>Item 2</li> </ul> |
Output:
- Item 1
- Item 2
Ordered List
A numbered list of items can be created using <ol> tag.
Example:
1 2 3 4 |
<ol> <li>Item 1</li> <li>Item 2</li> </ol> |
Output:
- Item 1
- Item 2
Some Basic Text Formatting
Example:
1 2 3 4 5 6 7 8 |
<p>An example of <b>Bold Text</b></p> <p>An example of <em>Emphasized Text</em></p> <p>An example of <strong>Strong Text</strong></p> <p>An example of <i>Italic Text</i></p> <p>An example of <sup>superscripted Text</sup></p> <p>An example of <sub>subscripted Text</sub></p> <p>An example of <del>struckthrough Text</del></p> <p>An example of <code>Computer Code Text</code></p> |
Output:
An example of Bold Text
An example of Emphasized Text
An example of Strong Text
An example of Italic Text
An example of superscripted Text
An example of subscripted Text
An example of struckthrough Text
An example of Computer Code Text