Learn HTML and CSS: An Absolute Beginner’s Guide
Paragraphs? No problem. Headings? You’ve got them under your belt. In fact, you’re now familiar with the basic structure of a web page. The small selection of tags that we’ve discussed so far are fairly easy to remember, as their purposes are obvious (remember:
p = paragraph). But what on earth is a
div is used to divide up a web page and, in doing so, to provide a definite structure that can be used to great effect when combined with CSS.
When you place content inside a
div, it has no effect on the styling of the text it contains, except for the fact that it adds a break before and after the contained text. Unlike a
p element, the
div does not add any margins or padding. Compare the following:
The difference can be seen below.
The purpose of a
div is to divide (hence the abbreviation ‘div’) up a web page into distinct sections — a basic structural framework with no styling — whereas
p should be used to create a paragraph of text.
Important: Use Elements as Intended
Never use an XHTML element for a purpose for which it was not intended. This really is a golden rule.
Rather than leaving the paragraph tags as they are, you might decide to have something like this:
You can have as many paragraphs as you like inside that
div element, but note that you cannot place
div elements inside paragraphs. Think of a
div as a container that’s used to group related items together, and you can’t go wrong.
If we look at our homepage in the browser, it’s possible to identify areas that have certain purposes. These are listed below. We have:
- a header area that contains:
- the site name
- a tag line
- an area of body content
Take the homepage we’ve been working on (
index.html) and, in your text editor of choice, add
</div> tags around the sections suggested in Figure 2.19, “Noting distinct sections in the basic web page”. While you’re adding those
divs, add an
id attribute to each, appropriately allocating the names
bodycontent. Remember that attribute names should be written in lowercase, and their values should be contained within quotation marks.
Important: No Sharing
id attributes are used in XHTML to uniquely identify elements, so no two elements should share the same
id value. You can use these
id attribute set to
header should not be confused with headings on the page (
h2, and so on); nor is it the same as the
head of your HTML page. The
id= attribute could just as easily have been named
pageheader. It doesn’t matter, so long as the attribute name describes the purpose of that page section to a fellow human being (or to yourself 12 months after you devised it, and have forgotten what you were thinking at the time!).
To get you started, I’ve done a little work on the first part of the page. In the snippet below, that section has been changed to a
div with an
Now, try doing the same: apply
divs to the parts of the content that we’ve identified as “site branding” and “tag line.”
We already know that
divs can contain paragraphs, but a
div can also contain a number of other
divs. This is called nesting. It’s not tricky, it’s just a matter of putting one div inside the other, and making sure you get your closing tags right. Nesting elements can help to logically group sections of a web page together, just as you might do in the real world by placing a selection of small boxes containing similar items inside a larger box.
As Figure 2.19, “Noting distinct sections in the basic web page” shows, some nesting is taking place: the “site branding” and “tag line”
divs are nested inside the “header”
The Sectioned Page: All Divided Up
All things being well, your XHTML should now look like this:
Tip: Indenting Your Markup
It’s a good idea to indent your markup when nesting elements on a web page, as is demonstrated with the items inside the
div section above. Indenting your code can help resolve problems later, as you can more clearly see which items sit inside other items. Note that indenting is only really useful for the person — perhaps just you — who’s looking at the source markup. It does not affect how the browser interprets or displays the web page.
Notice that, in the markup above, comments appear after some of the closing
div tags. These comments are optional, but again, commenting is a good habit to get into as it helps you fix problems later. Often, it’s not possible to view your opening and closing
<div> tags in the same window at the same time, as they’re wrapped around large blocks of XHTML. If you have several nested
<div> tags, you might see something like this at the end of your markup:
In such cases, you might find it difficult to work out which
div is being closed off at each point. It may not yet be apparent why this is important or useful, but once we start using CSS to style our pages, errors in the XHTML can have an impact. Adding some comments here and there can really help you debug later.
How does the web page look? Well, we’re not going to include a screen shot this time, because adding those
div elements should make no visual difference at all. The changes we just made are structural ones that we’ll build on later.
Show a Little Restraint
Don’t go overboard adding
divs. Some people can get carried away as they section off the page, with
<div> tags appearing all over the place. Overly enthusiastic use of the
div can result in a condition that has become known as “
div-itis.” Be careful not to litter your markup with superfluous
<div> tags just because you can.