An HTML element is the smallest functional unit of an HTML document. Generally, it is composed of a start tag, the end tag and the content enclosed in between these tags. A web page can have any number of HTML elements depending on the feature and complexity of the page. An example HTML element is given below.
The example above depicts a pargraph element with one attribute class with a value lead The text content Paragraph Element enclosed between the start and the end tag. Similarly, in the following example, you see an img element (used to insert images into webpage), but looks like its incomplete? as it does not have any content and neither the end tag? Right?. Actually no! Take a look below:
HTML Empty Elements
Some elements in HTML do not require an end tag, these elements are called empty elements, void element or self-closing elements. The tags are called non-container tags as they don't enclose or contain text as normal tags do. There are plenty of non-container tags in HTML, a few are listed below for your reference:
<area />
<base />
<br />
<col />
<embed />
<hr />
<img />
<input />
<link />
<meta />
<param />
<source />
<track />
<wbr />
You may observe that the empty elements listed above end with a "/" Please note that the slash is totally optional in HTML5. Its considered invalid in HTML 4 and required in XHTML.
HTML Tags vs Elements
You may have obsereved that the terms elements & tags are used interchangeably. Though they are similar but not the same, there's minor difference, as defined above, an HTML element is composed of tags and content (except for non-container tags) and is the smallest individual unit of an HTML document that a browser can parse and display properly while a tag is just a tag used to build an HTML element. Take a look at the example below:
Tags
<a><br><hr><img><p>
Elements
<a href="https://example.com">Link</a><br><hr><img src="test.png"><p>A Paragraph</p>
Nesting Elements
You may wonder if we could just nest HTML elements, meaning putting one element inside another element, the answer is yes. Most HTML elements can contain many other HTML elements and this is how complex structures are build in HTML document, some of the empty elements though, obviously cannot contain any other tag but they can as well be nested like any other element.
Not all elements can contain all other elements, there are certain rules specfic per tag, for eg. an <a> anchor tag cannot contain another anchor tag within itself. So, if we write
<a href="test.html">Link <a href="test.html">Link</a></a> // Is Invalid
Please note that a nested element must have the closing tags in exactly the same order they were opened. For eg. <p>Pargraph has <b>bold text</b></p>. Notice how the <b> tag is closed before closing the <p> tag.
HTML Tags: Structural Guidelines
HTML Tags are case-insensitive, which means they can be written in lowercase, uppercase, or even in mixed case, all are equally valid and will result in the same outcome. See the example below.
<strong>Strong Text</strong><STRONG>Strong Text</STRONG><StRoNg>Strong Text</StRoNg>Though HTML is case insensitive, but, it is highly recommended that you use lowercase for all HTML tags. Also note that HTML entity names and some attributes like class names etc., are case-sensitive & will render & in browser but &amP; may not. So it is better to stick with a proper structure when building web pages.
Notification
A second ago