Previous Next

HTML Blocks Elements

All the HTML elements are ususally either Block level ements or Inline elements.

 


  

HTML Block Level Elements

A block-level element always starts on a new line and takes up the full width available.

Example : <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ul>, <ol>, <dl>, <pre>, <hr />, <blockquote>, and <address> elements are all block level elements. 

 


  

HTML Inline Level Elements

An inline element does not start on a new line and only takes up as much width as necessary.

Example: <b>, <i>, <u>, <em>, <strong>, <sup>, <sub>, <big>, <small>, <li>, <ins>, <del>, <code>, <cite>, <dfn>, <kbd>, and <var> elements are all inline elements.

 


  

HTML Grouping Elements

(i) <div> tag

(ii) <span> tag

 


  

HTML <div> tag

<div> tag can be used to create webpage layout. 

This tag is not displayed but used to contain other elements.

Formatting of <div> elemets can be changed using css.

Example

<!DOCTYPE html>
<html>
<head>
<title>HTML div Tag</title>
</head>
<body>

<!-- First group of tags -->
<div style="background-color:blue">
   <h4>This is first list</h4>

   <ul>
   <li>Item1</li>
   <li>Item2</li>
   <li>Item3</li>
   <li>Item4</li>
   </ul>
</div>

<!-- Second group of tags -->
<div style="background-color:green">
   <h4>This is second list</h4>

   <ul>
   <li>Item1</li>
   <li>Item2</li>
   <li>Item3</li>
   <li>Item4</li>
   </ul>
</div>

</body>
</html>

Result:


 

HTML <span> tag

The HTML <span> is an inline element.

The <span> element is used to group inline elements in a document.

The <span> tag provides no visual change by itself.

 

Example

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

Result:

This is red, and this is green


Previous Next