Too Easy XHTML - Jumping Into XHTML 
- Fri 18 Mar 2005 at 22:15
In Parts 1 and 2 we've learned the uses of XHTML and its basic syntax. With the fundamentals of XHTML set aside it is time to jump into the world of XHTML and start creating basic web pages. Here in Part 3 we will look at some basic XHTML tags and page validation.
Earlier we learned the basic parts of an XHTML page includes the XML declaration, the DTD declaration, the
<html> root tag, the
<head> section, the MIME type, and the
<body>. We also learned about the MIME type dilemma and the XMLNS declaration for the XHTML namespace.
In Part 2 we also looked at XHTML tags. To recap, we learned that all tags and attributes are case sensitive and have to be in lower case, we need to avoid attribute minimization, that tags must be "well-formed", and that all tags must properly close.
Inline and Block Elements
In XHTML you have block and line elements. Block elements occupy a rectangular area of the page, such that the content of the block starts a new line on the page. Inline elements flow along with the text of a document. In this lesson we'll mainly be focusing on inline elements, due to their simplicity for a jump start into XHTML.
Blocks generally take up the available width on the page, but the height of a block usually depends on what it contains. An inline element can occupy just part of a line or it can run over several lines, depending on how much content it contains.
Quickly Styling Fonts
There are a number of XHTML tags that can be used to emphasize, enlarge, shrink, etc. text in your document. These elements are all inline, flowing smoothly with the block element they're contained in. Some commonly used inline elements are:
Although XHTML offers a wide variety of inline elements to quickly style isolated text, try to limit yourself to this to start with. Later you can use a wider flavor of tags to enhance your document's structure.
Although HTML contains a variety of interesting block elements, in XHTML you'll find yourself mainly using one block element, the layer tag. We won't touch completely on the layer tag, as its styling is meant to be controlled by CSS. The
<div> (layer tag) is extremely common in an XHTML document that is often styled using CSS. We'll cover more on simple CSS styling in another part of this guide.
Link and Script Tags
Script and link tags must be contained within the
<head> tags. Here is an example of a common script declaration:
As you notice, you define the scripting language using the
To declare an external script you would make use of the
src attribute. Make note that the proper closing tag is still used.
Using external style sheets keeps your XHTML documents clean and free of styling clutter. Although you can have inline styles and internal styling, they won't be covered in this guide. To link to an external style sheet you use the
<link rel="stylesheet" type="text/css" href="theme.css" />
In the above code you see three attributes set in the self-closing
<link> tag. As I mentioned earlier there are a fleet of uses for the
<link> tag, but we'll only be looking at its use for linking to style sheets in this lesson. The
href attribute is the location or URL of the external style sheet. This attribute is the only one that you'll have to alter to set your CSS style sheet.
Paragraphs and Line Breaks
Out of all other inline elements, both the paragraph and line break tags are the most common. When you begin to use CSS for easy styling you'll find that most other tags will render pointless, but both the paragraph and line break tags will remain essential.
<p> (paragraph) tag defines a paragraph including margins for proper spacing. The
<br /> (line break) tag inserts a single line break, in other words to skip a line. Pay close attention that the line break tag is self-closing.
This is a pargraph<br />
with a line break
XHTML coders are offered XHTML validators to validate that their pages are proper XHTML. The W3C provides a validator for your markup (external link).
Simply enter the URL of your page and it will check your markup for mistakes in your document. Expect to have errors in your page that you've missed, just fix them and revalidate until you're error free! Having your page validates proves that you've taken the time and effort to have a structured document.
Over these first three lessons you've learned the basics of XHTML along with a handful of tags to get started. In Part 4 we'll take a look at image tags, hyperlinks, XHTML entities, and XHTML's important set of header tags.