HTML Elements | HTML Tags | Learn HTML | Nesting - OnlineTutorialHub

Search This Blog

Theme images by Storman. Powered by Blogger.

About Fast Edition

Popular Posts

Pages

Services

Blog Archive

Tuesday, 20 February 2018

HTML Elements | HTML Tags | Learn HTML | Nesting

HTML Elements :-


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


 Start Tag

                  Content

 End Tag

 <p>

           This is paragraph.

 </p>

 <h1>

            This is heading.

 </h1>

 <div>

            This is division.

 </div>


HTML elements with no content are called empty elements.

Empty elements do not have an end tag, such as the <br> element which represents a line break, <hr> element which represents a horizontal rule.

Empty elements are also known as void elements.

Difference between HTML Tag and HTML elements :-


HTML elements consist of a starting tag.

If the HTML element will hold sub content within it then it will end up with an ending tag.

For example
, <h1> is starting tag of a heading and </h1> is closing tag of the same heading but <h1> This is a heading </h1> is a heading element.

Nested HTML Elements :-

HTML Elements can be nested, we can write an element, before closing that element, we can start as well as finish another element within that outer element.
Example:

<!DOCTYPE html>
<html>
<head>
    

    <title>This is a example for Nested HTML Elements </title>
</head>
<body>
    <p>This is a <u>underlined</u> paragraph.</p>
</body>
</html>
This HTML document produces following output :       


Explanation of above example -

Here, <html> element defines the whole document. It has a start tag <html> and an end tag </html>. Here is also a <u>...</u> (underline) tag which is used to make a text underlined. Paragraph tag is a outer element and underline tag is an inner element which can be called as nesting of elements.

Heading Elements :-


Any HTML document starts with a heading. A HTML h tag can be defined as a title or a subtitle. In HTML, we can use different sizes for headings. HTML has six different heading tags which are defined as <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. Size of the text depends on the number of heading. h1 is the largest heading tag and h6 is the smallest one. 

Example
<!DOCTYPE html>
<html>
<head>
      <title> Heading Example </title>
</head>
 <body>
      <h1>This is heading 1</h1>
      <h2>This is heading 2</h2>
<h3>This is heading 3</h3>
 <h4>This is heading 4</h4>
  <h5>This is heading 5</h5> 
  <h6>This is heading 6</h6>
</body>
</html>

This HTML document produces following output :   
    

1 on: " HTML Elements | HTML Tags | Learn HTML | Nesting"