Welcome to the another most interactive article on HTML. In this article we will learn about html elements.
All the html documents are made up of elements. These elements are the building blocks of web page which command the browser where and what kind of contents should visible for front-end. In simple words, Html elements are defined as the collection of start tag, attributes, some content and ending tag.
Syntax
<tag name> Content </tag name>Now, let's illustrate html elements with the help of following example;
<!DOCTYPE html><html>
<head>
<title>HTML Elements Example</title>
</head>
<body>
<h1> Welcome to Answersjet</h1>
<p>All in one website for learning basics of Programming Languages, HTML, tutorial and much more..
<br>
Let's begins your creative journey with;</p>
<div style="background-color: #04ff00;">Answersjet</div>
<p> the most trusted learning platform</p>
</body>
</html>Output
In above illustration we have used all main html elements such as: <h1>...</h1> element for heading, <p>...</p> element for paragraph, <br> element for line break and <div>...</div> element for division.
Basic Elements used in HTML
In the following list, you will get to see some of the main elements which are common in all HTML documents;
| Start Tag | Content | End Tag |
|---|---|---|
| <h1> | this is heading tag. | </h1> |
| <p> | this is paragraph tag. | </p> |
| <div> | this is division tag | </div> |
| <hr> | none | none |
| <br> | none | none |
Void Elements in HTML
Void Elements are those elements which doesn't need to be closed. In simple words, elements which don't have an end tag is called void elements or empty elements or unpaired tags. For example: <hr>(used for horizontal line), <br>(used for line break) etc.
<!DOCTYPE html><html>
<head>
<title>HTML Empty Elements Example</title>
</head>
<body>
<p> This is paragraph <hr> with horizontal line break</p>
</body>
</html>Output
In this illustration we have used <hr> element to give horizontal line break on our html document.
Nested HTML elements
In html, elements can be nested (that means an element inside another element). Now let's illustrate Nested HTML elements with the help of following example;
<!DOCTYPE html><html>
<head>
<title>Nested HTML Elements Example</title>
</head>
<body>
<h1> This is first Heading</h1>
<p>This is first paragraph having nested <i>HTML elements</i></p>
</body>
</html>Output
In above illustration we have used nested elements such as: <p>.....<i>...</i>.....</p> where <p>...</p> element for paragraph and <i>...</i> element for italic text.
Conclusion
Above we have discussed about the HTML elements. All the html documents are made up of elements. These elements are the building blocks of web page which command the browser where and what kind of contents should visible for front-end. Main elements which are common in html are void elements and nested elements.