HTML Elements

HTML Elements

HTML Elements

An HTML element usually consists of a start tag and end tag, with the content inserted in between :

 <tagname> Copy Your Content and Paste here. </tagname> 

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

 <p> Copy Your Content and Paste here. Ex : My first paragraph. </p> 
Start tag Element content End tag
<h1> My First Heading </h1>
<p> My first paragraph. </p>
<br>    
HTML elements with no content are called empty elements. Empty elements do not have an end tag, such as the <br> element (which indicates a line break).

Nesting of Elements in HTML

  • Use of elements inside elements in known as Nesting of elements.
  • Even if you write a simple code of HTML, There must be a use of nesting of elements.
  • Below is the example of few HTML elements in nested form.

Example of Nesting of HTML Elements

<!DOCTYPE html>
<html>
<body>

     <h1>W3Professors</h1>
     <p>Welcome to W3 Professors. This is My first paragraph.</p>

</body>
</html> 
Execute Code

Explanation of Example

  • The <html> tag is the main tag of HTML. It is for whole document.
  • It is paired tag. So it is important to use start tag <html> and an end tag </html>.
  • The <body> is another HTML element used in <html>. It describes nesting of elements.

Another Example

<html>
<body>

     <h1>W3Professors</h1>
     <p>Welcome to W3 Professors. This is My first paragraph.</p>

</body>
</html> 
Execute Code
  • The <body> element means visible area of HTML page. That's why it is called as document body.
  • It has a start tag <body> and an end tag </body>.
  • Two other elements <h1> and <p> are used in below example.
<body>

     <h1>W3Professors</h1>
     <p>Welcome to W3 Professors. This is My first paragraph.</p>

</body> 
Execute Code
  • The <h1> element defines a heading.
  • It has a start tag <h1> and an end tag </h1>.
  • The element content is: W3Professors
<body>
     <h1>W3Professors</h1>
</body> 
Execute Code
  • The <p> element defines a paragraph.
  • It has a start tag <p> and an end tag </p>.
  • The element content is: Welcome to W3Professors
<body>
        <p>Welcome to W3Professors. This is My first paragraph.</p>
</body> 
Execute Code

Be Care full to Close Tag

It may possible that some of HTML elements will work properly without their end or close tag

<html>
<body>

     <p>Welcome to W3 Professors. This is My first paragraph.
     <p>Welcome to W3 Professors. This is My first paragraph.

</body>
</html> 
Execute Code
  • W3Professors always advice our reader to close tags properly. Otherwise you may see unexpected results. Even some time errors also if you forgot end tag.

Empty HTML Elements

  • HTML elements with no content are called empty elements.
  • <br> is an empty element without a closing tag (the <br> tag defines a line break).
  • Empty elements can be "closed" in the opening tag like this: </br>.
  • HTML5 does not require empty elements to be closed. But if you want stricter validation, or if you need to make your document readable by XML parsers, you must close all HTML elements properly.

Lowercase Tags or Uppercase Tags

  • HTML is not case sensitive. Evens tags are not case sensitive. Meaning of <H1> is same as <h1>
  • New version (HTML5) has feature of write tags in any case. Either in upper case or lower case. But as per W3C recommendations, use lowercase in HTML
W3Professors always use tags in Lowercase