Tag <div> HTML Reference

Example

A section in a document that will be displayed in green:

<div style="color:#00FF00">
  <h3>This is a header</h3>
  <p>This is a paragraph.</p>
</div>

Browser Support

Internet Explorer Firefox Opera Google Chrome Safari

1. Definition and Usage

The <div> tag defines a division or a section in an HTML document.

The <div> tag is used to group block-elements to format them with styles.

2. Tips and Notes

Tip: The <div> element is very often used together with CSS, to layout a web page.

Note: By default, browsers always place a line break before and after the <div> element. However, this can be changed with CSS.

3. Differences Between HTML and XHTML

None

4. Optional Attributes

DTD indicates in which HTML 4.01/XHTML 1.0 DTD the attribute is allowed. S=Strict, T=Transitional, and F=Frameset.

Attribute Value Description DTD
align left
right
center
justify		 Deprecated. Use styles instead.
Specifies the alignment of the content inside a <div> element		 TF

5. Standard Attributes

The <div> tag supports the following standard attributes:

Attribute Value Description DTD
class classname Specifies a classname for an element STF
dir rtl
ltr		 Specifies the text direction for the content in an element STF
id id Specifies a unique id for an element STF
lang language_code Specifies a language code for the content in an element STF
style style_definition Specifies an inline style for an element STF
title text Specifies extra information about an element STF
xml:lang language_code Specifies a language code for the content in an element, in XHTML documents STF

6. Event Attributes

The <div> tag supports the following event attributes:

Attribute Value Description DTD
onclick script Script to be run on a mouse click STF
ondblclick script Script to be run on a mouse double-click STF
onmousedown script Script to be run when mouse button is pressed STF
onmousemove script Script to be run when mouse pointer moves STF
onmouseout script Script to be run when mouse pointer moves out of an element STF
onmouseover script Script to be run when mouse pointer moves over an element STF
onmouseup script Script to be run when mouse button is released STF
onkeydown script Script to be run when a key is pressed STF
onkeypress script Script to be run when a key is pressed and released STF
onkeyup script Script to be run when a key is released STF

Other HTML/XHTML tags:

<a> <abbr> <acronym> <address> <area> <b> <base> <bdo> <big> <blockquote> <body> <br> <button> <caption> <center> <cite> <code> <col> <colgroup> <dd> <del> <dfn> <dir> <div> <dl> <dt> <em> <fieldset> <font> <form> <frame> <frameset> <head> <h1> - <h6> <hr> <html> <i> <iframe> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <map> <menu> <meta> <noframes> <noscript> <object> <ol> <optgroup> <option> <p> <param> <pre> <q> <s> <samp> <script> <select> <small> <span> <strike> <strong> <style> <sub> <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <title> <tr> <tt> <u> <ul> <var>

Relative articles

Overflow CSS – About and How to use it in various conditions

Overflow CSS – About and How to use it in various conditions

Today I will tell you about CSS again. This is will property called ‘overflow’. This property already in CSS since second version (CSS2). All popular browsers like Firefox, IE, Safari, Opera etc supporting this property. I will tell about IE browsers in details a little after.

Overflow property determines the behavior of a block-type element in situations, where its contents exceeds its size. Overflow property can have five values. Each value defines two aspects of the generated element: whether to display the contents outside of the block itself and are we will have scrolling mechanism. If the value of the overflow property is auto, the browser displays the contents of the element according to its settings, plus – it should allow the user to scroll if the content does not fit in the container.
(more…)

Written by: admin on February 22, 2011.
Last revised by: admin on March 1, 2011.
Bottom Menu Builder (HTML5)
Bottom Menu Builder (HTML5)

Bottom Menu Builder (HTML5)

Bottom navigation website menu. I am sure that you have seen it many times (at different websites). As usual, this is three-four columns menu with different links. Today I would like to show you a builder, which you can use to build that bottom menu. Main purpose of this builder – prepare static HTML code (as cache file) for embedding into bottom of your website. If you like that idea, you are welcome to play with it, and I will tell you about creation of nice user friendly menu builder. This tutorial is separated into 2 parts, today I will tell you about first side: user interface with drag and drop possibility.
(more…)

Written by: admin on May 14, 2012.