The <div> tag defines logical divisions within a web page. This makes the page easier to manage, style, and manipulate. <div> tags also identify unique elements on your page for the purpose of applying specific styles.

You can nest <div> tags within one another. For instance, you may have a content region of your page within a <div> tag, and then you might also many other <div>s within that content region (sidebars, forms, photos with captions, etc.)

The <div> tag is a block-level element, which means it will display as its own block. Because of this, you cannot use <div> tags inside paragraph <p> or heading <h1> tags because the paragraph or heading will be broken at the point you entered the <div> tag. (To apply custom styles inside a paragraph or heading, use the <span> tag.)

<head>
<title>Example of id attribute</title>
A <link href="stylesheet.css" rel="stylesheet" type="text/css">
<style type="text/css">
B #header { width: 760px; }
C #imagebar { width: 560px; }
D #primary-navbar { width: 200px; }
</style>
</head>
<body>
E <div id="header">
F <div id="imagebar">
<img src="graphics/pagebanner.jpg">
</div> /F
G <div id="primary-navbar">
<ul>
<li><a href="about.html">About the Department</a></li>

<li><a href="programs.html">Programs and Courses</a></li>
<li><a href="faculty.html">Faculty and Staff</a></li>
<li><a href="news.html">News and Events</a></li>
</ul>
</div> /G
</div>
/E

For this example we have:

A. Linked our main stylesheet
B. Declared the element with id=”header” to be 760 pixels wide
C. Declared the element with id=”imagebar” to be 560 pixels wide
D. Declared the element with id=”primary-navbar” to be 200 pixels wide
E. Created a logical division within the page to contain the header section (everything between E and /E)
F. Created a division for the imagebar graphic (everything between F and /F)
G. Created a division for a navigation menu (everything between G and /G)

Note that in this example, the style declarations are defined within the document and not in the main stylesheet.css file. These styles would only be available to use on this page. For styles that will be used on multiple pages, save them in your central style sheet file.