Articles: Semantics, HTML, XHTML, and Structure

Introduction

Good HTML structure is based on logic, order, and using semantically correct markup. If you have a heading use the heading element, beginning with the H1 element. If you have a paragraph, use a paragraph element. If you have a list, use a list item element. If you’re quoting a few lines, use a blockquote element. Those elements provide meaning to the content, making them semantically correct, in addition to being solid HTML structure.

Once your HTML structure is in place with the appropriate markup, add CSS for visual presentation. Start with good HTML structure and then add the CSS, preferably with an external style sheet, for the visual presentation that you have in mind.

The information below is meant as a jumping off point, written for clients and others who want to know at least enough to understand what’s going on within their pages and how to create a solid, semantically correct webpage.

The BR element is one of the more abused HTML elements around. When other HTML elements and CSS are understood and used appropriately, forced line breaks with the BR element can be minimized. For example:

use the P element for paragraphs, not the BR element.

Use list item elements for lists (UL, OL, LI) rather than marking up a series of items with the BR element, and remember that you can use CSS to hide the HTML bullets if you wish.

Use CSS to set widths, margins, and padding for text rather than using a multitude of <br /> tags for text line breaks.

Example:<cite>Designing with Web Standards</cite> is an excellent book by Jeffrey Zeldman.

Citation: The BLOCKQUOTE Element

BLOCKQUOTE at W3C: “BLOCKQUOTE is for long quotations (block-level content).” (See note below about the Q element.) Don’t use BLOCKQUOTE just for text indenting. If you want to indent text, use CSS margins, padding, or a combination of both. Likewise, if you don’t want to use BLOCKQUOTE because of its block-level characteristics, you can use CSS to change them, too.

Note: When you hover your mouse over the quotation in some browsers that the title information will appear.

Note: While BLOCKQUOTE is intended for longer quotations and Q is intended for shorter quotations, the Q element is not supported by browsers and even causes problems for some alternative devices, so its use at the moment is not recommended. Hopefully next generation browsers will support it. For more information:

NOTE: It’s important to note that the W3C’s examples on the above page are outdated for XHTML since they don’t include closing tags in their samples. It’s REQUIRED to include closing tags for all list items and other tags for XHTML. It’s a good practice anyway, whether using XHTML or HTML.

When you have a list of something, use the list element tags. While there are a few choices of list style types, these can be replaced with images using CSS. It’s also possible to hide bullets completely, change indenting, use lists inline or block, and more.

For example, this markup:

<ul>
<li>Lemons</li>
<li>Limes</li>
<li>Oranges</li>
</ul>

Becomes this:

Lemons

Limes

Oranges

There are many helpful tutorials around about list items. Check WebsiteTips.com’s CSS section, CSS and Lists.

Examples of variations in how list items are treated using CSS:

my website, Brainstorms and Raves, uses list item tags for the top-of-the-page navigation where visually you’ll see what appears to be horizontally arranged graphic buttons.

I’ve used list item tags for the sidebar column lists of links, even though you don’t visually see any bulleted lists.

I’ve also used list item tags for the main archive listing for categories and monthly archives. Once again, the bullets are hidden.

They’re each treated differently using CSS but they all use the same list item tags.

Use definition list elements for terms and their corresponding descriptions. Another possible use is for marking up dialogues, with each DT element naming a speaker followed by the DD element containing the speaker’s words.

For example, this:

<dl>
<dt>Salad</dt><dd>A dish of raw leafy green vegetables, often tossed with pieces of other raw or cooked vegetables, fruit, cheese, or other ingredients and served with a dressing.</dd><dt>Vegetable</dt><dd>A plant cultivated for an edible part, such as the root of the beet, the leaf of spinach, or the flower buds of broccoli or cauliflower.</dd><dt>Grains</dt><dd>Small, dry, one-seeded fruit of cereal grasses, having the fruit and the seed walls united, such as wheat.</dd></dl>

Becomes this:

Salad

A dish of raw leafy green vegetables, often tossed with pieces of other raw or cooked vegetables, fruit, cheese, or other ingredients and served with a dressing.

Vegetable

A plant cultivated for an edible part, such as the root of the beet, the leaf of spinach, or the flower buds of broccoli or cauliflower.

Grains

Small, dry, one-seeded fruit of cereal grasses, having the fruit and the seed walls united, such as wheat.

Note: most browsers will render content within the CODE element in the browser’s default monospace font. You can also use CSS, of course, to designate fonts, colors, and more.

Note: If you use reserved HTML within your code snippet or elsewhere within your HTML markup, such as the ampersand &, less-than sign <, or greater-than sign >, you must escape them with their character entities, such as what is shown in the example above.

Preformats text with fixed-width font, preserves the given white-space and line-breaks, usually disables automatic word-wrapping. Used in the code examples on this page, for example:

<pre>
<ul>
<li> </li>
<li> </li>
<li> </li>
</ul>
</pre>

Like the BR element, though, the PRE element has been abused and used to force line breaks for text formatting when CSS and other elements can be used appropriately instead. Just like I mention about the BR element, use the PRE element judiciously.

How can I prevent blocklevel elements from indenting, having padding, or starting on a new line?

Using CSS you can designate blocklevel elements to be inline if you wish. Here’s an example for BLOCKQUOTE:

blockquote {display:inline}

You can designate your heading elements to have as much or as little padding and margin as you wish, too. The example below provides 0 margin and 0 padding top and bottom and 4px padding right and left.

h1 {margin:0;padding:0 4px;}

What if I want one image to display inline but not the others?

There are several ways to do this. If you’re using that image in your topmast, for example, it might be fine to designate your image information within the topmast DIV:

In general terms, your markup must be in lowercase, you must use proper nesting, proper ending tags, and ampersands (&) in URLs must be written as &amp;. If you already used valid markup with HTML 4, the differences will be quite minor and won’t take long to learn.

Even when I don’t follow semantic markup my pages still validate. Don’t standards mean you have to use semantically correct markup?

Semantics and standards aren’t necessarily the same, although using good semantics is recommended. The W3C validator doesn’t know if you’ve used other tags to fake your headings or not, for example.

Comments

How to run Movable Type in localhost? If you're not connected to the internet, and you want to play with Moveable Type... how? Updated Something to feed me up: Articles: Semantics, HTML, XHTML, and Structure, so recommeded article by Brainstorms...

Articles: Semantics, HTML, XHTML, and Structure The information below is meant as a jumping off point, written for clients and others who want to know at least enough to understand what's going on within their pages and how to create a solid, semantic...