HTML Tutorials

Using the div Element

The div element doesn’t have a specific meaning. You use it to create structure and give meaning to content when the other HTML elements are insufficient. The div element is the flow equivalent of the span element. It is an element that has no specific meaning, and can, therefore, be used to add customized structure to a document.

Using the div Element
    <meta name="author" content="Adam Freeman"/>
    <meta name="description" content="A simple example"/>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
      .favorites {
      border: thin solid black;
      padding: 0.2em;
    <div class="favorites">
      <p>I like apples and oranges.
      I also like bananas, mangoes, cherries, apricots, plums, peaches and grapes.
      You can see other fruits I like <a href="fruitlist.html">here</a>.</p>
      <p>My favorite kind of orange is the mandarin, properly known
      as <i>citrus reticulata</i>.
      Oranges at my local store cost <s>$1 each</s> $2 for 3.</p>
    <p><strong>Warning:</strong> Eating too many oranges can give you heart burn.</p>
    <p>The <abbr title="Florida Department of Citrus">FDOC</abbr> regulates the
    Florida citrus industry.</p>
    <p>I still remember the best apple I ever tasted.
    I bought it at <time datetime="15:00">3 o'clock</time>
    on <time datetime="1984-12-7">December 7th</time>. </p>

In this example, we have shown a slightly different use for the div element, which is to group multiple elements of a different type together so that they can be styled consistently. We could have added a class attribute to both of the p elements contained within the div, but this approach can be simpler and relies on the way that styles are inherited.