HTML Formatting
HTML Formatting is a process of formatting text for better look and feel. HTML
provides us ability to format text without using CSS. There are many formatting tags
in HTML. These tags are used to make text bold, italicized, or underlined. There are
almost 14 options available that how text appears in HTML and XHTML.
In HTML the formatting tags are divided into two categories:
o Physical tag: These tags are used to provide the visual appearance to the text.
o Logical tag: These tags are used to add some logical or semantic value to the
text.
NOTE: There are some physical and logical tags which may give same visual
appearance, but they will be different in semantics.
Here, we are going to learn 14 HTML formatting tags. Following is the list of HTML
formatting text.
Element Description
name
<b> This is a physical tag, which is used to bold the text written between it.
<strong> This is a logical tag, which tells the browser that the text is important.
<i> This is a physical tag which is used to make text italic.
<em> This is a logical tag which is used to display content in italic.
<mark> This tag is used to highlight text.
<u> This tag is used to underline text written between it.
<tt> This tag is used to appear a text in teletype. (not supported in HTML5)
<strike> This tag is used to draw a strikethrough on a section of text. (Not
supported in HTML5)
<sup> It displays the content slightly above the normal line.
<sub> It displays the content slightly below the normal line.
<del> This tag is used to display the deleted content.
<ins> This tag displays the content which is added
<big> This tag is used to increase the font size by one conventional unit.
<small> This tag is used to decrease the font size by one unit from base font size.
1) Bold Text
HTML<b> and <strong> formatting elements
The HTML <b> element is a physical tag which display text in bold font, without any
logical importance. If you write anything within <b>............</b> element, is shown in
bold letters.
See this example:
1. <p> <b>Write Your First Paragraph in bold text.</b></p>
Output:
Write Your First Paragraph in bold text.
The HTML <strong> tag is a logical tag, which displays the content in bold font and
informs the browser about its logical importance. If you write anything between
<strong>???????. </strong>, is shown important text.
See this example:
1. <p><strong>This is an important content</strong>, and this is normal content</p>
Output:
This is an important content, and this is normal content
Example
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>formatting elements</title>
5. </head>
6. <body>
7. <h1>Explanation of formatting element</h1>
8. <p><strong>This is an important content</strong>, and this is normal content</p>
9. </body>
10. </html>
2) Italic Text
HTML <i> and <em> formatting elements
The HTML <i> element is physical element, which display the enclosed content in
italic font, without any added importance. If you write anything within
<i>............</i> element, is shown in italic letters.
See this example:
1. <p> <i>Write Your First Paragraph in italic text.</i></p>
Output:
Write Your First Paragraph in italic text.
The HTML <em> tag is a logical element, which will display the enclosed content in
italic font, with added semantics importance.
See this example:
1. <p><em>This is an important content</em>, which displayed in italic font.</p>
Output:
This is an important content, which displayed in italic font.
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>formatting elements</title>
5. </head>
6. <body>
7. <h1>Explanation of italic formatting element</h1>
8. <p><em>This is an important content</em>, which displayed in italic font.</p>
9. </body>
10. </html>
3) HTML Marked formatting
If you want to mark or highlight a text, you should write the content within
<mark>.........</mark>.
See this example:
1. <h2> I want to put a <mark> Mark</mark> on your face</h2>
Output:
I want to put a Mark on your face
4) Underlined Text
If you write anything within <u>.........</u> element, is shown in underlined text.
See this example:
1. <p> <u>Write Your First Paragraph in underlined text.</u></p>
Output:
Write Your First Paragraph in underlined text.
5) Strike Text
Anything written within <strike>.......................</strike> element is displayed with
strikethrough. It is a thin line which cross the statement.
See this example:
1. <p> <strike>Write Your First Paragraph with strikethrough</strike>.</p>
Output:
Write Your First Paragraph with strikethrough.
6) Monospaced Font
If you want that each letter has the same width then you should write the content
within <tt>.............</tt> element.
Note: We know that most of the fonts are known as variable-width fonts because
different letters have different width. (for example: 'w' is wider than 'i'). Monospaced
Font provides similar space among every letter.
See this example:
1. <p>Hello <tt>Write Your First Paragraph in monospaced font.</tt></p>
Output:
Hello Write Your First Paragraph in monospaced font.
7) Superscript Text
If you put the content within <sup>..............</sup> element, is shown in superscript;
means it is displayed half a character's height above the other characters.
See this example:
1. <p>Hello <sup>Write Your First Paragraph in superscript.</sup></p>
Output:
Hello Write Your First Paragraph in superscript.
8) Subscript Text
If you put the content within <sub>..............</sub> element, is shown in subscript ;
means it is displayed half a character's height below the other characters.
See this example:
1. <p>Hello <sub>Write Your First Paragraph in subscript.</sub></p>
Output:
Hello Write Your First Paragraph in subscript.
9) Deleted Text
Anything that puts within <del>..........</del> is displayed as deleted text.
See this example:
1. <p>Hello <del>Delete your first paragraph.</del></p>
Output:
Hello
10) Inserted Text
Anything that puts within <ins>..........</ins> is displayed as inserted text.
See this example:
1. <p> <del>Delete your first paragraph.</del><ins>Write another paragraph.</ins></
p>
Output:
Delete your first paragraph.Write another paragraph.
11) Larger Text
If you want to put your font size larger than the rest of the text then put the content
within <big>.........</big>. It increase one font size larger than the previous one.
See this example:
1. <p>Hello <big>Write the paragraph in larger font.</big></p>
Output:
Hello Write the paragraph in larger font.
12) Smaller Text
If you want to put your font size smaller than the rest of the text then put the content
within <small>.........</small>tag. It reduces one font size than the previous one.
See this example:
1. <p>Hello <small>Write the paragraph in smaller font.</small></p>
Output:
Hello Write the paragraph in smaller font.
HTML Heading
A HTML heading or HTML h tag can be defined as a title or a subtitle which you
want to display on the webpage. When you place the text within the heading tags
<h1>.........</h1>, it is displayed on the browser in the bold format and size of the text
depends on the number of heading.
There are six different HTML headings which are defined with the <h1> to <h6> tags,
from highest level h1 (main heading) to the least level h6 (least important heading).
h1 is the largest heading tag and h6 is the smallest one. So h1 is used for most
important heading and h6 is used for least important.
Headings in HTML helps the search engine to understand and index the
structure of web page.
Note: The main keyword of the whole content of a webpage should be display by
h1 heading tag.
See this example:
1. <h1>Heading no. 1</h1>
2. <h2>Heading no. 2</h2>
3. <h3>Heading no. 3</h3>
4. <h4>Heading no. 4</h4>
5. <h5>Heading no. 5</h5>
6. <h6>Heading no. 6</h6>
Output:
Heading no. 1
Heading no. 2
Heading no. 3
Heading no. 4
Heading no. 5
Heading no. 6
Heading elements (h1....h6) should be used for headings only. They should not
be used just to make text bold or big.
o HTML headings can also be used with nested elements. Following are
different codes to display the way to use heading elements.
Example:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Heading elements</title>
5. </head>
6. <body>
7. <h1>This is main heading of page. </h1>
8. <p>h1 is the most important heading, which is used to display the keyword of pag
e </p>
9. <h2>This is first sub-heading</h2>
10. <p>h2 describes the first sub heading of page. </p>
11. <h3>This is Second sub-heading</h3>
12. <p>h3 describes the second sub heading of page.</p>
13. <p>We can use h1 to h6 tag to use the different sub-heading with their paragraphs
if
14. required.
15. </p>
16. </body>
17. </html>
Output:
HTML Paragraph
HTML paragraph or HTML p tag is used to define a paragraph in a webpage. Let's
take a simple example to see how it work. It is a notable point that a browser itself
add an empty line before and after a paragraph. An HTML <p> tag indicates starting
of new paragraph.
Note: If we are using various <p> tags in one HTML file then browser
automatically adds a single blank line between the two paragraphs.
See this example:
1. <p>This is first paragraph.</p>
2. <p>This is second paragraph.</p>
3. <p>This is third paragraph.</p>
Output:
This is first paragraph.
This is second paragraph.
This is third paragraph.
Space inside HTML Paragraph
If you put a lot of spaces inside the HTML p tag, browser removes extra spaces and
extra line while displaying the page. The browser counts number of spaces and lines
as a single one.
1. <p>
2. I am
3. going to provide
4. you a tutorial on HTML
5. and hope that it will
6. be very beneficial for you.
7. </p>
8. <p>
9. Look, I put here a lot
10. of spaces but I know, Browser will ignore it.
11. </p>
12. <p>
13. You cannot determine the display of HTML</p>
14. <p>because resized windows may create different result.
15. </p>
Output:
I am going to provide you a tutorial on HTML and hope that it will be very beneficial
for you.
Look, I put here a lot of spaces but I know, Browser will ignore it.
You cannot determine the display of HTML
because resized windows may create different result.
As you can see, all the extra lines and unnecessary spaces are removed by the
browser.
How to Use <br> and <hr> tag with paragraph?
An HTML <br> tag is used for line break and it can be used with paragraph elements.
Following is the example to show how to use <br> with <p> element.
Example:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. </head>
5. <body>
6. <h2> Use of line break with pragraph tag</h2>
7. <p><br>Papa and mama, and baby and Dot,
8. <br>Willie and me?the whole of the lot
9. <br>Of us all went over in Bimberlie's sleigh,
10. <br>To grandmama's house on Christmas day.
11. </p>
12. </body>
13. </html>
Output:
An HTML <hr> tag is used to apply a horizontal line between two statements or two
paragraphs. Following is the example which is showing use of <hr> tag with
paragraph.
Example:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. </head>
5. <body>
6. <h2> Example to show a horizontal line with paragraphs</h2>
7. <p> An HTML hr tag draw a horizontal line and separate two paragraphs with that
line.<hr> it will start a new paragraph.
8. </p>
9. </body>
10. </html>
Output:
