HTML - Elements

What is an Element in HTML?

An HTML element is a building block of a web page. It consists of a start tag, an end tag, and the content between them. In the closing tag, the element name is preceded by a forward slash as shown in below table −

Start Tag Content End Tag
<p> This is paragraph content. </p>
<h1> This is heading content. </h1>
<div> This is division content. </div>

So here <p>....</p> is an HTML element, <h1>...</h1> is another HTML element.

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.

HTML Tag vs. 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.

Nested HTML Elements

In HTML, the nested elements are created by placing one HTML element within another. The child element is nested inside the parent element. We can have multiple levels of nesting, however, it requires some guidelines to follow −

  • Every opening tag must have a corresponding closing tag.

  • The closing tag of the parent element must come after the closing tag of the child element.

  • The nested elements must be valid HTML elements.

Example

In the following example, we are nesting the italicized element (<i>...</i>) within the h1 element and underline (<u>...</u>) element within the paragraph element.

<!DOCTYPE html>
<html>
<head>
   <title>Nested Elements Example</title>
</head>
<body>
   <h1>This is <i>italic</i> heading</h1>
   <p>This is <u>underlined</u> paragraph</p>
</body>
</html>

On executing the above example, we can observe the two sentences where we have nested one HTML within another.

HTML Void Elements

In HTML, there are some elements which don’t require closing tags, such as <img />, <hr /> and <br /> elements. These are known as void elements. Also, these elements cannot have any child elements. The below table shows a list of void elements −

S.No Elements & Description
1

<img />

Used for inserting images within HTML documents.
2

<hr />

It displays a horizontal rule.
3

<br />

It is used to provide a line break.
4

<source />

It is used for embedding media resources like audio and video.

Example

The following example illustrates the use of <br> and <hr> tags.

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

On executing, the above code will produce two paragraphs, one with a line break and the other with a horizontal rule.

Mandatory Closing tag

Only the void 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.

Example

In this example, we are removing the closing tags from paragraph tag. Still, it will show the correct result.

<!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>

The above HTML code will produce two paragraphs, one with a line break and the other with a horizontal rule.

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.

Example

In the following example we have changes the For example, following example runs fine without any troubles −

<!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