HTML Elements & Tags

In this tutorial, you'll learn HTML Elements and Tags.

HTML Tags

HTML tags are like labels or keywords to define a web page. These tags tell the browser about the format of the content.

Most tags come across. One is called the opening tag and the other the closing tag. Tags begin with a less than “<” sign and end with a larger sign than “>“.

For example: <p> </p> tags are used to create content in paragraphs. The <h1> </h1> tag is used to create the title

HTML Elements

An element of HTML usually consists of an opening tag, content, and a closing tag. We can see the HTML element as a separate element of the web page.

Start/Opening Tag

HTML elements start with opening tags. For example: <h1> <p> <b> <i> etc.

End/Closing Tag

HTML elements end with closing tags. For example: </h1> </p> </b> </i> etc.

Content

We put content between the opening and closing tags. For example: <p> This is sample content </p>


Nested HTML Elements

All HTML documents are made up of many elements. Usually, every element of HTML contains some other HTML elements. When another element is located inside one element, it is called a nested element. Nesting is the placement of another element between one element.

Let’s get a clear idea about the subject through an example below.

Code Example:
Run Code >> 
<!DOCTYPE html>
<html>
  <body>
    <h1>
      <i>Page Heading</i>
    </h1>
    <p>
      This is sample paragraph content.
    </p>
  </body>
</html>

Here the <html> element contains the <body> element and the <h1> element contains the <i> element. Here each element has followed a sequence. This order is nesting.

Rules of nesting

How many rules does HTML nesting follow? They are –

  • Every element must be perfectly nested,
  • Nesting in the correct order,
  • Block level elements can be nested between other block level elements,
  • Block level elements cannot be nested between text level elements,

 

HTML Empty Elements

Some HTML elements have no end or closing tags. Such as – <img>, <hr>, <br> etc. These are called empty tags.

Tip : Always turn off HTML tags to verify your webpage contrary to the W3C validation standard.
Use the Lowercase tag, HTML tags but not cage sensitive i.e. <H1> and <h1> tags will do the same thing in the browser.  

TOOLS

ABOUT US

CONTACT