XHTML: The Lowdown on Structural Markup
If you want to write pages that are easier to code and update, then XHTML is the way to go. With XHTML, your markup is structural. This means that if something is a list, you use a list tag (<ul> or <ol>) for it, rather than just hitting return after every line or putting all the items into a table. In fact, the only thing that tables are used for in XHTML is presenting tabular data, like a calendar or spreadsheet. Tables are never used for page layout. Moreover, with XHTML you don't include any code that specifies how the page should look.
So how do you write XHTML? Well, XHTML is a version of HTML that has been modified to be valid XML. The result is that XHTML is very similar to HTML but has slightly stricter rules. Mostly what this means is that you have to close every tag. Make sure you put a </p> at the end of every <p>. And tags that don't have a separate closing tag, like <img> or <br> look like this in XHTML: <img /> <br />.
A Closer Look: XHTML Tags
So let's talk about actual tags. Remember, if we tell you not to worry about how something looks it just means that you shouldn't worry about it while writing your markup. You will specify how things look in the next section of this tutorial which deals with CSS.
As usual, you will start with the <body> tag. Leave out presentational attributes like bgcolor or vlink.
You can expect to use the header tags <h1> through <h6> often (make sure that you use them properly - h1 is for the most important headings, h6 is for the least important headings.) A good rule of thumb is that your page should never use an h3 unless you already have an h1 and an h2 somewhere above it. In other words, the header tags describe an outline of your page.
When you are writing text for your page, it should go in paragraph (<p>) tags. Make sure you close your <p> tags, and don't use <br /> when you mean <p>.
You can make bold text with <strong> and italic text with <em> (em is short for emphasis). Using these tags rather than <b> and <i> means that your page is describing the text as being important, instead of just saying that it should look wider or more slanted.
To make lists, use the <ul> tag for unordered lists or the <ol> tag for ordered lists. Use the <li> tag for items in your list. Don't worry about bullet points or numbers.
Hopefully these tags have all been somewhat familiar. However, after reading this far you may be scratching your head about how you make things look interesting. So next we're going to introduce a couple of tags you may be less familiar with that help you do just that.
Div and Span
In XHTML, not only do you lose the ability to use tables for page layout, you also lose the <font> tag for text sizing and coloring. Fortunately, you get two even more powerful tools in return: the <div> and <span> tags.
The <div> tag divides your page into structural sections. For example, if you look at the source code of this page, you will see that the first line in the body is: <div id="whole-page">, and within that div you have four more divs: header, nav, main, and footer.
The <span> tag replaces the <font> tag, but is much more flexible. Use span when you want to achieve a purely visual effect (otherwise use a tag such as <h1>, <strong>, <em>, etc.)
Classes and IDs
A class is an attribute that any tag can have. The exciting part is that you get to make up your own class names. For example, you could write <a class="navigation"> or <span class="booktitle">. Classes are reusable, so if you have some another navigation link or book title, you can apply your navigation class or your booktitle class again. This way you can easily make them all look consistent.
An ID is similar to a class, but is unique. Therefore IDs are good for marking off unique areas of your page. You will often use divs with different IDs to control the position and appearance of different sections of your page.
A Few More Boring Rules
We mentioned earlier that you must close every tag in XHTML, unlike HTML. There are a few more rules that have changed from HTML, as we can see in the following example:
<!-- Valid HTML (but invalid XHTML) -->
<!------------------------------------>
<A HREF="index.php?page=10&display=5">
<IMG SRC="MyPicture.jpg"WIDTH=50 HEIGHT=30>
</A>
<!-- Valid XHTML (also valid HTML) -->
<!--===============================-->
<a href="index.php?page=10&display=5">
<img src="MyPicture.jpg" width="50" height="30" />
</a>
Here is a short list of the important differences:
- XML is case-sensitive, so you must write all tag names (e.g. img, a, p) in lowercase, and you must write all attributes (e.g. href, src, width, height) in lowercase as well.
- Put quotes around all attribute values (e.g. width="50", not width=50).
- Include a space between each attribute (e.g. width="50" height="30", not width="50"height="30").
- Double dashes (--) are not allowed within comments.
- Close all tags, including <p> and <img /> tags.
- Always use & when you want an ampersand (even in hyperlinks, as in the example above), and always use < and > when you want less-than and greater-than symbols in your text.
This stuff is boring, but if you want to write valid code you have to follow the rules. Enough said, now let's move on to more interesting topics.
