XHTML Tutorial #1 - The Beginning - Page 4

Home » XHTML Tutorials » #1 - The Beginning 1 3 3 4 previous

Tags within tags within tags...

XHTML tags are kind of like a bunch of little nested boxes, or like those Russian egg-shaped dolls where when you open one, there's a smaller on inside.

Let's take another look at the XHTML web page we created on page 3 of this tutorial.

<html>

<head>

<title>XHTML - Adding Some Tags</title>

</head>

<body>

<h1>Basic Tags</h1>

<p>This is a paragraph</p>

</body>

</html>

Each of the tag pairs defines an element. The example above has 6 elements:

<html> </html> (blue box) defines the XHTML Document Element. This element is actually the entire web page. A page may only have one Document Element.
<head> </head> (first green box) defines the Head Element. This element contains information about an XHTML document like META tags, links to external CSS and Javascript documents, etc. Note the the Head Element is contained entirely within the Document Element. A page may only have one Head Element.
<title> </title> (first red box) defines the Title Element. This element specifies the document title. Most browsers will put this information in the bar at the top of the browser window. Note the Title Element is contained entirely within the Head Element. A page may only have one Title Element.
<body> </body> (second green box) defines the Body Element. This element contains the data that is (for the most part, with certain exceptions) displayed by the browser. Note the Body Element is contained entirely within the Document Element. A page may only have one Body Element.
<h1> </h1> (second red box) defines the Header Element. This element displays specialized text in different sizes based on the numeral (1 through 6) after the letter h. Note the Header Element is contained entirely within the Body Element. A page may contain multiple Header Elements.
<p> </p> (third red box) defines the Paragraph Element. This element is workhorse of most web pages, displaying text on the page. Note the Paragraph Element is contained entirely within the Body Element. A page my contain multiple Paragraph Elements.

In order for the XHTML document to be "well formed" each tag pair must be closed inside of it's parent tag. Perhaps an incorrect example might make this a little more clear:

<h1>This is the header
<p>And this </h1> is the paragraph </p>

Note that the closing tag of the header element is contained within the paragraph element. A browser is probably going to interpret this correctly, and display the first line as the head, and the second line as a paragraph, and just ignore the closing header tag completely. Sometimes it's not so simple, and browsers will have very different ways of displaying the data.

In the next tutorial we'll look at some basic text elements.

BestWebTutorials.com is a free service of CrystalClearWeb.net. You can help us keep providing free tutorials and information by:

Link to us
Tell a friend
Correct any you might find
Make for improvement
Make a donation

BestWebTutorials.com attempts to post accurate information on this site, but we cannot guarantee that errors do not sometimes occur. The use of code examples from this site in any other site is at the user's own risk. We cannot guarantee that our code might not be in conflict with code written by others, or that our code is fit for other uses.

For further information please review our Terms of Use and Privacy Policy.