HTML Formatting Tags

HTML Formatting Tags:

There are different types of HTML tags are used to format the appearance of the text on your web page.

1. Create Headings - The <h1> to <h6> Elements:

Any document starts with a heading. You can use different sizes for your headings. There are 6 levels of headings available, from h1 for the largest and most important heading, down to h6 for the smallest heading. Here is an example of the code for all the headline sizes:

<h1>Level 1 Headline</h1>

<h2>Level 2 Headline</h2>

<h3>Level 3 Headline</h3>

<h4>Level 4 Headline</h4>

<h5>Level 5 Headline</h5>

<h6>Level 6 Headline</h6>

You May Also Like:

Features of HTML
Structure of HTML Document
Different Types of Lists in HTML
Tables in HTML

2. Create Paragraph - The <p> Element:

The <p> element offers a way to structure your text into paragraphs. Each paragraph of text should go in between an opening <p> and closing </p> tag as shown below in the example:

<p>Here is a paragraph of text.</p>

<p>Here is a second paragraph of text.</p>

<p>Here is a third paragraph of text.</p>

3. Create Line Breaks - The <br /> Element:

Whenever you use the <br /> element, anything following it starts on the next line. This tag is an example of an empty element, where you do not need opening and closing tags, as there is nothing to go in between them.

Note: The <br /> element has a space between the characters br and the forward slash. If you omit this space, older browsers will have trouble rendering the line break.

Example of basic HTML Program:

   <html>
   <body>
   Hello<br />
   This is an example of Line break.<br />
   Thank you<br />
   </body>
   </html>

This will produce the following result:

Hello

This is an example of a line break.

Thank you

4. Bold - <b> </b>:

The text in between the tags will be bold, and stand out against text around it, the same as in a word processor.

5. Italic - <i> </i>:

Also working the same way as a word processor, italics displays the text at a slight angle.

6. Underline - <u> </u>:

Again, the same as underline in a word processor. Note that html links are already underlined and don't need the extra tag.

7. Strike-out - <strike> </strike>:

Puts a line right through the centre of the text, crossing it out. Often used to show that text is old and no longer relevant.

8. Preformatted Text - <pre> </pre>:

Any text between the pre tags, including spaces, carriage returns and punctuation, will appear in the browser as it would in a text editor

9. Source Code - <code> </code>:

Similar to tt the text is displayed in a fixed-width font, and is commonly used to show source code. I have used it on this site, along with stylesheets, to show all tags.

10. Typewriter Text - <tt> </tt>:

The text appears to have been typed by a typewriter, in a fixed-width font. For example: This text is written using the <tt></tt> tags.

11. Block Quote - <blockquote> </blockquote>:

Defines a long quotation, and the quote is displayed with an extra wide margin on the left hand side of the block quote.

12. Small - <small> </small>:

Instead of having to set a font size, you can use the small tag to render text slightly smaller than the text around it. Useful for displaying the 'fine-print'.

13. Centre - <center> </center>:

A useful tag, as it says, it makes everything in between the tags centered (in the middle of the page).

14. Emphasis - <em> </em>:

Used to emphasize text, which usually appears in italics, but can vary according to your browser.

15. Strong Emphasis - <strong> </strong>:

Used to emphasize text more, which usually appears in bold, but can vary according to your browser.

16. <font> Tag:

The <font> is an inline element used to change font sizes, font colors and font styles of the text in your web pages. The different attributes of <font> tag are as follows:

Size: To change the font size of the text on your web pages, you simply embed the text in the FONT element and add the SIZE attribute with a value between 1 (very small) and 7 (very big) to the opening font tag.

Color: To change the text color you need to add the attribute COLOR to the opening FONT tag and assign it a value for the color. The color value can be any of the following 16 color names: black, silver, white, gray, maroon, red, blue, green, yellow, purple, fuchsia, cyan, lime, olive, navy, teal, aqua.
Instead of the color names, you can also use the hexadecimal numbers for the colors, which are specified according to the RGB value for each color. The hexadecimal numbers must be prefixed by the "#" sign. Examples: #000099 for dark blue or #FFFF99 for a faint yellow.

Face: To change the font style from the default (Times New Roman) to a different style, simply add the attribute FACE to the opening FONT tag. As value for the FACE attribute you can use any specific font name such as "verdana", "arial", "georgia", "bookman old style", "comic sans ms" and many more.

17. Escape Sequences:

The escape sequences are characters which are used to display the characters which are used by HTML as control sequences.

1)&amp -----------> This escape sequence is used for “&” symbol.

2)&lt        ---------->less than(<)
3)&st       ---------->greater than(>)
4)&quot ---------->(“   “)
5)&nbsp ---------->empty space
6)&copy ---------->copy