How to Use and Display HTML DIV Tags

Modern HTML prescribes an array of semantic tags, one of the most common being DIV tags, which are used to organize and structure a document. They are block level elements, which means that even without additional formatting instructions, they will add page breaks before and after content. For content that is not logically separate from its surroundings, the SPAN tag is a better choice.

Instructions

1. Consider how you would like a page to be structured. For instance, there might be a navigation section, a body section, a sidebar, a footer and more. Each of these should be grouped into its own logical unit, addressable with an HTML DIV tag.

2. For each logical unit, create a DIV tag. For example, all the body content would go into a DIV that looks like this:<div id="body"> Content Goes Here </div>The id attribute indicates that there should only be one body element per page. The </div> is a closing tag that tells us the tag is complete.

3. Understand that sometimes a logical unit is expected to occur more than once per page. For example, a book entry might be enclosed in a DIV tag, and there may be several of these on the same page, all styled similarly. When this is the case, a class attribute is used instead of an id attribute:<div class="entry"> Content Goes Here </div>

4. When using a CSS style sheet to add styles to your tags, a DIV tag with id attributes is accessed differently than a DIV with class attributes. A DIV with id attributes is referenced with a pound sign, and a DIV with class attributes is preceded by a period.#content { styles for DIV with id="content" go here }.entry { styles for DIV with class="entry" go here }