HTML Element

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

Example Of HTML Element:

General Syntax

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

Source Code

      
        <h3>This is the block level HTML Heading Element</h3>
<p>This is also the block level element.</p>

Source Code: Output

This is the block level HTML Heading Element

This is also the block level element.

Code Explanation

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.

Let us understand nested HTML elements:

General Syntax

    <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>

Source Code

      
        <p>Learn <b>HTML</b> step by step.</p>
<p>Learn <em>php</em> server side language.</p>
<p>Learn software <mark>development</mark> .</p>

Source Code: Output

Learn HTML step by step.

Learn php server side language.

Learn software development .

Code Explanation

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

.

Example

General Syntax

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

Source Code

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

Source Code: Output

Code Explanation

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

HTML Multi Line Comment

General Syntax

    <!--
   <p>Learn Object Oriented Javascript</p>
   <p>Learn Object Oriented PHP</p>
   <p>Learn Web Development Using oop.</p>
   -->
<p>
	The above statement is a multi-line commented statement that does not display by the browser.
</p>

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>

Source Code: Output

The above statement is a multi-line commented statement that does not display by the browser.

Code Explanation

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:

Statement
   <div>,<code>,<div>, <p>, <h1>  to <h6>, <ul>, <li>,<form>,<ol> ,</ol> and so on.

General Syntax

    <p>
	Learn HTML Element Types:This is an example of HTML block Level element.
</p>

Source Code

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

Source Code: Output

HTML paragraph element is a block level element & it takes full available width.

Code Explanation

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 :

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

General Syntax

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

Source Code

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

Source Code: Output

Useame:

Code Explanation

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.

Example
    <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 .

General Syntax

    <img src="https://picsum.photos/200/300" alt="image" /> <br>
<input type="text" name="username" />

Source Code

      
        <img src="https://picsum.photos/200/300" alt="image"> <br><br>
<input type="text" name="username" id="username">

Source Code: Output

Code Explanation

HTML Case Sensitive

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

Online Test / Quiz

Question set 1

Our Tutorials

Html Tutorial HTML

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4

Materialize CSS Tutorial MATERIALIZE CSS