HTML Elements
HTML elements are the basic units of HTML, the predominant markup language of the Web. HTML elements are the basic units of HTML, and consist of tags that surround different types of content. Web browsers do not display HTML tags, but use them to interpret the content of the page.
Example: <elementName> Content </elementName>
| Start tag | Element content | End tag |
|---|---|---|
| <h1> | Heading | </h1> |
| <p> | Paragraph. | </p> |
| <hr> | none | none |
HTML Tag vs. Element
The tags is part of element(starting tag or ending tag). An HTML element is defined by a starting tag, the other content and it's closing tag.
For example, <p> is starting tag of a paragraph and </p> is closing tag of the same paragraph but <p>This is paragraph</p> is a paragraph element.
Example
<!DOCTYPE html>
<html>
<body>
<h1>Heading of the page</h1>
<p>Paragraph of the page.</p>
</body>
</html>
Example Explained:
| Tags | Description | Start tag | end tag |
|---|---|---|---|
| <!DOCTYPE html> | Defines a document type. | <!DOCTYPE html> | - |
| <html> | The root element and it defines the whole HTML document. | <html> | </html> |
| <body> | Defines the document body. | <body> | </body> |
| <h1> | Defines a heading. | <h1> | </h1> |
| <p> | Defines a paragraph. | <p> | </p> |
Overlapping HTML Elements
Text may be both bold and italicised. This is done by using both the <b> and <i> tags. When doing so, it is important to remember not to overlap HTML tags.
Good Practice
<b><i>Example</i></b>
Bad Practice
<b><i>Example</b></i>
Overlapping tags is a common mistake. Although Web browsers are usually smart enough to work out whatis meant, it can lead to problems. Furthermore, for an HTML page to be considered valid HTML, it must contain no overlapping tags.
Example
<!DOCTYPE html>
<html>
<body>
<p>Paragraph one.
<p>Paragraph Two.
</body>
</html>
Note: Do not forget to add the end tag <p> although most browsers will display HTML correctly even if you forget the end tag.
Empty HTML Elements
An empty element is an element that cannot have any child nodes (i.e., nested elements or text nodes).
The tag <br> is used to start a new line. <br>is a standalone tag, that means there is no closing <br>tag.
Example
<p>Paragraph of <br> the page.</p>
Note: That <br> does not place a line space between the two lines. To do that you need to use the <p> paragraph tag.
The follows are empty elements: <area>, <base>, <br>, <col>, <embed>, <hr>, <img>, <input>, <keygen>(HTML 5.2 Draft removed), <link>, <meta>, <param>, <source>, <track>, <wbr>