HTML Tags & Elements
I am going to explain about HTML tags and elements together here. Because sometimes you may be confused about the difference between Tags and Elements. Let’s have a look at the image below is actually showing which one is tag and which one is element.
What are HTML Tags
HTML Tags are used to mark up any text or graphics. According to the image above, the <h1> tag is surrounded by 2 angle brackets “<” and “>“; called start tag. And the end tag </h1> is almost same but it has only a forward slash “/” before the tag name (h1). So here <h1> is start tag and </h1> is end tag.
Look how an HTML tag is presented on a web page ─
<em>Emphasized text</em>
Description:
Because of using “Emphasized text” in between <em> and </em> tags, browser understand how the element to be presented. Most browsers will display the <em> element with a CSS italic value like ─
em {
font-style: italic;
}
Writing HTML means writing HTML tags.
<H1> means the same as <h1> but the W3C recommends lowercase in HTML4 and demands lowercase for stricter document types like XHTML.HTML Elements
An HTML Element is nothing without an HTML tag. Most HTML elements are written with a start tag (opening tag) and an end tag (closing tag) with content in between.
<tagname>Content</tagname>
So according to the image above, <h1>Heading Content</h1> is an h1 element.
Some HTML elements:
| Start Tag | Content | End Tag | Name |
|---|---|---|---|
<div> |
This is a division content. | </div> |
div element |
<p> |
This is a paragraph content. | </p> |
p (paragraph) element |
<h1> |
This is a heading content. | </h1> |
h1 element |
Nested HTML Elements
An HTML element can contain another element.
<!DOCTYPE html>
<html>
<body>
<p>Paragraph Content.</p>
</body>
</html>
Description:
In the example above, the <html> element defines the whole html document and contains other 2 elements ─ <body> element and <p> element. And the <body> element also contains another element is <p>Paragraph Content.</p> (<p> element).
HTML Empty Elements
No content in HTML tag is called empty element. There are some elements only have start tag such as <br>, <hr>, <img>, <meta> and more.
Some HTML empty elements:
| Start Tag | Description |
|---|---|
<br> |
It produces a line break in text. |
<hr> |
Horizontal rule. It represents a thematic break in an HTML page. |
<img> |
It represents an image in a document. |
<meta> |
It provides any metadata information about an HTML document. |
<br />.