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.

HTML Tag and Element Picture

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>
─ Result
Emphasized text

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.

Note: HTML Tags are case-insensitive in HTML5. So <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.
Warning: HTML5 does not require empty elements to be closed but in stricter version like XHTML, you have to close all Tags using a forward slash “/” after the tag name like <br />.