html

HTML Elements

HTML elements are primary components of any HTML document. The architecture of any HTML document is dependent on the the HTML elements as they provide a semantic, well-structured, and well-formatted appearance.

These elements are components of the HTML document that tell the browser how to interpret the data from the HTML document. This article will deliver a comprehensive overview of HTML elements.

Starting and Ending HTML Elements

In the HTML document, all the content is written between the tags, let’s say start tag and end tag. These elements are also known as paired elements. Elements name are written within the <>brackets.

<start tag>content</end tag>

For example, the below given code utilize different elements and each element has a starting and ending tag:

<!DOCTYPE html>

<html>

  <head>

    <title>

       HTML Elements

    </title>

  </head>

   <body>

     <p>This is a paragraph</p>

     <h2>This is Heading 2 </h2>

     <script src="script.js"></script>

   </body>

</html>

To avoid unexpected outcomes always use the ending tag in every HTML document. However, it is possible that an HTML code executes successfully without the ending tag.

Unpaired HTML elements

There are numerous elements that have single tag; these elements are known as unpaired elements such as <br>element is used for line break, <image>element is used to embed an image in a document.

For example in the bellow snipped we utilize an unpaired element <hr>which will put a thematic (horizontal) break between the two paragraphs:

<body>

  <p> Frontend Development </p> Backend Development</p>

</body>

The output will verify that the <hr>element separated the two paragraphs with a horizontal line.

Nested HTML Elements

An element is said to be a nested element if it contains some other element within it.

<p>The <b>Frontend Development</b>refers to GUI</p>

We embedded the <b>element in the paragraph which will bold the specified content. The output of this example will be like this:

In the above code, we have utilized nested elements, and you must have noticed that the inner or nested element closed first.

Case Sensitivity of HTML Elements

In HTML case sensitivity doesn’t matter which means there is no such standard to write the tags in uppercase or in lowercase. However, it’s recommended that always use lowercase letters for the tags.

The below given example created two paragraph tags. The first one with lower case and the second one with the upper case:

<p> Frontend Development </p>

 <hr>

<P>Frontend Development</P>

The following output will verify that case sensitivity doesn’t matter in HTML as both these elements executed successfully:

Implementation of Multiple HTML elements

So far we have learned the basics of HTML elements. Each HTML element performs different functionalities for example <title>tag is used to add the title, <h>tag is used to add heading in any HTML document. There is a huge list of HTML elements that are used to create any web technology. Now we will describe some commonly used HTML elements along with their functionalities:

<html>it determines the entire HTML document </html>

<head>anything written within this section wouldn't appear on the document </head>

<title>add title of the document</title>

<body>it determines the body of html document </body>

<p>it will add paragraphs</p>

<style>set style of the document </style>

<h1>h1 is used to add headings</h1>

<br>it is singular tag produce line break

Conclusion

The HTML elements are the core of any HTML document. A web page can’t exist without these elements. In this article, we described the basic structure of HTML elements. Moreover, It provides information about paired, unpaired, empty, and nested elements. Lastly, a list of HTML elements is provided along with their functionalities.

About the author

Anees Asghar

I am a self-motivated IT professional having more than one year of industry experience in technical writing. I am passionate about writing on the topics related to web development.