14 - HTML-Blocks

In HTML, the elements are grouped using <div> and <span> tags. We usually group elements for creating sections or sub sections in our web page.

Using these two tags we can group elements in HTML.

We have discussed abut block level elements & inline elements in our previous chapters. A small brief about them,

Block Level Elements

When these elements are displayed in the browser, a new line is added before and at the end. Generally, used for creating blocks in our web page.

Examples for these elements are <table>, <ol>, <ul>, <h1> etc.

Inline elements

They are displayed without any new line. They flow along with the text content.

Examples for these elements are <a>, <i>, <strong> etc

HTML Blocks in Detail

Block elements are structural elements whereas inline elements are text based.

We can put any block element inside another block element. We can also put an inline element inside a block level element but we cannot place a block level element inside an inline element with an exception for <a> element (anchor tag)

Block elements expand naturally to fill its parent container, no need of setting height and width externally.

By default, they will be displayed below the previous elements in the code.

The <div> element

  • The HTML <div> element is a block level element.
  • Div stands for division because it divides the content into individual sections.
  • It is used as a container to group block elements in HTML.
  • The browser will display a line before and after the <div> element.
  • We can apply styles to large blocks of content by applying CSS to it.
  • This element is mostly used for defining document layout.    
  • This tag is supported in all major browsers.

Example for <div> element:-

<html>
  <head>
   <title>
     Div element
   </title>
  </head>
  <body>
    <p>This is some text before DIV tag</p>
    <div style=”color : green”>
      <h4>Example for DIV Element</h4>
      <p>This is some text inside DIV element</p>
    </div>
    <p>This is some text outside DIV tag </p>
  </body>
</html>

The output of the above code would be

This is some text before DIV tag

Example for DIV Element

This is some text inside DIV element

This is some text outside DIV tag

Attributes supported by <div> tag:

Global Attributes:

The <div> tag supports all the global attributes of HTML.

Event Attributes:

The <div> tag supports all the Event attributes of HTML.

Difference between HTML 4.01 and HTML5

The align attribute is not supported in HTML5.

The <span> element

  • Span is similar to div, except that it works at a finer level.
  • We can even format a single character using Span.
  • This element is used for grouping inline elements only.
  • It is used to format a part of text. (Like, applying a color to a word in a sentence)
  • We can style or manipulate a text using <span> element.
  • This tag is supported in all major browsers.

We cannot simply use Span to highlight a text because we have some other tags which are intended to do that.

Example for <span> element

<html>
  <head>
   <style>
    .applyspan
    {
     color : Red; 
     font-family : arial; 
     font-size : 20px; 
    }
   </style>
  </head>
  <body>
    <p>Span is not a <span class="applyspan"> block level </span> element </p>
   </body>
</html>

The output of the above code would be

Span is not a block level element

Attributes supported by <span> tag:

Global Attributes:

The <span> tag supports all the global attributes of HTML.

Event Attributes:

The <span> tag supports all the Event attributes of HTML.

Difference between HTML 4.01 and HTML5

There is no difference.

This is all about HTML-Blocks. In the next chapter we will learn about HTML- Layouts.

Like us on Facebook