tags

what are tags?

To all intents and purposes, web sites are tags and tags are web sites. Every piece of formatting you apply to the plain text is done with a tag, or a pair of tags. Even attributes (which we will discuss this week) and styles (which we cover in lecture 2) can't exist without tags. This page lays out the general rules about tags rather than specific examples, but we will see plenty of those in subsequent lectures.

Once again, remember how in the lecture we used the example of punctuation as an everyday instance of markup. For quotations, we place "marks at the beginning and end of the passage, like this". So it is with tags. For instance, there is a tag which can change plain text into bold text. Have a look at the code which produced that last sentence:

For instance, there is a tag which can change plain text into <b>bold text</b>.

You can see how the interpreted page - what you're looking at now - does not show the tags themselves, but does show their effects. To reinforce the point here is some more code, showing how I've just used another common tag, the <i> tag:

You can see how the <i>interpreted</i> page...

Back to the top

formatting rules

Web design is a pretty precise skill. You usually have to do things in exactly the right way to make them work. So it is with tags. You can't enclose tags in square brackets [ ], parentheses ( ) or anything else: only angle brackets < > will do. (Actually, they're the mathematical "less than" and "greater than" signs and usually appear above the full stop and comma on the bottom row of the keyboard.)

The general format of tags is as follows:

<tagname [attributes...]>Text to be formatted by the tag</tagname>

We'll come to attributes on a different page. What is important here is that you understand, first, the importance of opening and then closing the tag. If you forget to close a tag the formatting will "leak out" into other text and make your page look strange. Sometimes this can lead to chunks of text not appearing on your page at all. Closing a tag is done by repeating the tag name but with that forward slash / beforehand.

Note one of two common problems here. The first is to forget one of the < >. Sometimes you see things like B>this</B> on web pages - an opening < has been left off by mistake. The other is to forget to include the / in the closing tag, meaning that the browser will just count it as another opening tag and the formatting will, once again, leak out.

Do tags always have to be in lower case? I've seen a lot of web pages which use UPPER CASE in the tags. Good point. It depends on the version of HTML you are using. Up until summer 2004, in fact, this course taught HTML 4.01 (and the site was written to that standard) and in that, it didn't matter whether tags were in UPPER CASE or lower case. You could even mix them in a pair (e.g. <b>Bold text</B>). But XHTML 1.0, which is more up-to-date, insists on lower case for all tags. Maybe someone flipped a coin one day at the WWW Consortium (the people who set the rules for web design) and it came up tails rather than heads. Whatever - that's the way it is now.

Not all tags need a closing tag. The exceptions are those which do not format text but place an "object" on a page, like an image. I will point out these exceptions when they arise.

You might also be wondering just how it is the browser "knows" to, for instance, turn links blue and underline them, as on this page (and again, refer to the code reproduced above). The answer there lies in the concept of styles, and we will discuss it in lecture 2.

Back to the top

nesting tags

Web design would be rather limited if you could only apply one tag at once. Actually you can apply any number of tags to a particular bit of text. The technical term for doubling up (or trebling, or whatever) tags is nesting. The following text, for instance, is both bold and italic, and has been produced by the following code:

The following text, for instance, is <i><b>both bold and italic</b><i>, and has been produced by the following code:

If you do this, remember to close the tags in the opposite order than they were opened. That's why it's called "nesting". Here, the <b> tag is "nested" within the <i> tag. They do not overlap. It's always the case that the last tag you opened is first to be closed.

This is a simple case, but nesting is used in more complex ways than this. All of the examples shown so far have themselves been nested within another tag we've not met yet, the paragraph or <p> tag. And all page content is effectively nested within <body> tags. Some other tags, such as table tags, exhibit complex nesting structures. Those can be left for now. When we start working with actual tags in lecture 2 this should become clear.

When you've finished on this page you should really go straight to the page about attributes.

Back to the top

Back to the menu for lesson 1