Structure

• The technologies involved in building a website separate content from formatting. The "div" elements in a Web page allow the developer to model each content item and page section, creating a logical structure for the page as a whole. The following sample HTML markup code demonstrates a "div" element with further elements nested inside it:
  
  <div>
  
  Here is some text.
  
  <div>
  
  <img src="animage.jpg" alt="an image"/>
  
  Here is more text.
  
  </div>
  
  </div>
  
  When Web developers initially create pages, they can insert the page content, with each section surrounded by "div" tags, allowing them to add more content and styling code incrementally.
  
  

HTML Variants

• Before XHTML, earlier versions of HTML markup sometimes included information related to presentation rather than content. XHTML aims to create pages in which content and style are determined in different places within the overall code for a Web page or site. The "div" tag is a major element within this style of Web development, because the element is purely designed to define a section of a page, rather than to apply particular appearance properties to it. This means that "div" elements can help developers to create pages that are higher quality and more reliable across Web browsers.
  
  

Layout

• When a developer creates a Web page with a series of "div" elements in it, she can use Cascading Style Sheet code to determine how these sections of content will appear to users viewing the page in a Web browser. CSS allows developers to apply positioning and lay out properties to the elements in a page, relative to one another. The following sample CSS code dictates that some elements should be floated on the same horizontal line as one another:
  
  div.outer
  
  { width:100%; }
  
  div.inner
  
  { width:400px; float:left; }
  
  div.inner img
  
  { float:left; }
  
  When applied to the sample HTML content, these declarations will cause the content to appear side by side, rather than with line breaks between the "div" elements, which is their default style as block elements.
  
  

Style

• CSS code can apply various styling properties to "div" elements in addition to determining their layout within the page. Using class and ID attributes, developers can create similar styles across the groups of elements within an entire site. For example, if a website contains lots of images with captions displayed next to them and the developer wishes to apply the same style properties to these caption sections, he can achieve the desired result by placing each section of caption text inside a "div" element with a particular class attribute, as follows:
  
  <div>Here is the caption text.</div>
  
  The CSS code can then identify and style these sections for the whole site as follows:
  
  div.capt {
  
  font-size:small;
  
  color:#333333;
  
  }