debbie T Designs - Web Design Made Simple
The Div Tag for Page Divisions
Dividing the Page with the
<div> tag is used to establish separate divisions or areas of your page. It is one of the most powerful elements in xhtml, as it is essential for positioning the design of your page using CSS.
Positioning will not be discussed in this tutorial, but gaining a solid understanding of the
<div> tag now, will make it easier to learn more advanced positioning if and when you decide to learn more.
The id Attribute
The id attribute can be used with any tag element, but to identify and define an area of your page, the
<div> tag can be used.
Facts about id’s:
- The value for the id attribute must be used only once on your page. It is a unique identifier.
- Keep in mind that the id value is case-sensitive. "Top" is different from "TOP" and also different from "top" – it is easiest to use all lower case letters.
- Do not use spaces or any special characters as the id value. You may use letters, digits (1 thru 9), dashes (-), and underscores (_) but you must start the id value with a letter.
Working with the example file created from prior tutorials, examine the page displayed in your web browser. How is the page organized? (view my example 7coding.html file if you haven’t created one of your own yet.)
- heading, content, email, footer
- heading, italian, chinese, chocolate, email, footer
- heading, content, footer
Divisions can be detailed, simple, or somewhere in between; there are no wrong answers when defining the divisions of your page. It’s all relative, like art appreciation!
Please view the 9coding.html file and take a look at the source code. Three
<div> tags have been added, with ids for heading, content and footer. You will notice I kept the ids in each
<h2> tag for italian, chinese, and chocolate. I have added detailed xhtml comment explanations.
Understand that the
<div> tags added to my example files are not visually displayed on the page when viewed in a web browser. The true visual power of the
<div> tag will not be known until CSS is implemented.
Do not be frustrated if you do not fully understand every bit of the code; just think of this as an example you can refer to again in the future.
Applying Divisions to Your Own Web Page
Practice using the
<div> tag by adding specific divisions to your own web page. You may find it it easier to work with a brand new file, or you can work with the same file used in past tutorials.
It doesn’t have to be anything fancy; work slow, and validate after every edit. Errors that are found early, are easier to fix.
For another example of web page division using the
<div> tag, please view my div.html file.