HTML Elements

An element usually consists of an opening tag, closing tag and the content between them.

See the syntax below:

<element_name> Here content is present </element_name>
<p> Here content is present </p>

See the structure of an element.

structure of element

Element (opening-closing tags)

The opening tag consists of less than sign(<), tag name and greater than sign(>). For example, (<p>).

The closing tag consists of less than sign(<), forward slash(/), tag name and greater than sign(>). For example, (</p>).

See the example below.

Example

<!DOCTYPE html> 
<html>
 <head></head>
 <body>
    <h1>This is the most important Heading.</h1>
    <p>This is a paragraph for test.</p>
 </body>
</html>
Try </>

All elements have an opening as well as the closing tag. But some have only the self-closing tag.

Element (self-closing tag)

The self-closing tag consists of less than sign (<), element-name, greater than sign with an optional forward slash (/>). For example, (<br/>).

Example

<!DOCTYPE html> 
<html>
 <head></head>
 <body>
    <p> <br /> element has space between 'br' and forward slash (/).</p>
    <p> <br/> element has not space between 'br' and forward slash(/).</p>
    <p> <br> has not forward slash(/). </p>
 </body>
</html>
Try </>
  • You may add or remove forward slash(/) in the self-closing tag. That does not matter.

  • You may have space between the element name and forward slash.For example, both <br /> and <br/> are correct.

A full list of the self-closing tags (no closing tag) has been given below.

p, area, base, br, col, embed, hr, img, input, keygen, link, meta, param, source, wbr.

These tags are called void tags because they don't have content after these tags.

Case Sensitivity:

Here a question arises that whether can we have the element name in uppercase or mixed form?

The answer is simple. You can have the element name in lowercase, uppercase or mixed form.

We take an example of an element.

Example

<!DOCTYPE html> 
<html>
 <head></head>
 <body>
    <code>This is in lowercase form.</code>
    <CODE>This is in uppercase form.</CODE>
    <coDe>This is in mixed form.</coDe>
 </body>
</html>
Try </>

This example proves that uppercase, lowercase or mixed form may be used for the element name.

The element name is case-insensitive.


Summary

Element

An element consists of opening tag, closing tag and the content between them e.g. <h1>.

Opening tag

Opening or starting tag consists of less than sign (<), tag-name followed by greater than sign (>) e.g. <h1>.

Closing tag

Closing or ending tag consists of less than sign (<), forward slash(/), tag-name followed by greater than sign (>) e.g. </p>

Self-closing tag

Self-closing tag consists of less than sign (<), tag-name, forward slash (/) followed by greater than sign (>) e.g. <br/>



Was this article helpful?

 

Email:

Message:

Get the newsletter