Enroll Course

100% Online Study
Web & Video Lectures
Earn Diploma Certificate
Access to Job Openings
Access to CV Builder

Outlines

Categories Of HTML Elements

Block Elements

Inline Elements

Grouping HTML Elements

The <div> Tag

The <span> Tag

ENROLL NOW

HTML - Blocks

Categories of HTML elements

HTML elements can be further categorized into two categories

(a) Block Level Elements

(b) Inline Elements.

Block Elements

Block elements display on the screen like they all have aline break right before and right after them. For instance, the <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ul>, <ol>, <dl>, <pre>, <hr />, <blockquote>, and the <address> HTML elements are all block level elements. They are all called block level elements because they all start on their own line, and anything that comes after them displays on its own new line.

Inline Elements

Inline elements, are elements that appear in between other elements or sentences and they don't appear on a line of their own. The <b>, <i>, <u>, <em>, <strong>, <sup>, <sub>, <big>, <small>, <li>, <ins>, <del>, <code>, <cite>, <dfn>, <kbd>, and <var> elements are all called inline elements.

Grouping HTML elements

There are two most important tags in which we use very often to group various other HTML tags:

1. <div> tag

2. <span> tag.

The <div> tag

This is the signature block-level tag that plays an enormous role in grouping various other HTML tags and applying CSS on a gaggle of elements. Even now tag is often wont to create a webpage layout where we define different parts (Left, Right, Top, etc.) of the page using the tag. This tag doesn't provide any visual change on the block, but this has more meaning when it's used with CSS.

Example

Following is a simple example of <div> tag. We will learn Cascading Style Sheet (CSS) in a separate course but we are going to use it here to show the usage of the <div> tag.

<!DOCTYPE html>
<html>
   
   <head>
      <title>HTML div Tag</title>
   </head>
	
   <body>
      <!-- First group of tags -->
      <div style = "color:red">
         <h4>This is first group</h4>
         <p>Following is a list of vegetables</p>
         
         <ul>
            <li>Beetroot</li>
            <li>Ginger</li>
            <li>Potato</li>
            <li>Radish</li>
         </ul>
      </div>

      <!-- Second group of tags -->
      <div style = "color:green">
         <h4>This is second group</h4>
         <p>Following is a list of fruits</p>
         
         <ul>
            <li>Apple</li>
            <li>Banana</li>
            <li>Mango</li>
            <li>Strawberry</li>
         </ul>
      </div>
   </body>
   
</html>

This will above code will be displayed as:

The <span> tag

The HTML <span> is an inline element and it can be used to group inline-elements in an HTML document. This tag also does not provide any visual change on the block but has more meaning when it is used with CSS.

The difference between the <span> tag and the <div> tag is that the <span> tag is used with inline elements whereas the <div> tag is used with block-level elements.

Example

The Following is a simple example showing the usage of the <span> tag. We will learn Cascading Style Sheet (CSS) in a separate chapter but we used it here to show the usage of <span> tag:

<!DOCTYPE html>
<html>

   <head>
      <title>HTML span Tag</title>
   </head>
	
   <body>
      <p>This is <span style = "color:red">red</span> and this is
         <span style = "color:green">green</span></p>
   </body>
	
</html>