Welcome to compeducational.com: Presentation Tags in HTML

HTML provides some Presentation tags that are used to enhance the appearance of the text in a web page. Let's learn some of the presentation tag :

<FONT> Tag

This is a container tag, used to change the font size, colour and font face in an HTML web page. It uses three attributes COLOR, SIZE and FACE followed by an equal (=) sign and a value.

Color attribute is used to change the color of the text given. The color attribute uses name of the colour or Hexadecimal RGB values.

Syntax to change the color of the text is

<FONT COLOR = "Color Name"> TEXT </FONT>

For ex <FONT COLOR = "Purple"> Welcome to my first web page </FONT>

Size attribute is used to change the size of the text given. We can give the size value between 1 to 7 only. The regular font size used in HTML web page for writing paragraph is 3.

Syntax to change the color of the text is

<FONT SIZE = +1> TEXT </FONT>

The above syntax will change the font size one time larger than the regular size which is 3, means the font size becomes 4 after changing. In each one time larger the text becomes 20% larger than the previous text.

Similarly if we use <FONT SIZE = -1> TEXT </FONT>

The text will change into one size smaller (20%) than regular size (3), means the font size will be 2 after changing.

Face attribute is used to change the typeface of the text given in block of <FONT> tag.

We can give more than one choices (Name of font faces) separated by comma "," in the syntax. In this case browser will search the first font face, if it available then browser uses this font only otherwise it looks for the second choice of font face and in same manner it searches the third font face. If all the font faces are unavailable then browser uses its by default font face.

Syntax is

<FONT FACE= "Algerian", "Times New Roman", "Arial"> TEXT </FONT>

For ex. <FONT COLOR = "Algerian", "Times New Roman", "Arial"> Welcome to my first HTML Document</FONT>

Now type the following codes in a text editor like notepad and see the output in browser.

<html>

<head>

<title> MY FIRST WEB PAGE </title>

</head>

<P>

<font face = "Algerian", "Times New Roman" size = +2 color = "purple"> Welcome to my first HTML Document

</font>

</p>

</html>

In Notepad++

In Browser

In above example the font face becomes Algerian(In Algerian font face the text appears only in upper case), size is 2 times larger than the default size and text colour is purple.

Try above program yourself Try it yourself editor


Code <html> <head> <title> MY FIRST WEB PAGE </title> </head> <P> <font face = "Algerian", "Times New Roman" size = +2 color = "purple"> Welcome to my first HTML Document </font> </p> </html>	Output

<SMALL> Tag

This is also a container tag used to reduce the size of the text given with this tag. It reduces one time than the previous size or by default size. It works like <Font> tag with "Size" attribute.

The syntax is

The <small> tag can be nested to display the text smaller than previous.

<small> Welcome <small> Welcome </small></small>

<BIG> Tag
This is a container tag used to enlarge the size of the text given with this tag. It enlarges one time than the previous size or by default size. It works like <Font> tag with "Size" attribute.

The syntax is

The <big> tag can be nested to display the text smaller than previous.

<big> Welcome <big> Welcome </big></big>

In Notepad++

In Browser

Try above program yourself Try it yourself editor


Code <html> <head> <title> MY FIRST WEB PAGE </title> </head> <small> Welcome <small> Welcome </small></small><br> <big> Welcome <big> Welcome </big></big> </html>	Output

<HR> Tag

This is an empty tag, used to add shaded horizontal line across a web page. HR stands for horizontal rule. It is generally used to separate two different items in a document.

The following attributes can be used along with this tag to enhance its appearance.

Size
Noshade
Width
Align
Color

Size Attribute : It is used to set the thickness of the line in pixel. The default size is 2.

Syntax to use the size attribute of <HR> tag is as follow :

Noshade Attribute : This attribute is used to remove the shade effect from the line. It produces a grey line without any shade. Without Noshade attribute a line appears as filled in or 3D shade effect. For a flat, 2D line we add Noshade attribute.

The syntax is

Width Attribute : This attribute is used to set the width of a line in pixel or in percentage.

The syntax is

<HR Width = "value in pixel" or "value in percentage"

Align Attribute : This attribute is used to align the horizontal line at the left, center or right in browser's windows. By default the line is center aligned and it covers up the entire width of page. But if line width is reduced with <HR> tag and Width attribute then we can see the effect of the alignments.

The syntax is :

COLOR Attribute :

This attribute is used to set the colour of the line.

The syntax is

In Notepad++

In Browser

See in above example size attribute of <HR> tag is 25 so line size/thickness appears in browser is 25 (this is thicker than normal line) The value of width attribute is given 30%, this is the width of the line, normally it touches the browser window's left to right edge. But here it appears as short line, this is 30% width. The value of align attribute is given center, so line appears in browser window in center and the value of color attribute is given red. so, colour of the line is red. In this way you can do any experiment with <HR> tag or with a line in an HTML Document.

Try above program yourself Try it yourself editor


Code <html> <head> <title> MY FIRST WEB PAGE </title> </head> <HR size="25" Align = "center" Width = "35%" color="red"> </HR> </html>	Output

Comments Tag : Comment tag is used to add remarks or comments in editor window but it is not executed by the browser. It only displayed in the source program as it is.

It is used to add any additional information if more than one people are making the web pages or a new comer has joined. The comments are written within angular braces <>, starts with !(exclamation sign) and - (dash).

The syntax is

<!-The comment is given by Mr. Robinson->

<!- This program is about HTML->

<!-The last update date is 14.06.2023->

In Notepad++

In Browser

In above example the comments written between <!- and -> are not executed by browser windows. It is displayed only in text editor or source program.

Try above program yourself in try it editor.

Heading Tags : These are container tags. These tags are used to add headings of the document. Heading Tags may be used between <H1> to <H6>. So we can add six levels of headings for one HTML document.

Headings appears in larger and bolder font than the normal text size. The heading written between <H1> to </H1> tag appears as largest size heading and heading between <H6> to </H6> appears as smallest size heading. The other headings' size appear between the sizes of H1 and H6.

The syntax is

<H1> Heading1 </H1>

<H2> Heading1 </H2>

<H3> Heading1 </H3>

<H4> Heading1 </H4>

You can use Align attribute with<H> tag to show the heading in left, right or center alignment.

<H1 Align = "left"> Document </H1>

<H1 Align = "right"> Document </H1>

<H1 Align = "center"> Document </H1>

In Notepad++

In Browser

Here headings are given with center alignment. So these are in the centers of the document.

Try yourself Try it yourself editor


Code <html> <head> <title> MY FIRST WEB PAGE </title> </head> <body> <H1 Align = "center"> HTML </H1> <H1 Align = "center"> Attributes in HTML </H1> <p> HTML is not a programming language, It is a markup language. </p> </body> </html>	Output

Character Formatting Tags : In HTML, there are many character formatting tags which are also called font-style tags. These tags are container type and they changes the appearance of the text with their predefined effects.

Some most commonly character formatting tags are :

<B> or <STRONG> The Bold tag
<I> or <EM> The Italic tag
<U> The Underline tag
<S> or <Strike> The strikethrough tag
<SUP> The Superscript Tag
<SUB> The Subscript Tag

<B> or <STRONG> tag makes the text bold. The syntax is

For ex. In the text "Welcome to my first web page" make "web page" bold.

The syntax is

Welcome to my first <B> web page </B>

Now text appears as "Welcome to my first web page"

<I> or <EM> tag makes the text italic. The syntax is

In the text "Welcome to my first web page" make "web page" italic.

The syntax is

Welcome to my first <I> web page </I>

Now text appears as "Welcome to my first web page"

<U> tag underlines the text. The syntax is

In the text "Welcome to my first web page" make "web page" underlined.

The syntax is

Welcome to my first <U> web page </U>

Now text appears as "Welcome to my first web page"

<S> or <Strike> tag gives strikethrough effect to the blocked text. The syntax is <S> or <Strike> text </S>or</Strike>

show the text "Welcome to my first web page" in strikethrough effect.

The syntax is

Welcome to my first <S> "Welcome to my first web page" </S>

Now text appears as "~~Welcome to my first web page~~".

<SUP> tag gives superscript effect to the text/numbers.

The syntax is <SUP> text </SUP>

In numeric "42 = 16", show 2 as superscript.

The syntax is

4 <SUP>2</SUP> = 16

Now the numbers appear as 4² = 16.

<SUB> tag gives subscript effect to the text/numbers.

The syntax is <SUB> text </SUB>

In equation"6HCl + 2Al = 2AlCl3 +3H2", show 3 in Cl and 2 in H as subscript.

The syntax is

6HCl + 2Al = 2AlCl <SUB>3</SUB> + 3H<SUB>2</SUB>

Now the equation appears as 6HCl + 2Al = 2AlCl₃ + 3H₂

Now let's try in text editor

In Notepad++

In Browser

Try yourself Try it yourself editor


Code <html> <head> <title> MY FIRST WEB PAGE </title> </head> <body> <H1 Align = "center"> <u>HTML</u> </H1> <H1 Align = "center"><strike>Attributes in HTML</strike> </H1> <p> HTML is not a programming language like <b>c, c++ or Python</b>, It is a <i>markup language. </i></p> 4<sup>2</sup> = 16<br> 6HCl + 2Al = 2AlCl<sub>3</sub> + 3H<sub>2</sub> </body> </html>	Output

<P> Tag : This is paragraph tag used to begin a paragraph in a web page. This is container tag. When the <P> Tag is used the text moves into the next line skipping one line from the previous line.

Syntax is : <P> Paragraph content </P>

For ex. The Thirsty Crow <P> Once upon a time there was a thirsty crow in a forest. </P>

Align Attribute : We can use Align attribute with <P> tag for horizontal alignment of the text, it is left, right, center or justified.

for ex. <P Align = "left"> Paragraph content </P>

<BR> Tag : This is an empty tag used to give a line break. It starts a new line from just after the left margin.

For ex. My name is Ms. Brigenja. <br> I live in India. <br> My mother tongue is Hindi.

<BLOCKQUOTE> Tag : It is a container tag. This tag is used to display the paragraph to leave blank space of two indents from side margins. The same work can also be done with <P> tag, but with <P> tag only first line is indented and with <BLOCKQUOTE> tag, all the lines of the paragraph are indented.

Syntax is :

<BLOCKQUOTE> The text to be indented </BLOCKQUOTE>

In Notepad++

In Browser

Try above program yourself in try it editor.

<PRE> Tag : It is also a container tag. It is used to display the text in a web page exactly with same font, spaces, tabs and returns as it is typed in text editor. Basically it is used to display the text in columns or in a table.

Syntax is :

<PRE> Table content </PRE>

In Notepad++

In Browser

Try above codes in Try it Editor.

TOP

Try it yourself editor


Code <html> <head> <title> MY FIRST WEBPAGE </title> </head> <BODY> <FONT SIZE="3"> <H1 Align="center"> <U> SALE REPORT </U></H1> <PRE> ZONES 2021 2022 2023 EAST 45 57 89 WEST 67 87 91 NORTH 74 76 78 SOUTH 62 86 98 </FONT> </BODY> </HTML>	Output