fbpx
April 2, 2020
HTML basic tags learning

Tutorial #2 | Understanding The HTML Basic Tags and Their Importance

Hello welcome back! Now we will be discussing about HTML basic tags, their importance and usage. Remember in our last lesson we talked about the introductory aspect of HTML and how we could use tags in formatting our HTML document. Although we didn’t discuss much about tags we will be using this tutorial to shed more light on “HTML basic TAGS”.

Here are the list of HTML basic tags we will be discussing about:

  • The heading tag
  • The paragraph tag
  • Line break tag
  • Horizontal line Tag
  • Centering Content tag
  • Preserve content formatting tag

The Heading Tag

The heading tag is the tag holding the heading or subheading section of any HTML document. This tag comes in different levels from <h1>, <h2>, <h3>, <h4>, <h5>, <h6>. Each heading tag differs from the next in size when used. Below is an example that shows the use of all heading tags.

RESULT ON WEB BROWSER

SOURCE CODE

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

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

From the images above you can simply understand the difference in size between the different levels on heading tags when used. Heading tags always have their content in-between for example  the opening tag <h1> and the closing tag <h1/>. having “This is my header” as the title we use it this way

<h1>This is my heading section</h1>

The Paragraph Tag

The paragraph tag is the next in line after the heading tag. This tag is used in the body of HTML documents when constructing the paragraphs. The content of the paragraph is placed in between the opening (<p>) and closing (<p/>) paragraph tags.

For example

RESULT ON WEB BROWSER

SOURCE CODE

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

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

So if you intend having more than one paragraph in your web document you can easily create more using different tags

For example

Result on web browser

source code

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

    <h1>This is my heading section</h1>
    <p>This is my first paragraph </p>
    <p>This is my second paragraph </p>
    <p>This is my third  paragraph </p>
</body>
</html>

Each paragraph automatically formats and starts the next paragraph on a different line. isn’t that beautiful ?

The Line Break Tag

The line break tag popularly called line break element is used to break sentences into the next line. Maybe you have a long line of sentence and you don’t want all the words of the sentence to be on the same line. For example. Check out the sentence below

“Hypertext Markup Language is a standard markup language for web documents designed to be viewed with a web browser. It can be assisted by technologies such as Cascading Style Sheets and scripting languages such as JavaScript.”

This sentence can be broken into different lines as shown below

Result on web browser

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 <br/>
         for web documents designed to be viewed with a web browser.<br/>
          It can be assisted by technologies such as Cascading Style Sheets <br/>
           and scripting languages such as JavaScript </p>
    
</body>
</html>

The Horizontal Tag <hr>

This tag is used to place horizontal lines in between sentences for example

Result on web view

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>

Centering Content tag <center>

The centering content tag is used to place the content of a web page at the center.  The centering tag comes with an opening (<center>) and closing (</center) tag and the content to be centralized is expected to be placed in between the tags for example.

<center>
<p>Hypertext Markup Language is a standard markup language <br/>
         for web documents designed to be viewed with a web browser.<br/>
          It can be assisted by technologies such as Cascading Style Sheets <br/>
           and scripting languages such as JavaScript </p>
    
</center>

Preserve content formatting tag (<pre>)

The preserve content formatting tag is used to preserve the formatting of a text on the web document. Maybe you have a well-structured sentence and you don’t want the sentence format/structure to change, you can simply make use of a preserve formatting tag to get that done. For example

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


        </pre>



        

    
</body>
</html>

Result on web browser

This tag holds its content in-between the opening and closing tag and can be used in place of a line breaking tag.

HTML BOLD TAG <b> or <strong>

This tag is used to bold a particular sentence or word in a sentence. for example

<!DOCTYPE html>
<html lang="en">
<head>
    
</head>
<body>
        <h1>This is my heading section</h1>
        <pre>
                <p>Hypertext Markup Language is a standard markup language 
                      <b>for web documents designed to be viewed with a web browser.</b>  
                       <strong> It can be assisted by technologies such as Cascading Style Sheets </strong>   
                          and scripting languages such as JavaScript </p>


        </pre>



        

    
</body>
</html>

The <b> and <strong tags were used on different lines on the example above. check out the result below

conclusion

The tags listed above are some of the basic tags you need to know in html. A good understanding of this tags will enable you make good web page formatting and structure. Lets move on to the next topic HTML ELEMENTS

Leave a Reply

Your email address will not be published. Required fields are marked *