HTML5 Basics Day-2

AllJobsInfo

Administrator
Staff member
HTML5 Day2.jpg

Break Tag(<br />)​

It is used to shift the text or anything which is following to the next line from start position. This is an example self enclosing tag or void tag which does not have two tags as opening tag and closing tag. Also it doesn't contain any content.

<!DOCTYPE html>
<html>

<head>
<title>Break Tag Example</title>
</head>

<body>
<p>The usage of Break Tag is<br />
breaking the content to the<br />
next line as shown here<br />
Hope you understand</p>
</body>

</html>
The output is as follows:

The usage of Break Tag is
breaking the content to the
next line as shown here
Hope you understand

Horizontal Line Tag(<hr>)​

To draw a horizontal line , we use <hr> tag which draws a horizontal line. Also it starts from the next line from start position to the end. Wherever we use it breaks to the next line and draws the horizontal line from the start position to the end position of the line.
<!DOCTYPE html>
<html>

<head>
<title>Horizontal Line <hr> Example</title>
</head>

<body>
<p>This is paragraph 1 above the line</p>
<hr />
<p>This is paragraph 2 below the line</p>
</body>

</html>
output is as follows:

This is paragraph 1 above the line

This is paragraph 2 below the line


One More Example:

<!DOCTYPE html>
<html>

<head>
<title>Horizontal Line Second Example</title>
</head>

<body>
<p>Hello every one <hr /> I want to take some class on <hr>
what the he... why the line <hr>breaks... the flow is breakinggg hmmm!!!</p>
</body>

</html>
Output is as follows:
Hello every one

I want to take some class on

what the he... why the line

breaks... the flow is breakinggg hmmm!!!


Center <center> Tag​

To make the content center aligned we use this tag .

Example of <center> Tag:

<!DOCTYPE html>
<html>

<head>
<title>Center <center> Tag Example </title>
</head>

<body>
<p>This line starts from the first position.</p>
<center>
<p>This line is in the center aligned.</p>
</center>
</body>

</html>
The Output is as follows:

This line starts from the first position.
This line is in the center aligned.

Preserve Formatting <pre> Tag​

When we want to display the content as it is in the browser even if it contains number of spaces in between the words, then we use <pre> tag. Any content in between <pre> and </pre> will be displayed as it is in the browser.

Note : However we can't show html tags as it is even it resides in <pre> and </pre>.

<!DOCTYPE html>
<html>

<head>
<title>Preserve Formatting <pre> Tag Example</title>
</head>

<body>
<pre>
Hi This is Ram.
Hello All, Please Do Practice daily.

Thanking You,
</pre>
</body>

</html>
The Output is as follows:

Hi This is Ram.
Hello All,
Please Do Practice daily. Thanking You,
 
Top