Tags for Text Content
The contents of the web page can be organized using various tags according to different styles.
<p> tag functions as a container for paragraphs. The content displayed contains line spacing between paragraphs. The HTML code in the below example demonstrates the usage of <p> tag.
[html]
<html>
<head>
<title>Paragraph Tag Program</title>
</head>
<body>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p>Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
<p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</body>
</html>
[/html]
In the above HTML code, three <p> tags are used and the output is shown below:
The video below demonstrates the complete working of HTML Content tags
<pre> tag is for preformat, it displays the text in the web browser exactly as it is typed. Note that the web browser ignores more than one whitespace, tab spaces, and line breaks. The HTML code below contains text content inside single <p> paragraph tag on different lines. As noted above the content displayed on the web browser will be on a single line even though the code contains text content on different lines since the web browser ignores newline characters. The HTML code below demonstrates the content with line breaks and without <pre> preformat tag:
[html]
<html>
<head>
<title>Paragraph Tag with Newline Characters</title>
</head>
<body>
<p>Lorem Ipsum is simply
dummy text of the printing
and typesetting industry.</p>
</body>
</html>
[/html]
The output of the above HTML code without <pre> preformat tag is shown below. It is observed that even though the content is on different lines in the HTML code but it is displayed in a single line on the web browser.
Let us see the same text content using <pre> tag. In the HTML code below, instead of using the <p> para tag, <pre> preformat tag is used:
[html]
<html>
<head>
<title>Preformat Tag</title>
</head>
<body>
<pre>Lorem Ipsum is simply
dummy text of the printing
and typesetting industry.</pre>
</body>
</html>
[/html]
The Output of the above HTML code demonstrating <pre> preformat tag is shown below, it is observed that the text content displays in the web browser are exactly as it is typed in the HTML source code.
<hr> tag is used to create a horizontal line called horizontal rule in the web page. Note that the <hr> tag does not have its corresponding closing tag. Therefore it is recommended to use <hr />, where “/” before closing angular brackets signifies that the tag is closed. The HTML code below demonstrates the use of <hr> horizontal rule tag:
[html]
<html>
<head>
<title>Horizontal Rule Tag</title>
</head>
<body>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<hr />
<p>Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
<hr />
<p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
<hr />
</body>
</html>
[/html]
In the above HTML code, after the close of </p> tag, the <hr /> tag is used. The output of the above code in the web browser is shown below:
It can be observed that a horizontal line appears after a paragraph when <hr /> is used.
<br> tag is used to create a line break in the web page. When the <br> tag is encountered the content following the <br> tag will be displayed on the next line. Note that the <br> tag does not have its corresponding closing tag. Therefore it is recommended to use <br />, where “/” before closing angular brackets signifies that the tag is closed. The HTML code below demonstrates the use of <br> break tag:
[html]
<html>
<head>
<title>Break Tag</title>
</head>
<body>
<p>Lorem Ipsum is simply <br/>
dummy text of the printing <br />
and typesetting industry.</p>
</body>
</html>
[/html]
In the above HTML code, each line ends with <br /> break tag and the output of the above HTML code is shown below:
It is observed that even though the entire content is within <p> para tag but since each line has a <br> tag at the end, the content following the <br> tag is displayed on the next line.
<b> and <strong> tags are used to display the content in bold. The HTML code to demonstrate the use of <b> and <strong> tag is given below, where the text “dummy text” and “printing” is within <b> and <strong> tags respectively.
[html]
<html>
<head>
<title>Bold and Strong Tag</title>
</head>
<body>
<p>Lorem Ipsum is simply <b>dummy text</b> of the <strong>printing</strong> and typesetting industry.</p>
</body>
</html>
[/html]
The output of the above code is shown below, where “dummy text” and “printing” is displayed in bold:
<i> and <em> tags is used to display the content in italics or emphasise the content. The HTML code to demonstrate the use of <i> and <em> tag is given below where the text “dummy text” and “printing” is within <i> and <em> tags respectively.
[html]
<html>
<head>
<title>Italics and Emphasise Tag</title>
</head>
<body>
<p>Lorem Ipsum is simply <i>dummy text</i> of the <em>printing
</em> and typesetting industry.</p>
</body>
</html>
[/html]
The output of the above code is shown below where “dummy text” and “printing” is displayed in italics:
There may be some content such as an equation to be displayed which consist of subscript or superscript. To achieve this we use <sub> and <sup> tags respectively. For example, let us consider the equation given below:
The HTML code given below demonstrate the use of <sub> subscript and <sup> superscript tag:
[html]
<html>
<head>
<title>Superscript and Subscript Tag</title>
</head>
<body>
<p>
Equation: z = y3 + x2
</p>
<p>
Equation: z = y<sup>3</sup> + x<sub>2</sub>
</p>
</body>
</html>
[/html]
The output of the above code is shown below where “3” is within <sup> superscript tag and “2” is within <sup> superscript tag:
Note that the tags in the web page are and can be nested, but the tag which opens last needs to be closed first in the sequence.
The HTML code given below demonstrate nesting of <b> and <i> tags:
[html]
<html>
<head>
<title>Nesting of Tags</title>
</head>
<body>
<p>Lorem Ipsum is simply <b>dummy text</b> of the <b><i>printing</i></b> and typesetting industry.</p>
</body>
</html>
[/html]
The output of the above HTML code for nesting of tags is shown below:
Character Entities
There may be situations where some special characters such as “<“, “>” etc. in the content that need to be displayed on the web page. The web browser will identify the characters “<” and “>” to be part to HTML tag since “<” and “>” signifies HTML Tag and does not display the content. To overcome the problem caused by the few characters that have special meaning in HTML as seen in the above example, we use Character Entities to display special characters. The list of character entities are given below:
The HTML code given below demonstrates the use of Character Entities:
[html]
<html>
<head>
<title>Character Entities</title>
</head>
<body>
<p>This is sample to test if the condition 2<a>3 satisfies</p>
<p>This is sample to test if the condition 2 < a > 3 satisfies</p>
</body>
</html>
[/html]
In the above HTML code on line 6, there is content “2<a>3” which is a mathematical equation, but the web browser interprets anything between “<…>” as a tag and will not display the content within < and >. Therefore character entities “<” and “>” is used in case of “<” and “>” characters respectively. The output of the above HTML code is shown below:
Comments: The HTML code or document may contain Comments which can be added using <!– and –> tags. Note that the comments are ignored by the web browser and used for documentation purpose only. The HTML code given below demonstrates the use of comments tag.
[html]
<html>
<!– This is start of Header Information –>
<head>
<title>Comments Tag</title>
</head>
<!– This is start of body content –>
<body>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p>Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
</body>
</html>
[/html]
The output of the above HTML code is shown below:
<blockquote> tag is used to indent the content from left and right and adds a blank line above and below. The HTML code given below demonstrates the use of <blockquote> tag.
[html]
<html>
<head>
<title>Blockquote Tag</title>
</head>
<body>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<blockquote>Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </blockquote>
<p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</body>
</html>
[/html]
The output of the above HTML code is shown below:
Heading Tags are available in six levels of importance from <h1> to <h6>. The HTML code given below demonstrates the use of <h1> to <h6> tags.
[html]
<html>
<head>
<title>Heading Tags</title>
</head>
<body>
<h1>This is Heading 1</h1>
<h2>This is Heading 2</h2>
<h3>This is Heading 3</h3>
<h4>This is Heading 4</h4>
<h5>This is Heading 5</h5>
<h6>This is Heading 6</h6>
</body>
</html>
[/html]
The output of the above HTML code is shown below:
