In this tutorial, you'll learn about HTML elements.
In this tutorial, you learn about HTML elements, and if you have any doubt then comment.
HTML Elements
Html elements are the collection of open tag, close tag, and content present between both tags.
These all 3 tags make an element of HTML. The difference in opening tag and the closing tag was the closing tag is preceding with forward slash.
Here I shared the examples HTML elements in table form. so, it is easy to understand the difference between opening tag, closing tag, and content.
| Opening Tag | Content | Closing tag |
| <title> | Codeamy: Learn HTML | </title> |
| <h1> | Explain the HTML Elments | </h1> |
Nested HTML Elements
HTML elements nesting contains one element contains another element inside it, and the outer element is known as parents element, and the element present inside the parent is called child html element. I think this definition is complex. so, let try with an example.
<!DOCTYPE html>
<html>
<body>
<h1>Heading</h1>
<p>Paragraph Content</p>
</body>
</html><body> tag is child element of <html> element but parent of <h1> and <p> elements.
<h1> tag is the child element of body and it has no other element present between opening and closing tags.
<p> tag has same condition as <h1> tag.
In the above paragraphs, you will learn elements consists of opening and closing tags but html has some elements without closing tags and these tags are known as empty tags in html i.e. <br> tag. These empty tags cannot have any child.
What happens if HTML tag is not closed?
Not closing HTML tag and never ended tag are same thing in which we start opening tag but not end tag with closing tag and sometimes it produces results as expectation but sometimes not produce as expected. It is not a good practice if you open the tag but close it. This produces renders problem when the browser interprets it and output is not expectable.
All tags without empty tags, you have to close all tags using the closing tags.
Below example, <h1> tag is not closing and <p> tag is close but <h1> is not close due to this paragraph tag also adapt the h1 property. The output is unexpected.
<!DOCTYPE html>
<html>
<body>
<h1>Heading
<p>Paragraph Content</p>
</body>
</html> |
Happy Coding 😊
Tags:
html
