Learn HTML and CSS: An Absolute Beginner’s Guide

Adding Structure

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?

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:

<p>This is a paragraph.</p>        
<p>This is another paragraph.</p>        
<p>This is yet another paragraph.</p>        
<p>And just one more paragraph.</p>        
       
<div>This is a div.</div>        
<div>The content of each div appears on a new line.</div>        
<div>But unlike paragraphs, there is no additional padding.</div>        
<div>A div is a generic block-level container.</div>

The difference can be seen below.

Paragraphs have additional spacing above and below, unlike div elements

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:

<div>        
 <p>This is a paragraph inside a div.</p>        
 <p>So is this.</p>        
</div>

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> and </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 header, sitebranding, tagline, and bodycontent. Remember that attribute names should be written in lowercase, and their values should be contained within quotation marks.

Important: No Sharing ids

id attributes are used in XHTML to uniquely identify elements, so no two elements should share the same id value. You can use these ids later, when you’re dealing with elements via CSS or JavaScript.

Note: h1, header, and head

An id attribute set to header should not be confused with headings on the page (h1, 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 topstuff or 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 id attribute:

Example 2.12. index.html (excerpt)

<div id="header">        
 <h1>BubbleUnder.com</h1>        
 <p>Diving club for the south-west UK – let’s make a splash!</p>        
</div> <!– end of header div –>

Now, try doing the same: apply divs to the parts of the content that we’ve identified as “site branding” and “tag line.”

Nesting Explained

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.

<div id="outer">        
 <div id="nested1">        
   <p>A paragraph inside the first nested div.</p>        
 </div>        
 <div id="nested2">        
   <p>A paragraph inside the second nested div.</p>        
 </div>        
</div>

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” div.

The Sectioned Page: All Divided Up

All things being well, your XHTML should now look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"        
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">        
 <html xmlns="http://www.w3.org/1999/xhtml">        
   <head>        
     <title>Bubble Under – The diving club for the south-west        
         UK</title>        
     <meta http-equiv="Content-Type"        
         content="text/html; charset=utf-8"/>        
   </head>        
   <body>        
     <div id="header">        
       <div id="sitebranding">        
         <h1>BubbleUnder.com</h1>        
       </div>        
       <div id="tagline">        
         <p>Diving club for the south-west UK – let’s make        
             a splash!</p>        
       </div>        
     </div> <!– end of header div –>        
     <div id="bodycontent">        
       <h2>Welcome to our super-dooper Scuba site</h2>        
       <p><img src="divers-circle.jpg" width="200" height="162"        
           alt="A circle of divers practice their skills"/></p>        
       <p>Glad you could drop in and share some air with us! You’ve        
           passed your underwater navigation skills and        
           successfully found your way to the start point – or in        
           this case, our home page.</p>        
       <h3>About Us</h3>        
       <p>Bubble Under is a group of diving enthusiasts based in        
           the south-west UK who meet up for diving trips in the        
           summer months when the weather is good and the bacon        
           rolls are flowing. We arrange weekends away as small        
           groups to cut the costs of accommodation and travel and        
           to ensure that everyone gets a trustworthy dive        
           buddy.</p>        
       <p>Although we’re based in the south-west, we don’t stay on        
           our own turf: past diving weekends away have included        
           trips up to Scapa Flow in Scotland and to Malta’s        
           numerous wreck sites.</p>        
       <p>When we’re not diving, we often meet up in a local pub        
           to talk about our recent adventures (any excuse,        
           eh?).</p>        
       <h3>Contact Us</h3>        
       <p>To find out more, contact Club Secretary Bob Dobalina on        
           01793 641207 or        
          <a href="mailto:bob@bubbleunder.com">email        
          bob@bubbleunder.com</a>.</p>        
     </div> <!– end of bodycontent div –>        
   </body>        
 </html>

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:

   </div>        
   </div>        
 </div>

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.

    </div> <!– end of inner div –>        
   </div> <!– end of nested div –>        
 </div> <!– end of outer div –>

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.

Go to page: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

No Reader comments

Comments on this post are closed.