HTML Elements



Elements are the building blocks of HTML that describe the structure and content of a web page. An element in HTML usually consist of a start tag <tag name>, close tag </tag name> and content inserted between them. An HTML element is an individual component of an HTML document. It represents semantics, or meaning. For example, the title element represents the title of the document.

<tagname>Content goes here...</tagname>

The HTML element is everything from the start tag to the end tag:

<h1>This is First Heading</h1>

<p>This is First paragraph.</p>

Note: Some HTML elements have no content (like the <br>, <hr> element). These elements are called empty elements. Empty elements do not have an end tag!

 

Start tag Element content End tag
 <h1> This is First Heading </h1>
<p> This is First paragraph. </p>
<br>, <hr> None None


Nested HTML Elements 

HTML elements can be nested. This means that the HTML element can contain many other elements inside.

The following example contains four HTML elements (<html>, <head>, <body>, <title>, <h1>, <i> , <p> and <u>):

Example :
<!DOCTYPE html>
<html>

   <head>
      <title>This is Nested Elements Example</title>
   </head>
	
   <body>
      <h1>This is <i>italic</i> heading</h1>
      <p>This is <u>underlined</u> paragraph</p>
   </body>
	
</html>
Example Explained

It has a start tag <html> and an end tag </html>.

Then, inside the <html> element there is a <head>, <body> element.

The <head> element defines the document's head.

It has a start tag <head> and an end tag </head>.

<head>
    <title>This is Nested Elements Example</title>
</head>

Then, inside the <head> element there is a <title> element.

<title>This is Nested Elements Example</title>

The <body> element defines the document's body.

It has a start tag <body> and an end tag </body>.

<body>
    <h1>This is <i>italic</i> heading</h1>
    <p>This is <u>underlined</u> paragraph</p>
</body>

Then, inside the <body> element there is a <h1>, <p> element.

<h1>This is <i>italic</i> heading</h1>
<p>This is <u>underlined</u> paragraph</p>


Empty HTML Elements

Elements with no closing tag are known as an empty tag.

A typical example of an empty element, is the <br> element, which represents a line break. Some other common empty elements are <img><input><link><meta><hr>, etc.

The <br> tag defines a line break, and is an empty element without a closing tag:

<p>This is a <br> paragraph with a line break.</p>