Thursday, July 17, 2008

XHTML Tags

There are a number of differences between HTML and XHTML, and most of them serve as an improvement. In HTML it was easy to write sloppy code. Sloppy code is hard to read, harder to edit, and even harder to troubleshoot. If one could write clean code, it would make it far easier to read, edit and troubleshoot.

Here are some basic things to remember:

  • Attribute names must be written in lower case (table, not TABLE; a href, not A HREF)
  • Attribute values must be quoted (width="100%", not width=100%)
  • The id attribute replaces the name attribute
  • The XHTML DTD defines the mandatory elements

Let's look at some of the basics of HTML, then go further into the above examples.

html Defines the Document as Hypertext Markup
head Where title tag, css references, javascript, and other code goes. Separate from the body of the page.
body This section contains the viewable area of the document. What the user will see is written here.
h1-h6 Header tags. In order of size, biggest to smallest, beginning with h1
p Paragraph tag
br Line break tag

The above tags will be most commonly used. In HTML, the tags were all upper-case. As HTML progressed, this became more interchangeable. XHML requires lower-case tags.

The one key to XHTML is that when you open a tag, you must close it. <table> must end with </table>. The "/" is how you close a tag. Some tags, like br and hr (horizontal rule), don't have a closing tag. They can be closed with <br /> and <hr />, respectively.

As we go further into this tutorial, we will look at other tags you may need, including tables and images. Let's take a quick look at the other XHTML rules.

In HTML, an item was named with the "name" tag. XHTML replaces "name" with "id". An example would be a form field. <input type="text" id="field_name">, where field name can be name, email address, mailing address, etc. This example covered the quotation rule as well. All attributes must be quoted.

These are the very basics to get you started. In the next lesson, we will build our first XHTML page.

No comments: