Westciv Logo

These materials are copyright Western Civilisation Pty Ltd.


They are brought to you courtesy of Style Master CSS Editor and Westciv's standards based web development courses.

Please see our website for detailed copyright information or contact us [email protected].

westciv downloadable courses

html and xhtml

To give you a feel for the how the course works here's the chapter where you'll learn how to use <div>s and <span>s together with the class attribute.

Generic document structure

Before we move on from the subject of structuring documents with HTML, let's look briefly at the idea of generic structure. We've seen that HTML has elements for paragraphs, emphasis and so on. What happens when we have a kind of information which is not catered for by an existing element? Let's face it, HTML is a relatively simple set of elements. It can't possibly contain elements for every kind of information required for every purpose.

Suppose we want to markup a recipe, with ingredients, steps in the method, and so on. Sadly, we can't just create an <ingredient> element and a <step> element (though with XML (eXtensible Markup Language) we can do just that). We can however do something close. HTML provides two generic container elements, the div and the span. The div is a generic block element, while the span, as you might have guessed, is a generic inline element. What do we mean by generic? Well, with elements like paragraph or quote, there is a kind of meaning that the element itself has. If I ask, "what is a quote?", then there is a commonly understood answer. We say that these elements have a semantic component. With generic elements, there is no semantic component. When we ask "what kind of thing is a div?" There isn't really an answer. It's just a generic container for block content.

Generic Block Element

<div><h1>The Spice Emporium</h1><div>

Generic Inline Elements

<p>See <span>Ganesha</span> in Mumbai

What good are generic elements? Well we can use them, in conjunction with the first attribute we are really taking a look at, to create our own elements, in a way, or at least to extend the logical markup capabilities of HTML.

Think about these examples

<span>This is a problem</span>

<span class="alert">This is a problem</span>

<span class="instructions">Take a hammer</span>

With the second and third example, we've used the class attribute to add a semantic aspect to the element.

When we markup some content like this <span>This is a problem</span> the element carries no meaning other than that conveyed by its content. Is the content sarcastic, patronizing, admonishing, warning? We can't really tell. However, <span class="alert">This is a problem</span> conveys a particular meaning over and above the content itself. We know that it is a serious problem.

The class attribute allows us to specify the group or class of elements to which an element belongs. Let's take the example of a recipe, think about the different classes of information we might want to mark up, and then actually do this as part of the web site we're working on.

Exercise 9

In the directory called recipes, inside the spice_emporium_site directory, there is a file called masaman_prawn.html. The document already has the basic markup you've learnt about so far, paragraphs and headings. But we want to give it some generic structure.

First, let's identify the different kinds of information in the recipe, and determine whether they are inline or block elements.

Snapshot 5: Recipe with basic markup

This kind of task always calls for judgment, and often no two answers are the same, and no one answer is necessarily the right one. Here is my analysis. I've also simplified things a little in my example, because we're actually going to have to implement this in our HTML a little later, so we don't want to make it too complicated for our first go, do we?

If you have read many recipes, you'll know that almost invariably, recipes describe the dish, and specify the number of people the dish is for. So that's two kinds of information, a "description", and a "serves" (as in "serves 4").

Next, we have a list of ingredients.

Next we come to the Method. The method is a block of information.

The last type of information I'd identify is each of the steps in the method. These too are blocks of information. We could call these a "step".

Let's summarize.

  • description - block element
  • serves - inline element
  • ingredients - block element
  • method - block element
  • step - block element

Now, what has all this got to do with generic elements? We use the class attribute in conjunction with the generic elements to create our own structural elements. If the content we want to create is block type content (that is, it should appear separated from the preceding and following content) then we want to use a div element. If the content is inline content, we want to use a span element.

Note that for each, we've come up with a one word description. That's because class names must contain letters, numbers and hyphens (-) only. No underscores, no spaces, or other characters at all.

Exercise 10

Now let's mark the recipe up using generic content and the classes from the previous exercise.

Here we want to take these classes of information, and mark up our recipe into the relevant div and span elements, with the appropriate class attributes for each.

Remember that inline elements get marked up as span elements, while block elements get marked up as div elements. Remember too that the class attribute value must be quoted. Take a look at the code example above to see how to write a div or span element with a class attribute.

As you work, check it out in the browser and you should see the results, because the style sheets we've developed for the site already have rules which apply to each of these classes of element.

This exercise may take a little bit of time, and will test out your understanding of what we have covered in this part of the course. Main points to keep an eye one are

How did you go? Your HTML should look like this

<h1>Masaman Prawn Curry</h1>

<div class="description"><p>This all-time favourite Thai curry can also be made with chicken, beef or tofu. <span class="serves">Serves 4</span></p></div>

<div class="ingredients"><h2>Ingredients</h2>

<p>24 small-medium green king prawns</p>

<p>8 cardamom pods, slightly crushed</p>

<p>1 teaspoon salt</p>

<p>800mL coconut milk</p>

<p>400mL water</p>

<p>1/2 jar Thai Masaman Curry Paste</p>

<p>10 small new potatoes, peeled</p>

<p>1/2 butternut pumpkin</p>

<p>12 small pickling onions, peeled</p>

<p>4 tablespoons fish sauce</p>

<p>4 tablespoons lime or lemon juice</p>

<p>2 tablespoons palm sugar</p>

<p>25 fresh basil leaves</p>

<p>3/4 cup whole roasted peanuts</p></div>

<div class="method"><h2>Method</h2>

<div class="step"><p>1. Place coconut milk, water, cardamom pods and Curry Paste in a wok on medium heat. Stir the paste through and bring to simmer.</p></div>

<div class="step"><p>2. Halve the potatoes and onions if they are any bigger than a couple of cm sphere and chop up the pumpkin to a similar size.</p></div>

<div class="step"><p>3. Once the coconut milk is simmering well add the vegetables, the fish sauce, the lime juice and the palm sugar and mix it through.</p></div>

<div class="step"><p>4. Leave to simmer until the vegetables are cooked through. This will probably take about half an hour - use the potatoes as your indicator.</p></div>

<div class="step"><p>5. Roughly chop the basil leaves.</p></div>

<div class="step"><p>6. When you're ready to serve mix the basil leaves and peanuts through and serve immediately with steamed rice.</p></div></div>


And in the browser, the page should start to take this shape as you work

Snapshot 6: Recipe with generic elements marked up

Why do we bother with this? What practical benefits do we get? Perhaps the most important benefit is when it comes to styling the page with style sheets. When it comes to the appearance of this page, we will probably want to give a different appearance to various parts of the page. This can very easily be done using a style sheet, once the page is marked up in this way. One style sheet can then be used to give style to possible hundreds of recipes. You'll agree that this is a very good return on what is quite a small investment.