Submodule 1.4: More elements

The div element

The <div> tag is used to group large areas of HTML in order to apply them CSS (or JavaScript as we will see later).

In the web page, white space is displayed before and after the div element.

An appropriate usage of the <div> element would be if we wanted to apply the same style to multiple paragraphs of our HTML. For example, if we wanted 10 of our paragraphs to have the same style, we could group them using the <div> element and apply the necessary class only one time instead of 10.

Examples

The following code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
        .cl1 {background:lightblue}
    </style> 
  </head>
  <body>
    <p>This is a paragraph before the div</p>
    <div>
        This is a div with no style
    </div>
    <p>This is a paragraph in the middle</p>
    <div class="cl1">
        <p>This is a p in a div with a blue background</p>
    </div>
  </body>
</html>

will create a page displayed as:

div class

The following code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
        .cl1 {background:yellow; font-size:16pt; font-family:courier}
        .cl2 {background:lightblue; font-size:3em; font-family:Arial; width:30%}
    </style> 
  </head>
  <body>
    <p>This is a paragraph before the div</p>
    <div class="cl1">
        This is a div with a yellow background
    </div>
    <p>This is a paragraph in the middle</p>
    <div class="cl2">
        This is a div with a blue background
    </div>
  </body>
</html>

will create a page displayed as:

div width