HTML Elements
An HTML element is the basic component of a web page. It is generally defined as a combination of both start and end tag. The content is placed inside these tags which can be a piece of text or another HTML tag. Remember that there are some HTML elements which are only consists of a single tag. These tags do not have any content and are known as empty or void elements. Some of the most common and notable HTML empty elements include <img />, <br /> and <hr />.
Let's have a look at the general example of an HTML element:
<tagname>The content goes here...</tagname>
From the example above it is clear that a pair of opening and closing tag makes an HTML element.
Now look at the below table to further understand HTML element using some real life examples.
| Opening Tag | Content of element | Closing Tag |
|---|---|---|
| <h1> | This is an HTML heading | </h1> |
| <p> | This paragraph is written by me. | </p> |
| <hr /> | ||
| <br /> |
Difference between HTML elements and tags
The main notable difference between an HTML element and tag is that a tag is the predefined name of an HTML element and it is enclosed inside angle brackets. Whereas the pair of start and end tag is generally known as an HTML element.
Let's understand it with the help of an example: A paragraph in HTML starts with a <p> tag and ends with a </p> tag. Here both <p> and </p> are two separate tags. Whereas if we combine these two tags and talk about them as a pair like <p>some example paragraph</p> then it is called an HTML element.
Nested HTML Elements (Elements inside an element)
In real life web page development using HTML we frequently face a situation where we need to use elements inside an element. The good news is that it is possible to use nested HTML elements inside a web page to form complex layouts. There is no such limit for how deep the hierarchy of nested elements can be. So, you can insert as many elements inside other elements as you like. But you have to take care about one thing that the element which starts first should be closed last.
Example
<!DOCTYPE html>
<html>
<head>
<title>Nested HTML Elements Example</title>
</head>
<body>
<h1>My first <i>italic</i> heading</h1>
<p>A paragraph with some <u>underlined</u> text</p>
</body>
</html>Always use the closing tag
There are several HTML elements that do not require any closing tag and still works fine in most web browsers. This is because the end tag is considered as optional for some elements.
Let's have a look at the example below:
Example
<!DOCTYPE html>
<html>
<body>
<p>This is my first paragraph
<p>This is my second paragraph
</body>
</html>As you can see the above example do not have any end tag for both paragraphs, but if you try the example by clicking the "Try it yourself" button then you will see that it is still working without any issues. But we recommend that you should always use the closing tag to make your code stay organized as it becomes more complex. In case you forgot the closing tag then there is a possibility that the code may display some unexpected output. So, always try to be on the safe side.
HTML tags lowercase or uppercase
HTML doesn't enforce lowercase or uppercase tag name because they are case-insensitive. Both <H1>...</H1> and <h1>...</h1> has the exact same meaning and will work in all web browsers without any issues. But it is the recommendation of W3C (World Wide Web Consortium) that we should always use the lowercase characters in the HTML tag name.
Note: In this course we will make use of the lowercase tag name to stay organized.
