|
Page 1 of 2 If you have been following me, you have begun to familiarize yourself with proper (X)HTML and CSS syntax. You don't have to write the code by hand, but it is helpful to be familiar with it because you can't count on your WYSIWYG editor to get it right. Learning the web markup isn't hard, but things can get confusing because HTML 4 and XHTML are different, but similar standards. Let's clear up some of the confusion by taking a closer look.
This is not meant to be a complete tutorial on web markup. For that you can visit the many web pages out there like W3 Schools. I will only cover some basic points. Before we get to HTML vs XHTML, you should be familiar with what is called a “doctype declaration.” Most modern web pages have a doctype declaration. It is the first line of code on every page. It may looks like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> This declaration is not an HTML tag—it just tells the web browser which version of the markup language the page is written in and is used to trigger different rendering modes. Most of the doctype declaration looks like gobbledygook, but it does contain important information. In the above-example, the version is XHTML 1.0 Transitional. You can find out all you need to know about doctype declarations, including examples, at the W3C website . There is more than one doctype option. You can declare HTML or XHTML, and either “strict” or “transitional” (there is a third option called “frameset,” but please don't go there). If you use a CMS, the decision as to which doctype you use has been made for you. Most of them seem to gravitate towards XHTML 1.0 transitional. There is probably no reason to change to a different doctype, and it can break your site if you do. It is vital that you are aware of which doctype your CMS uses—mixing and matching the two standards can break things, and it can harm your site's cross browser support. But let's talk a little about what these doctypes mean. HTML vs XHTMLThe basic difference between HTML 4 and XHTML 1.0 is one of syntax. They both share the same basic tags, but have different syntactical rules. The difference stems from applying XML (eXtensible Markup Language) rules to HTML tags. The result is XHTML. The four basic XHTML rules are as follows: 1. All XHTML tag names and attributes must be in lower caseSimple enough. Here is an example of correct and incorrect XHTML. <p>This paragraph is correct XHTML</p>
<P>This paragraph is not correct</P> 2. All XHTML elements must be properly closedThe first thing you learn about HTML is the difference between an opening and a closing tag (the latter has a forward slash). You can see that in the first example, which properly closes the paragraph tag. Some tags in HTML will render properly even if you omit the closing tag. For example, the following will work, even though it is invalid syntax:<p>This is the first paragraph.
<p>This is the second paragraph. Here, two paragraphs of text are indicated by the opening paragraph tag. Most browsers will interpret the beginning of the second paragraph tag as closing the previous paragraph. The XHTML looks like this with proper closing paragraph tags: <p>This is the first paragraph.</p>
<p>This is the second paragraph.</p> Just remember, for XHTML, all tags must be closed. Period. But not all tags have a separate closing tag. Some elements are “empty.” Take the line break tag for example. The line break tag starts a new line, but does not start a new paragraph. First line. <br> This is what an HTML break looks like. It doesn't have a separate tag to close it out because the element doesn't contain anything, it's just a line break. But under XHTML, all tags must be closed. Period. Here is a valid XHTML line break and image tag: First line. <br />
An image: <img src=”kitten.png” alt=”Mittens” /> See the difference? Just add a space and a forward slash. That's how you close an empty tag in XHTML.
3. All XHTML tags must be properly nestedNesting simply means placing one element inside of another element. For example, you can place a bold tag inside a paragraph tag. In XHTML, tags must be closed in the correct order—an inner element must be closed before its parent element is closed. Take the following for example:<p>This paragraph contains <b>bold text.</b></p> This is how you properly nest a bold tag within a paragraph. Note that even though the bold text and the paragraph end in the same place, the bold tag must be closed before the paragraph tag is closed. The following is incorrect (although it may well render properly in most browsers). <p>This paragraph contains <b>bold text.</p></b> The tags are closed in the wrong order. Think of the bold element as a “child” of the paragraph element—the child element must be contained within its parent element. This rule creates a hierarchy throughout the entire document. Which leads us to the final rule.
4. XHTML documents can have only one root element.Remember the parent child relationship I mentioned in the previous example? Elements can be siblings, too. The two consecutive paragraph elements in rule 2 above are sibling elements. That is, they are not nested within each other. They both have the same parent. In XML, all elements descend from a single root element—that root element cannot have any siblings. Applying this to XHTML is very simple. The first element is always the opening <html> tag and the last element in the document is always the closing </html> tag.
|
