Basics of XHTML tags and attributes

3 of 3

by Chrys

Created on: March 07, 2009 Last Updated: March 09, 2009

XHTML Basics - Part 4

Introduction

This is the fourth part of my series, XHTML Basics. In this part of the series, we look at XHTML tags in more details.

Single Tag Elements and Double Tag Elements

An element is made up of either a single tag or a pair of tags. When it is of a double tag, content goes in between (the tags). We have seen examples of these in the previous parts of the series.

Typing Tags When you have a Double Tag Element to type, you can type the pair of tags on one line in your text editor or on two lines. The following two sets of tags are equivalent:

<head><title>Simple</title></head>

is equivalent to,

<head> <title> Simple </title> </head>

It is good to type a single tag element on one line. However, if the tag is too long, you can type it on two or several lines; do not break the words in the tag.

Nesting Tags Consider the following tags:

The first one is for the Body element. The second one is for the Paragraph element. These tags can be nested as follows:

The following is the same as above:

What we have above is logical because a paragraph can only be content of the Body element. Single tag elements will always find themselves inside a double tag element.

Now, in XHTML, tags must be properly nested. This means that the following is correct:

<body> </body> right

while the following is wrong:

<body> </body> wrong

In the first case, the two paragraph tags are inside the Body element; that is correct. In the second case, one of the paragraph tags is inside the body element and the other is outside it; that is wrong.

Nesting Tags with Contents

The following code illustrates how you can nest tags with contents:

<body> body content can go here paragraph content can go here body content again can go here </body>

Attributes Consider the following Body element:

<body> Hello World! </body>

The content of the Body element is "Hello World". Now it is possible for you to make your web page appear red, in the browser. To do this, modify the first tag of the body element as follows:

<body bgcolor="red"> Hello World! </body>

What we have added to the first tag is, bgcolor="red". You have the text, "bgcolor" followed by an equal sign and then "red" in quotes. With the simple

Below are the top articles rated and ranked by Helium members on:

Basics of XHTML tags and attributes