div - HTML Element

The div element is used when no other element is appropriate, and for presentational purposes.

1497 views

Edited: 2019-11-03 04:38

The HTML div element has no special meaning, and is commonly used when no other element is suitable – typically for design purposes.

Before you choose to use div, make sure that no other appropriate element fits in your situation. For example, for text you would normally want to use the p (paragraph) element. Also, instead of using divs for headers and footers, consider using the relevant elements. There are also elements for sectioning and navigation, and using them will make your site more accessible. divs can still be used as a fall-back for ancient browsers.

An example of how divs may be used is shown below:

<div id="header">
  <header>Header content goes here..</header>
</div>

Since all modern browsers support the header element, using a fallback div like above, should not be necessary. Divs can also be used for trivial design purposes, such as adding borders, or creating columns in a layout (each column wrapped in a div).

A basic layout example, which is using divs, is included below:

<!DOCTYPE html>
<html lang="en">

  <head>
   <title>Div Usage Example</title>
   <style type="text/css">
    #WidthControl {
      width:90%;
      max-width:1600px;
      min-width:300px;
    }
    #columnA {float:right;width:25%}
    #columnB {float:left;width:70%;}
   </style>
  </head>

  <body>
    <div id="WidthControl">

     <div id="columnA">
      <nav>
       <ol>
        <li>About</li>
        <li>Privacy</li>
        <li>Contact</li>
       </ol>
      </nav>
     </div>

     <div id="columnB">
      <article>
       <h1>Main Content</h1>
       <p>Main content goes here...</p>
      </article>
     </div>

    </div>
  </body>

</html>

Attributes

Attribute:	Value:	Description:
Attributes	Other Attributes	Global, I18n, Event

div - HTML Element

Attributes

Links

Tell us what you think: