HTML TUTORIAL

HTML BASIC TAGS, ITS IMPORTANCE AND USAGE

html tags
Written by ikenna

welcome to this tutorial on HTML basic tags, where we will be looking at the importance and usage of HTML tags. In the previous lesson on “INTRODUCTION TO HTML”, we discussed little about the HTML tags and how we could use them in formatting the web document. However, we are going to be looking deep into the uses of the HTML BASIC TAGS, and some of the tags we will be focusing on include:

  • Head tags
  • Paragraph tags
  • Line break tags
  • Horizontal tags
  • Centering tags

The HTML Head Tags

The first tags we will be looking at are the HTML head tags. They comprise of similar tags used in formatting the head section of any web document. These tags comes in different levels and are numbered from <h1>, <h2>, <h3>, <h4>,<h5>, <h6>. Each of the listed tags differ from the next by its size. The biggest of the tags is the <h1> while the smallest is the <h6> as shown below

<!DOCTYPE html>
<html lang="en">
<head>
    
</head>
<body>

    <h1>This is my h1 section</h1>
    <h2>This is my h2 section</h2>
    <h3>This is my h3 section</h3>
    <h4>This is my h4 section</h4>
    <h5>This is my h5 section</h5>
    <h6>This is my h6 section</h6>
    
</body>
</html>

RESULT ON WEB BROWSER

From the above code and image, you can simply see that highest header tag remains the <h1> tag while the smallest remains <h6> tag. Also note that the content of any header, is placed between the opening <h1> and closing tags </h1>.

The paragraph tags

The paragraph tags are used to structure paragraphs in HTML web documents. A typical paragraph tag starts with an opening tag <p> and ends with a closing paragraph tags </p>. The content of the paragraph tag is always placed in between the tags as shown below

<!DOCTYPE html>
<html lang="en">
<head>
    
</head>
<body>

    <h1>This is my head section</h1>
    <p>This is the paragraph section </p>
    
</body>
</html>

RESULT ON WEB BROWSER

Supposing there are more than one paragraphs to be inserted in a web page, you can simply use the method shown below to place them

<!DOCTYPE html>
<html lang="en">
<head>
    
</head>
<body>

    <h1>This is the head section</h1>
    <p>This is the first paragraph </p>
    <p>This is the second paragraph </p>
    <p>This is the third  paragraph </p>
</body>
</html>

RESULT ON WEB BROWSER

The Line Break Tag

The line break tag <br> is used to break long sentences into new lines. For example, if we intend breaking the below sentence into different lines , this is how we do it.

“HTML is the most popular and widely used coding language for web development and it was developed and introduced by Berners-Lee in 1991. As at 1991, the first HTML that was introduced then was tagged as HTML 2.0 and since then, there have been several modifications and advancement in the world of HTML. “

Source code

<!DOCTYPE html>
<html lang="en">
<head>
    
</head>
<body>

    <h1>This is my heading section</h1>
 <p>HTML is the most popular and widely used coding language for web development and
 it was developed and introduced by<br> 
Berners-Lee in 1991. As at 1991, the first HTML that was introduced then was tagged 
as HTML 2.0 and since then, there have <br> been several modifications and advancement in the world of HTML. </p>
    
</body>
</html>

RESULT ON WEB BROWSER

The Horizontal Tag <hr>

The horizontal tag is used to add horizontal lines to a web page. This tag is introduced with the opening tag <hr> and ends with the closing tag </hr> . Example shown below

Source code

<!DOCTYPE html>
<html lang="en">
<head>
    
</head>
<body>

    <h1>This is my heading section</h1>
    <p>Hypertext Markup Language is a standard markup language <hr/>
         for web documents designed to be viewed with a web browser.<hr/>
          It can be assisted by technologies such as Cascading Style Sheets <hr/>
           and scripting languages such as JavaScript </p>
    
</body>
</html>

RESULT ON WEB BROWSER

Centering Content tag

The centering tag is used to center the contents of a web page. This tag comes with an opening tag (<center>) and a closing tag (</center>) and the contents to be centered is expected to be rightly placed at the center of the opening and closing tags.

source code

<center>
<p>HTML is the most popular and widely used coding language for web development and it was 
developed and introduced by Berners-Lee in 1991. As at 1991, the first HTML that was introduced
 then was tagged as HTML 2.0 and since then, there have been several modifications and
 advancement in the world of HTML.</p>
    
</center>

Conclusion

The above article explains clearly how you can use the basic html tags to structure contents on your web document. If you have questions, kindly let us know using the comment section. Let moves on to the next topic on BASIC HTML ELEMENTS

About the author

ikenna

Leave a Comment