Table of Contents
Formatting Tags
Text formatting, in other words presenting the text on an HTML page in a desired manner, is an important part of creating a web page so we have to learn the Formatting Tags of HTML5. Let us understand how we can lay out of text controls its appearance on a page.
Headers
Headers are used to specify the headings of sections or sub-sections in a document. Depending on the desired size of the text, any of six available levels (<H1> to <H6>) of headers can be used. The following code shows the usage and varying size of the rendered text depending upon the tag used.
<!DOCTYPE html> <html> <head> <title>Livedu HTML5 Header Tag</title> </head> <body> <h1> Header Level 1</h1> <h2> Header Level 2</h2> <h3> Header Level 3</h3> <h4> Header Level 4</h4> <h5> Header Level 5</h5> <h6> Header Level 6</h6> </body> </html>
There is neither predefined sequence for using the different levels of the header tags nor any restrictions on which one can be used. So the user has the option of using any level of header tag anywhere in the document. The size goes in decreasing order with the increasing order of the level (i.e. From <H1> to <H6>).
Other Formatting Tags of HTML5
Let us now look at some more tags that can be used to format text. These are all given in the example shown below:
<!DOCTYPE html> <html> <head> <title>Livedu HTML5 Formatting Tags</title> </head> <body> <B> Livedu </B> provides several <I> tutorials </I> in the <B><I>Computer, </I></B> <strong><em>Mathematics </em></strong>stream. <P> One of the <I> tutorial </I> is <strong><em>HTML5 </em></strong> </P> <strong>HTML5 </strong> stands for <TT> HyperText Markup Language </TT> <BR> <S>For HTML5</S> <B> Livedu </B> is considered to be one of the premier tutorial site. <BR> <STRONG>Livedu</STRONG> believes in <STRONG><EM>Quality</EM></STRONG> education <BR> <P> According to <CITE> Livedu, </CITE> <B> HTML5<B> is one of its best tutorial offering convenient timings to the student so that s/he can pursue the course while working at a job. </P> <BLOCKQUOTE> For convenience all the tutorials offered by Livedu can be seen on its website. </BLOCKQUOTE> <HR NOSHADE> <B> Livedu contact details are : <ADDRESS> Livedu, <BR> Swamiji Road, South Habra <BR> Habra, North 24 Parganas 743263 <BR> Website : www.livedu.in </ADDRESS> </body> </html>
1. BOLD: The text can be displayed in boldface by writing it in between the <B> and </B> tags.
2. ITALICS: It starts with <I> and ends with </I> tag. It is used to display the text in italics.
3. UNDERLINE: It is used for underlining the text to be displayed. The <U> tag is used for this purpose. These tags can be nested. So in order to see the text in boldface, in italics and underlined, it should be placed between the <B><I><U> and </U></I></B> tags. Note that the closing tags are written in reverse order, because any tag used within some other tag should be closed first.
4. PARAGRAPH: If you want to display the text in the form of paragraphs, then the <P> tag should be used.
5. TT: The <TT> tag is used for displaying text in a fixed width font similar to that of a typewriter.
6. STRIKE: If you want the text to be marked with a strikethrough character, place it within the <S> and </S> tags.
7. STRONG: There are certain text-based browsers that do not render the text as boldfaced. So you can use the <STRONG> tag instead of the <B> tag. This displays the text to stand out in the most appropriate manner for the browser.
8. EM: Just as the <STRONG> tag corresponds to the <B> tag, the <EM> can be used instead of the <I> tag. The reason for using it is the same as for the <STRONG> tag. The <EM> tag is used for emphasizing the text in the manner most appropriate to the browser.
9. BR: This tag is used for inserting a line break. The text written after the <BR> tag is displayed from the beginning of the next line onwards. This tag does not need a corresponding terminating tag.
10 HR: This tag puts a horizontal line on the page. It has the following attributes:
ALIGN: It is used for aligning the line on the page. The possible values of this attribute are LEFT, RIGHT, and CENTER. It is useful when the width of the line is less than the width of the page.
NOSHADE: This attribute is used to prevent any shading effect.
SIZE: It is used for specifying the thickness of the line.
WIDTH: You can set the width of a line using this attribute. The value can be specified either in pixels or as a percentage of the width of the page, e.g., <HR WIDTH = “30%”>.
11. BLOCKQUOTE: This tag indents the left margin of the text. It is used for displaying the text as quoted text.
12. ADDRESS: This tag, as shown in Figure, displays the text in italics.
13. CITE: The text placed in between the <CITE> and </CITE> tags is rendered in italics by the browser.
PRE Tag
This tag is used to present the text exactly as written in the code, including whitespace characters. It is terminated by a </PRE> tag. Consider the example shown, to understand how this tag works.
<!DOCTYPE html> <html> <head> <title>Livedu HTML5 Pre Tags</title> </head> <body> <pre> Livedu also offers a virtual campus. Studying through the virtual campus is a new concept in the field of education. While studying through the virtual campus mode, students have access to the following learning resources and experiences: *. Satellite based interactive tele-conferencing sessions. *. Viewing recorded video sessions. *. Computer based tutorials on CD-ROM. </pre> </body> </html>
As shown in Figure, the format of the text presented in the browser remains the same as written in the code. If we do not use the <PRE> tag, the browser condenses the white space when presenting the text on the web page.
These are the Formatting Tags of HTML5.
Related Topic:
;