Breadcrumbs

Too Easy XHTML - Jumping Into XHTML [3]

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.

Let's Revise

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:

Code: XHTML

<em>emphasized/italic</em>
<strong>strong/bold</strong>
<big>large</big>
<small>smaller</small>
<sub>subscript</sub>
<sup>superscript</sup>

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.

Layer Tag

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

CSS and JavaScript are major components of web design and valuable resources to a powerful web page. XHTML has a set way to define <script> and <link> tags in order to be proper XHTML. Link tags define a resource reference and have a variety of uses (although we will only use it for external CSS style sheets in this lesson). Script tags define a script, commonly of which is JavaScript.

Script and link tags must be contained within the <head> tags. Here is an example of a common script declaration:

Code: XHTML

<script type="text/javascript">
    document.write("Hello World!");
</script>

As you notice, you define the scripting language using the type attribute. When using JavaScript make sure that the type attribute is set to text/javascript in order for it to be proper XHTML. Other possible scripting languages include text/ecmascript, text/jscript, text/vbscript, text/vbs, and text/xml.

To declare an external script you would make use of the src attribute. Make note that the proper closing tag is still used.

Code: XHTML

<script type="text/javascript" src="/script.js"></script>

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> tag:

Code: XHTML

<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.

The <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.

Code: XHTML

<p>
    This is a pargraph<br />
    with a line break
</p>

Page Validation

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.

Summary

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.