HTML TUTORIAL

How To Properly Use HTML Blocks On a Web Document

HTML BLOCKS
Written by ikenna

In this article, you will be learning how to use the HTML block elements when developing web pages. In our previous tutorial, we looked at the HTML header and the various attributes that can be used to customize the head section of the web pages. if you haven’t gone through the tutorial, you can do so using the link below

READ PREVIOUS: Understanding The HTML Header and How To Customize Them on A Web Document

Introduction to HTML BLOCK elements

If you have been observant enough on how some html elements works, you will notice that some elements when used, behaves as if there is a space at their top and bottom. Such elements are called the block elements. In HTML, there are two types of elements:

  • The block level elements
  • The inline level elements

The block elements causes block like spaces to appear at their top and bottom. They usually take a new space when used and forces other elements to take spaces either below or above them. example of block elements are shown below

<h4>, <h5>, <h6>, <ul>, <p>, <h1>, <h2>, <h3>,  <ol>, <dl>, <pre>, <hr />, <blockquote>, <address> and <form>

These elements when used, usually cause a line break on the web document.

The Inline HTML Elements

The inline html elements are quite different from the block elements. These elements do not cause block like spaces and do not force the line breaks on the web document. example shown below

<del>, <code>, <cite>, <dfn>, <b>, <i>, <u>, <small>, <li>, <ins>,  <kbd>,<em>, <strong>, <sup>, <sub>, <big>,  and <var> 

The Grouping HTML Elements

The grouping html elements are used to group html codes and text information together. With the help of the group elements, we can easily have a bunch of information and codes grouped into a particular element for reference and customization purpose. Example of group elements includes:

  • <div> tag
  • <span>  tag

The div tags

The div tag is an important tag in HTML used to group information and codes together in a web document. its a block level element which means that, when used, it cause line breaks and forced spaces on the web document. example shown below

<!DOCTYPE html>
<html>
   <head>
      <title>HTML FRAME ILLUSTRATION</title>
   </head>
	
   <body>
      <div style="color:red">
            <p>TOP body showing the TOP AREA </p>

            <p>END body showing the END AREA</p>

      </div>
       
   </body>
   
</html>

Result on web browser

HTML FRAME ILLUSTRATION

TOP body showing the TOP AREA

END body showing the END AREA

The span tag

Unlike the div tag, the span tag does not cause block spaces. This tag is an inline level element and can be used in between information on the web page without causing spaces or forcing other elements to start from a new line. Example shown below

<!DOCTYPE html>
<html>
   <head>
      <title>HTML FRAME ILLUSTRATION</title>
   </head>
   <body>
      <div >
            <p>TOP body <span style="color:green">showing the</span> iframe section</p>

            <p>END body showing the END AREA</p>
      </div>
       
   </body>
   
</html>

Result on web browser

HTML FRAME ILLUSTRATION

TOP body showing the iframe section

END body showing the END AREA

Conclusion

The above article shows how to use the HTML block and inline elements when building web documents. if you have questions regarding this article, kindly let us know using the comment section below

NEXT TUTORIAL: BASIC OF COLORS IN HTML

About the author

ikenna

Leave a Comment