XHTML basics
(X)HTML tags are usually abbreviations (such as “p” for paragraph or “ul” for unordered list), but they are distinguished from the regular text because they are placed in small angle brackets. So the paragraph tag is <p>, and the unordered list tag is <ul>.
Most tags travel in pairs — opening and closing. Using a tag such as <p> requires its mate </p>. Note the slash (/) before the letter “p”; that's what distinguishes a closing tag from an opening tag. Just as <ul> opens an unordered list, </ul> closes it.
Document Type Definition (1 of 3 required)
The Document Type Definition (DTD) specifies how Web browsers should display your content; it should be the very first line of code in your (X)HTML file. Certain DTDs allow for slightly different HTML. Employing a Strict DTD allows for virtually no elemenets of presentation to keep your (X)HTML as clean as possible, while the Transitional DTD allows for varying degrees of presentation.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Allows for virtually no elements of presentation (recommended)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Allows for varying degrees of presentation
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Allows for frames layouts; not recommended.
Basic (all required)
<html></html>
Creates an (X)HTML page
<head></head>
Creates an area not considered page content
<title></title>
Browser window title (goes in the <head> section)
<body></body>
Creates the visible portion of the page
Character encoding (required)
Character encoding is a method of converting bytes into characters. For documents in English and most other Western European languages, the widely supported encoding is ISO-8859-1:
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
Headings
Headings make a document more digestable and cue the reader of the content to follow. Creating logical headings make documents scanable and more usable. (X)HTML offers 6 levels of headings:
<h1>Most important heading</h1>
...
<h6>Least important heading</h6>
Note: Authors who use CSS and classes to indicate headings (<p class="title">My Company</p>) are doing themselves and their audience a disservice; for when your style sheet is left behind, we see headings as badly-broken paragraphs.
Paragraphs
Paragraphs will probably make up a majority of your (X)HTML code. Some authors were taught the closing paragraph tag (</p>) is unnecessary, however when standards are of importance, which they are, text should be enclosed in <p></p> tags like so:
<p>Creating paragraph numero uno is simple.</p>
<p>Starting a new paragraph after numero uno is just as easy.</p>
Note: Those not well-versed in the separation of style from content may be inclined to use several empty paragraphs to create hard returns in a document. This is not recommended, as visual appearance can be easily controlled with CSS, as you will soon see.
Line breaks
Line breaks create forced hard returns in your document. Don’t get carried away with breaks and start using them to push your content around; as you shall see, CSS can do all the pushing you require.
There is a hard return below this text
<br />
There is a hard return above this text
Links
HyperText linking is core to the Web. Creating a link to another file, site or email address requires use of the anchor tag.
<a> starts the anchor tag
href="" defines the destination
</a> ends the anchor
Note: all text in between <a></a> is the clickable link
<a href="http://www.google.com">any text here will create a link to google.com</a>
<a href="dave.html">this creates a link to dave.html located in this folder</a>
This link will launch the default email client (Outlook Express, Lotus Notes, etc.) with the recipient set to an email address:
<a href="mailto:d@sizefactory.com">send me an email!</a>
Images
The image tag requires you specify a few attributes of the image in question: width in pixels, height in pixels and an alternate text description (alt=“”) to assist those with text-to-speech browsers (be kind to people with disabilities — alt text should be descriptive and helpful). As a golden rule: never use (X)HTML to resize an image. If it’s thumbnails you’re after, make new images of the appropriate size in an image-editing program.
<img src="filename.jpg" width="300" height="100" alt="Welcome to Sizefactory.com!" />
Note: All attributes (width, height and alt) are required to be enclosed with quotation marks. Also, <img> is considered an empty tag, meaning there is no closing tag, therefore the ( /) is required to indicate an end point of the element. And yes, there is a space before the forward slash (/).
You can use an image in combination with a link to create buttons and thumbnails:
<a href="http://www.zeldman.com">
<img src="zeldmanlink.gif" width="75" height="40" alt="Jeffrey Zeldman" />
</a>
Lists
Lists come in several flavors: ordered, unordered and definition. Unordered lists will place bullets in front of each item, ordered lists will place numbers in lieu of bullets. Definition lists are great for term/definition pairs and place no bullets by default.
Unordered list
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
Ordered list
<ol>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ol>
Definition list
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheet</dd>
<dt>DTD</dt>
<dd>Document Type Definition</dd>
</dl>
Note: List appearance can be drastically altered with CSS; bullets and indents can be removed, added and modified through the use of CSS.
Block-level & inline elements
There are two types of (X)HTML elements, block-level and inline. Generally, block-level elements force themselves onto new lines, creating hard returns (which can be eliminated in CSS) above and below themselves. Inline, or text-level, elements typically stay on the line in which they were inserted (again, CSS can alter the behavior of these elements).
Some block-level elements include:
<p>
<h1>
<ul>
<ol>
<dl>
<table>
<form>
<div>
Some inline elements include:
<img>
<a href>
<em>
<strong>
<sub>
<sup>
<span>
Forms
Forms have been excluded from this guide because most forms are useless without server-side processing/scripting e.g. PHP or Perl (CGI). If you are designing forms, remember to quote attributes, exclude non-standard attributes and extensions for values and do the right thing: always validate your forms and their output to ensure standards compliance.
Tables: for data only
Back in the glory days of the Web, designers exploited the <table> tag to create grid-based designs. This was out of necessity because browsers simply couldn’t understand Cascading Style Sheets. Fast forward to the present; almost every current browser understands most of the first CSS specification and some of the second. Use tables for data only (think spreadsheets). Should you come in contact with someone using tables for presentation, firmly reprimand them and point them to this guide.
The trusty font tag
Absolutely, under no circumstances, should you ever use the <font> tag. It is antiquated, unsupported by the W3C, and makes for very unsexy (X)HTML. Condemn anyone using this tag and immediately contact the authorities.