fbpx
April 2, 2020
HTML elements

Tutorial #3 | Understanding the HTML Elements and Their Importance

Hello! Welcome back. In this lesson we are going to be looking at HTML elements and their importance. From the previous lesson we discussed about HTML tags and tags are quite similar to elements. if you are yet to check on that please use the link below

READ PREVIOUS LESSON ON: Tutorial #2 | Understanding The HTML Basic Tags and Their Importance

What is an HTML element?

An HTML element is a tag combo with open and closing tags for example <p> & </p>, <h1> & </h1> etc. Most HTML elements have their content written in between them. For example

Including the sentence “This is a clear looking piece of writing” at the paragraph section of the HTML document looks like this

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



        <p>This is a clear looking piece of writing</p>
     

    
</body>
</html>

Another Example of an html element is the heading element <h1> &</h1> …..</h6> & </h6>

Including the sentence “This is a clear looking piece of writing” at the heading section of the HTML document looks like this

<!DOCTYPE html>
<html lang="en">
<head>
    
</head>
<body>
        <h2>This is a clear looking piece of writing</h2>

    
</body>
</html>

HTML Tag vs. HTML Elements

So did you notice any difference between HTML Tags and HTML elements? Well! An HTML element is clearly constructed with a starting opening HTML tag. And if it contains other content it must end with a closing HTML tag. For example using <h2> & </h2>

<!DOCTYPE html>
<html lang="en">
<head>
    
</head>
<body>
        <h2>This is a clear looking piece of writing</h2>

    
</body>
</html>

More examples of HTML elements with their starting and closing tags

START TAG CONTENT BETWEEN THE TAG CLOSING OR END TAG
<head> This is the head content that contains other content </head>
<body> This is the body content </body>
<p> This is the paragraph content section </p>
<h1> This is the heading content section </h1>
<div> This is the division content section </div>

Nested HTML Element

In nested HTML Element we get to understand that HTML elements can be placed in between other HTML elements. For example, if we intend underlining a section of a paragraph sentence, we can easily achieve this result using an Element that helps us underline e.g. <u> &</u>. we place this element in between the paragraph elements.

EXAMPLE

If we intend underlining the bold section of this below sentence we simply make use of the underling element as shown 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.”

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

Result on web browser

This showed up in this longer form because we didn’t make use of the break tag but you can simply see that the HTML bold elements were placed between the HTML paragraph element

Conclusion

Now you understand the basic difference between the Elements and Tags and you are really doing great. Lets move on to the next tutorial on HTML ATTRIBUTES

Leave a Reply

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