| Home Web | Top Bottom | Contents Prev Next |
Tags, Attributes and Values
Container Tags
Empty Tags
Example
Now that we've laid the groundwork, we can finally begin talking about how you code HTML and XHTML. There are three very important terms you need to learn: tags, attributes and values.
HTML and XHTML tags take the following form. Square brackets [] indicate an optional item. The ellipsis ... indicates that you can include more than one attribute.
HTML: <tag [attribute[="value"]] ...> XHTML: <tag [attribute="value"] ...>
tag identifies the type of tag. Any attribute/value pairs provide more information about the statement.
In HTML, some attributes are commonly minimized by specifying only an attribute without a value. For example, the noshade attribute in the <hr> tag doesn't require any value. XHTML does not allow minimized attributes, and this is written as noshade="noshade".
In HTML, the quotes around value can be omitted if value only contains alphabetics and numerics: size=24, for example. In XHTML, the quotes are always required and I will always use quotes around all values.
Most tags are container tags. Container tags have an opening tag and a closing tag with some content in between. An example of a container tag is the paragraph tag:
<p> Text of paragraph goes here. </p>
The closing tag uses the same tag identifier — in this case p — but with a slash in front of it. The closing tag never includes any attributes.
Some tags do not have any content. Examples include the <hr> tag, which draws a horizontal line, and the <img> tag, which displays an image.
In HTML, the tag is simply written with no closing tag.
In XHTML, all tags are required to be closed, even if they're empty tags. Empty tags are closed by including a slash in front of the > character that ends the tag: <hr/>.
For compatibility with HTML, include a space in front of the slash: <hr />. In HTML, it doesn't work if you don't include this space since HTML doesn't recognize the slash. By adding a space before the slash, HTML thinks that the slash is an attribute, and it ignores attributes that it doesn't understand. Most empty tags can be closed this way in HTML, but there are a couple of tags that you cannot close this way in HTML without causing problems in some browsers. I'll point out which ones when I talk about them.
HTML: <hr> or <hr /> XHTML: <hr/> or <hr /> or <hr></hr> Works in both: <hr />
Here's an example of an empty tag that includes both normal and minimized attributes:
HTML: <hr size="5" width="50%" noshade> XHTML: <hr size="5" width="50%" noshade="noshade" />
The format that I've labeled HTML: only works in HTML. The format labeled XHTML: generally works in both HTML and XHTML. Some older browsers have problems recognizing noshade="noshade" and might ignore that attribute.
In HTML, tags and attributes are not case-sensitive. They can be entered in either uppercase or lowercase or a mixture of the two. In XHTML, tags and attributes are case-sensitive, and must be entered in lowercase. By using lowercase in your HTML code, you'll be well positioned for a future conversion to XHTML. I'll be using lowercase exclusively for all tags and attributes.
In both HTML and XHTML, values may be case-sensitive. In general, use lowercase for your values except in places where uppercase is required.
| Home Web | Top Bottom | Contents Prev Next |