HTML Elements

HTML Elements are defined by the start tag, attributes, content, and closing tag. Therefore an HTML element is everything from the start tag to the close tag.

 
   
    <h2>My First HTML Heading</h2>
    <p>My first HTML paragraph.</p>

Example Of HTML Element:

Source Code

          <h1>HTML Elements</h1>
<h2>My First HTML Heading</h2>
<p>My first HTML paragraph.</p>

Try it now

Code Explanation

HTML element has either block-level or inline-level. Block-level HTML element takes full available width and starts with a new line and leaves the top and bottom margin while as inline element takes only as much space as it needs. But, both types of elements can be interchanged by CSS rule means a block-level element can be changed to an inline element and an inline element can be changed to block-level by CSS display property.

Nested HTML Elements

HTML elements can be nested means more than HTML elements can be put inside a single HTML element.

 
   
     <p>Here is some <b>bold</b> text.</p>
     <p>Here is some <em>emphasized</em> text.</p>
      <p>Here is some <mark>highlighted</mark> text.</p>

Example of nested HTML elements:

Source Code

          <p>Here is some <b>bold</b> text.</p>
<p>Here is some <em>emphasized</em> text.</p>
<p>Here is some <mark>highlighted</mark> text.</p>

Try it now

Attention!!Here,HTML element , as well as  exists with in  element.

HTML Comment

The HTML comment is very useful for understanding the source code. It provides help to understand the source code by another developer. Please keep in mind that HTML comment does not display by browser.

General syntax for writing HTML comment:

HTML comment can be written inside

.

 
 
    <!--  <p>This is paragraph element that is commented.</p>-->

Example

Source Code

          <!--<p>This is paragraph element that is commented.</p>-->
<p>HTML commented code  does not display by the browser.</p>

Try it now

Note:-Please keep in mind that ,HTML element is commented by following syntax .

HTML Multi Line Comment

Source Code

          <!--
   <p>Here is some <b>bold</b> text.</p>
   <p>Here is some <em>emphasized</em> text.</p>
   <p>Here is some <mark>highlighted</mark> text.</p>
   -->
<p>
     The above statement is a multi-line commented statement that does not display by the browser.
</p>

Try it now

Note-Write multi line HTML code comment can be done by  statement.

HTML Element Type

The HTML element has either block-level or inline-level. Block-level HTML element takes full available width and starts with a new line and leaves the top and bottom margin while as inline element takes only as much space as it needs. But, both types of elements can be interchanged by CSS rule means a block-level element can be changed to an inline element and an inline element can be changed to block-level by CSS display property.

Block Level Element

Followings are the list of block-level element:

 
   	<div>,<code>,<div>, <p>, <h2>  , <h3> , <h4> , <h5> , <h6>, <ul>, <li>,<form>,<ol> ,</ol> and so on.

Source Code

          <p>HTML paragraph element is a block level element & it takes full available width.</p>

Try it now

Note:HTML block-level element takes full available width while inline takes as necessary as required.

HTML Inline Element

Followings are the list of inline element :

 
   <img>, <b>,<em>, <i>,<a>, <span>, <strong>, ,<input>,<button> , etc.

Source Code

          <span>Username:</span>
<input type="text" name="username" id="username" />

Try it now

The Inline element does not take full available and it also does not start with a new line.

Empty HTML Elements

HTML empty element does not have content and it is used without closing tag. Followings are the example of empty HTML elements.

 
   
      <img>, <input>, <link>, <meta>, <hr>,<br>,etc.

Please keep in mind that, according to above mention the concept, you could not write like this. <hr> some content </hr> or   some content .

Source Code

          <p>This paragraph contains <br /> a line break.</p>
<img src="https://picsum.photos/200/300" alt="image" />
<input type="text" name="username" id="username" />

Try it now

HTML Case Sensitive

HTML tags are not case sensitive:  means the same as .

Online Test / Quiz

Question set 1

HTML Elements

Code Explanation

Nested HTML Elements

HTML Comment

Example

HTML Multi Line Comment

HTML Element Type

Block Level Element

HTML Inline Element

Empty HTML Elements

HTML Case Sensitive

Online Test / Quiz

Web Tutorials