<div>

  • Revision slug: HTML/Element/div
  • Revision title: <div>
  • Revision id: 351901
  • Created:
  • Creator: ethertank
  • Is current revision? No
  • Comment

Revision Content

Summary

The HTML <div> element (or HTML Document Division Element) is the generic container for flow content, which does not inherently represent anything. It can be used to group elements for styling purposes (using the class or id attributes), or because they share attribute values, such as lang. It should be used only when no other semantic element (such as {{HTMLElement("article")}} or {{HTMLElement("nav")}}) is appropriate.

Usage context

Attributes

This element includes the global attributes.

In {{HTMLVersionInline(5)}}, the align attribute on <div> is {{obsolete_inline}}.

Examples

<div>
  <p>Any kind of content here. Such as &lt;p&gt;, &lt;table&gt;. You name it!</p>
</div> 

Result

Any kind of content here. Such as <p>, <table>. You name it!

Specifications

Specification Status Comment
{{SpecName('HTML WHATWG', 'grouping-content.html#the-div-element', '<div>')}} {{Spec2('HTML WHATWG')}}  
{{todo}}{{SpecName('HTML5 W3C', 'the-div-element.html#the-div-element', '<div>')}} {{Spec2('HTML5 W3C')}}  
{{SpecName('HTML4.01', 'struct/global.html#h-7.5.4', '<div>')}} {{Spec2('HTML4.01')}}  

Browser compatibility

{{CompatibilityTable}}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}}
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}}

See also

  • Semantic sectioning elements: {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}
  • {{HTMLElement("span")}} element for styling of phrasing content
{{HTML:Element_Navigation}}

Revision Source

<h2 id="Summary" name="Summary">Summary</h2>
<p>The <strong><a href="/en-US/docs/HTML" title="HTML">HTML</a> <code>&lt;div&gt;</code> element</strong> (or <em>HTML Document Division Element</em>) is the generic container for flow content, which does not inherently represent anything. It can be used to group elements for styling purposes (using the <strong>class</strong> or <strong>id</strong> attributes), or because they share attribute values, such as <strong>lang</strong>. It should be used only when no other semantic element (such as {{HTMLElement("article")}} or {{HTMLElement("nav")}}) is appropriate.</p>
<h2 id="Usage_context" name="Usage_context">Usage context</h2>
<ul class="htmlelt">
  <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Flow content</a>, palpable content.</li>
  <li><dfn>Permitted content</dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Flow content</a>.</li>
  <li><dfn>Tag omission</dfn> {{no_tag_omission}}</li>
  <li><dfn>Permitted parent elements</dfn> Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">flow content</a>.</li>
  <li><dfn>DOM interface</dfn> {{domxref("HTMLDivElement")}}</li>
</ul>
<h2 id="Attributes" name="Attributes">Attributes</h2>
<p><span style="line-height: 21px;">This element includes the&nbsp;</span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">global attributes</a><span style="line-height: 21px;">.</span></p>
<p>In {{HTMLVersionInline(5)}}, the <strong>align</strong> attribute on <code>&lt;div&gt;</code> is {{obsolete_inline}}.</p>
<h2 id="Examples" name="Examples">Examples</h2>
<pre class="brush: html">
&lt;div&gt;
  &lt;p&gt;Any kind of content here. Such as &amp;lt;p&amp;gt;, &amp;lt;table&amp;gt;. You name it!&lt;/p&gt;
&lt;/div&gt; 
</pre>
<h3 id="Result" name="Result">Result</h3>
<p>Any kind of content here. Such as &lt;p&gt;, &lt;table&gt;. You name it!</p>
<h2 id="Specifications" name="Specifications">Specifications</h2>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Specification</th>
      <th scope="col">Status</th>
      <th scope="col">Comment</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{SpecName('HTML WHATWG', 'grouping-content.html#the-div-element', '&lt;div&gt;')}}</td>
      <td>{{Spec2('HTML WHATWG')}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>{{todo}}{{SpecName('HTML5 W3C', 'the-div-element.html#the-div-element', '&lt;div&gt;')}}</td>
      <td>{{Spec2('HTML5 W3C')}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.5.4', '&lt;div&gt;')}}</td>
      <td>{{Spec2('HTML4.01')}}</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari (WebKit)</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>1.0</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatVersionUnknown}}</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Phone</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatVersionUnknown}}</td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="See_also" name="See_also">See also</h2>
<ul>
  <li>Semantic sectioning elements: {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}</li>
  <li>{{HTMLElement("span")}} element for styling of phrasing content</li>
</ul>
<div>
  {{HTML:Element_Navigation}}</div>
Revert to this revision