Lesson 3 – html Basic Tags

admin

In this chapter, we will learn all html basic tags that are the backbone of html language along with html interview questions and practice exercise.

  • Heading Tag :

Any document is incomplete without proper headings. In a html webpage, heading tags are represented by <h1>, <h2>, <h3>, <h4>, <h5> and <h6>. Where h1 is the most bigger in size and h6 is smallest. Example is explained below:

<!DOCTYPE html>
<html>
<title> Heading Example </title>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>

The result will be displayed as follows

 

This is heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5
This is heading 6

 

  • Paragraph Tag:

Paragraph tags are used to add paragraphs in a document.  Where, opening tag is written like <P> and closing tag is written like </P>.  Example of paragraph tag is explained below:

<!DOCTYPE html>
<html>
<heading>
<title> Paragraph Example </title>
</heading>
<body>
<p>First Paragraph</p>
<p>Second Paragraph</p>
<p>Third Paragraph</p>
</body>
</html>

The result will be displayed as

  Paragraph Example

First Paragraph

Second Paragraph

Third Paragraph

 

  • Line Break Tag:

We use line break tag to start a new line in a html webpage. Unlike other html tags, they doesn’t require a closing tag and is written like <br />. The line break tag has a space after br followed by forward slash (/).  Example of line break tag is explained below:

<!DOCTYPE html>
<html>
<heading>
<title> Line Break Example </title>
</heading>
<body>
<p>Hi, <br />How are you. <br />Regards <br />XYZ</p>
</body>
</html>

The result will be displayed as

  Line Break Example

Hi,
How are you.
Regards
XYZ

 

  • Center Alignment Tag:

We use center alignment tags to center align any tex in html web page.  Opening tag is written like <Center> and a closing tag is written like </Center>. Example is explained below:

<!DOCTYPE html>
<html>
<heading>
<title> Center alignment example </title>
</heading>
<body>
<p>Text not in Center</p>
<p> <center>Text  in Center </center></p>
</body>
</html>

The result will be displayed as:

  Center alignment example

Text not in Center

Text in Center

  • Link Tag:

    We use link tags to add a link of an other webpage. Opening and closing tags are represented  like <a> and </a>. Example of link tag is explained below:

<!DOCTYPE html>
<html>
<heading>
<title> Link Tag example </title>
</heading>
<body>
<a href=”http://freetutorialpoint.com”>This is a link</a>
</body>
</html>

The result will be displayed as:

  Link Tag example This is a link

Chapter Summary:

  • Use <h1>, <h2> …..<h6> tags to add heading to a page.
  • Use <p> tag to add paragraphs.
  • Use <br />  tag to start a new line.
  • Use <centre> tag to centre alignment any text.
  • Use <a> tag to insert a linkl.

Interview question:

  • Do we have to type all tags in lower case only?

It doesn’t make any difference weather you type tags in upper case or lower case. But however, some of the browsers doesn’t support upper case tags. So an ideal practice should be to write them in lower case only.

 Practice Exercise:

<!DOCTYPE html>
<html>
<heading>
<title>Practice Exercise</title>
</Heading>
<body>
<p>Hello, Learn free html at www.freetutorialpoint.com</p>
</body>
</html>

In above html code:

  • Add a heading ‘HTML Tutorial’ to the above html page.
  • Break text at  ‘Hello’.
  • Center align all paragraph text.
  • Add a link to text www.freetutorialpoint.com.
Click here to practice above exercise in real time HTML code editor

One thought on “Lesson 3 – html Basic Tags”

Comments are closed.