in

Learn How to Build Simple HTML Blocks The Easy Way

Hello! Welcome back. In this tutorial we will be looking at HTML Blocks. Blocks are not any special features or attributes they are just the regular HTML tags and Elements we have been discussing about in our previous HTML tutorials.

Read previous tutorial on: Tutorial 16# Learn How To Create HTML IFrames The Easy Way

What are HTML Blocks?

HTML elements can be categorized into two element groups which are

  • Block  elements
  • Inline elements

Block Elements

A close look at a typical well-structured HTML document you will observe that some elements are placed in such a way that it looks like there is a line break between the elements opening and closing tag. These spaces aren’t that necessary but in some cases it gives the HTML document a good structure. Example of Block HTML elements include:

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

Another way of looking at the HTML blocks Elements is that whenever or wherever they are used in a web document, they tend to cause a line break and continue from the next line.

Inline HTML Elements

Inline HTML elements are elements that do not cause a line break when used. You can use them in between the words of a sentence and there won’t be line breaks. The function of this elements do not require the need for line breaks. Example of such elements include:

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

Grouping HTML Elements

A new feature we will be introducing in this section is the grouping of HTML elements. We can easily have all HTML elements grouped into an HTML element for the purpose of styling, referencing, orderliness or customization. HTML elements can be grouped using

  • <div> tag
  • <span>  tag

We have talked about this tags in our previous lessons and we are going to reference them again now and give further explanation on how to use them

The <div> HTML Tag

This important tag in HTML is used to group other elements together. It serves as a carrier for other HTML elements. The <div> tag can enclose other elements and can be used to embed styles, reference and customization for other elements together. The <div> tag also causes a line break so it can never used for inline styling. Example shown below

<!DOCTYPE html>
<html>

   <head>
      <title>HTML FRAME ILLUSTRATION</title>
   </head>
	
   <body>
      <div style="color:red">
            <p>TOP body showing the iframe section</p>

            
      
            <p>END body showing the iframe section</p>


      </div>
         



   </body>
   
</html>

in the above example the paragraphs were enclosed in a <div> tag and were styled in red color through the opening <div> tag

RESULT ON WEB BROWSER

html blocks

The <span> HTML Tag

The span HTML Tag is used for inline HTML styling and does not cause a line break. This tag cannot enclose a large amount of HTML data. It can also be used to style a small section of an HTML document. Attributes such as bold, underline, italics can be added to the HTML document using this tag. Example shown below

<!DOCTYPE html>
<html>

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

            
      
            <p>END body showing the iframe section</p>


      </div>
         



   </body>
   
</html>

In this example the HTML span tag was used to give a section of the first paragraph sentence a red color.

RESULT ON WEB BROWSER

html span tag html blocks

Conclusion

Now you understand the basics of HTML BLOCKS and you are really doing great. Lets move on to the next tutorial on   HTML BACKGROUNDS

What do you think?

html iframes

Learn How To Create HTML IFrames The Easy Way

html background colors

Learn How to Add HTML Background Colors to web Document