HTML - Elements

HTML Elements are building block of a web page. It is used to create component for webpages. HTML documents consist of a tree of these elements and they specify how HTML documents should be built, and what kind of content should be placed within various parts of an HTML document.

What is an HTML Element?

HTML Elements are consists of a start tag, an end tag, and the content between them. HTML Element is a component of HTML document, it tells the browser how a content should be render. It contains formating instruction, semantic meaning and content.

HTML Elelement
Note: There are a few HTML elements that does not have end tag or content like <br> tag, <hr> tag, etc.

Difference Between tags & element

All the HTML elements are created using the HTML tags. But, an HTML element is defined by a pair of starting tags and closing tags. Within these tags, we place the content of the HTML document which further creates the layout and structure of the web page.

For example, <p> is the starting tag of a paragraph and </p> is closing tag of the same paragraph but <p>This is paragraph</p> is a paragraph element.

Try to click the iconrun button run button to run the following HTML code to see the output.

Examples of HTML Elements

In the bellow examples we will see Simple Element, Nested Element and Emty Element

HTML Simple Element

In this example we will create two HTML element one will header element and other one will be paragraph element.

<!DOCTYPE html>
<html>
<head>
    <title>HTML Smiple Element</title>
</head>
<body>
    <h1>This is Header Element</h1>
    <p>This is Paragrapgh Element</p>
</body>
</html>

HTML Nested Element

In this example we will creat a nested element, a parent element and two child element inside of the parent element.

<!DOCTYPE html>
<html>

<head>
    <title>HTML Nested Element</title>
</head>
<body>
    <p>
        This is parent element containing 
        <span>Child Elelement 1</span> &  
        <span>Child Elelement 2</span>.
    </p>
</body>
</html>

HTML Empty Element

In this example we will create a empty element between two simple element.

<!DOCTYPE html>
<html>
<head>
    <title>HTML Smiple Element</title>
</head>
<body>
    <h1>This is Header Element</h1>
    <hr>
    <p>This is Paragrapgh Element</p>
</body>

Mandatory Closing tag

Only the empty elements like <hr> and <br> do not require closing tags, other elements such as <p> and <h1> do. Failing to include closing tags for these elements may not result in an error, and some content may still display properly. However, never miss the closing tag as it may lead to unexpected and inconsistent results.

<!DOCTYPE html>
<html>
<body>
   <p>
       This line contains a line break tag,
       <br> hence content is visible in
       two separate lines.
   <p>
       This line is <hr>separated by a 
       horizontal rule.
</body>
</html>

Are HTML elements case-sensitive?

Yes, HTML elements are case-insensitive which means we can use both uppercase and lowercase for tag names. However, it is not a good practice as W3C recommends and demands lowercase. Hence, always try to use lowercase for the tag names.

<!DOCTYPE html>
<HTml>
<BODY>
   <P>
       HTML is not case sensitive i.e we can 
       use both upper or, lower case letters 
       in the tags.
   </p>
</BOdy>
</html>
Advertisements