div - HTML Element

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

1495 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:
AttributesOther AttributesGlobal, I18n, Event

Links

  1. div - HTML Standard - whatwg.org

Tell us what you think:

  1. An in-dept look at the use of headings (h1-h6) and sections in HTML pages.
  2. Pagination can be a confusing thing to get right both practically and programmatically. I have put a lot of thought into this subject, and here I am giving you a few of the ideas I have been working with.
  3. The best way to deal with a trailing question mark is probably just to make it a bad request, because it is a very odd thing to find in a request URL.
  4. How to optimize image-loading and automatically include width and height attributes on img elements with PHP.
  5. HTTP headers are not case-sensitive, so we are free to convert them to all-lowercase in our applications.

More in: Web development