Hello dear readers! welcome back to another section of my tutorial on Html. In this tutorial guide, we are going to be discussing about Html elements. In my previous tutorials, we discussed about Html tags, in this tutorial you gonna find out the actual difference between Html tag and Html element.
Html element is always defined by a starting tag. If the element do contains other content inside of it, then it will end with a closing tag, where the element name is then proceded by a forward slash as shown below.
RECOMMENDED POST: Html Basic Tags2
| Start Tag | Content | End Tag |
|---|---|---|
| <p> | This is paragraph content. | </p> |
| <h1> | This is heading content. | </h1> |
| <div> | This is division content. | </div> |
| <br /> |
From the table above <P> and </p> is a Html element, also <h1> and </h1> is a Html element. There are some other Html elements which do not need to be closed such as the <br />, <hr /> and <img /> elements. These are known as void elements.
Html documents consist of a tree of these elements and they may specify how the Html documents should be built, and what kind of content should be placed in what section of the Html document.
Now am going to give a very brief difference between a Html tag and a Html element below.
HTML Element VS HTML Tag
A Html element is determined by a starting tag. If the element does contains other contents, it will end with a closing tag eg <h1> is the starting tag of the heading 1 and then the closing tag of the same heading 1 is </h1> but <h1>This is the heading 1</h1> is the element of heading1.
RECOMMENDED: Html Document Structure
Nested HTML Elements
A nested Html element can simply be defined as an element that is placed in another Html element and it is allowed in Html.
Example
<!doctype html>
<html>
<head>
<title>Nested HTML element</title>
</head>
<body>
<p>This tutorial is brought to you by<i> wed design tutorialz</i></p>
<p>This is <u>underlined</u></p>
</body>
</html>
<html>
<head>
<title>Nested HTML element</title>
</head>
<body>
<p>This tutorial is brought to you by<i> wed design tutorialz</i></p>
<p>This is <u>underlined</u></p>
</body>
</html>
From the above example the first paragraph is italic and the second paragraph is underlined. you can try that out using your text editor. That is it for this tutorial, bye for now.