HTML - Div Element(s)

The <div> tag is nothing more than a container unit that encapsulates other page elements and divides the HTML document into sections. Web developers use <div> elements to group together HTML elements and apply CSS styles to many elements at once.

For instance, by wrapping a set of paragraph elements into a <div> element, the developer can take advantage of CSS styles and apply a font to all paragraphs at once by applying a font style to the <div> tag instead of coding the same style for each paragraph element.

Group together text elements within a <div> tag to slice up HTML documents.

<div id="myDiv" name="myDiv" title="Example Div Element">
  <h5>Subtitle</h5>
  <p>This paragraph would be your content paragraph...</p>
  <p>Here's another content article right here.</p>
</div>

With these text elements now grouped together under a <div> element, we can alter the appearance of each underlying element collectively by applying a style attribute to the <div> tag.

HTML - Div inside of Div

Placing <div> elements inside of other <div> elements allows these elements to be further subdivided.

<div id="myDiv" name="myDiv" title="Example Div Element" style="font-family: Helvetica; font-size: 12pt; border: 1px solid black;">
  <div id="subDiv1" name="subDiv1" title="Subdivision Div Element" style="color: #FF0000; border: 1px dotted black;">
    <h5>Section 1</h5>
    <p>This paragraph would be your content paragraph...</p>
    <p>Here's another content article right here.</p>
  </div>
  <br />
  <div id="subDiv2" name="subDiv2" title="Subdivision Div Element" style="color: #FF00FF;border: 1px dashed black;">
    <h5>Section 2</h5>
    <p>This paragraph would be your content paragraph...</p>
    <p>Here's another content article right here.</p>
  </div>
</div>

Divs Inside of Divs

This concept is the foundation of which most web pages are now built. HTML documents that are properly divided and subdivided are easy to maintain and modify.