HTML-Advisor
Mostly practical advices

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.

A Few Basic Elements

Jump to:

Headings

W3C info:7.5.5 Headings: The H1, H2, H3, H4, H5, H6 elements
Use heading elements for headings: H1, H2, H3, H4, H5, H6. Don’t use CSS, the STRONG element or other markup to fake your headings.

For example, this:
<h1>Our Company</h1>
<h2>Our Services</h2>

Becomes this:

Our Company

Our Services

Paragraphs: the P Element

Use the P element for paragraphs. Don’t use the >br /< element to instead provide paragraph-like breaks.

W3C info about P:

“The P element represents a paragraph. It cannot contain block-level elements (including P itself).
“We discourage authors from using empty P elements. User agents should ignore empty P elements.”

9.3.1 Paragraphs: the P element

Line Breaks: the BR Element

BR at W3C: 9.3.2 Controlling line breaks

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:

  1. use the P element for paragraphs, not the BR element.
  2. 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.
  3. Use CSS to set widths, margins, and padding for text rather than using a multitude of <br /> tags for text line breaks.

Use this element judiciously.

Emphasis: the EM Element

EM at W3C: “Indicates emphasis.”

Example:<em>I’m emphasizing this.</em>

Use the EM element for emphasis. If you’re after italicized text aside from emphasized text or citations use CSS (font-style:italic) rather than EM or I. Use the CITE element for citing a source.

Emphasis: the STRONG Element

STRONG at W3C: “Indicates stronger emphasis.”

Example:<strong>I’m emphasizing this even stronger.</strong>

Citation: the CITE Element

CITE at W3C: “Contains a citation or a reference to other sources.”

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).” 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.

Include the cited source and title within the BLOCKQUOTE element:

  1. Link to the citation:


    Use the CITE attribute for the source’s URI: cite=”uri”.

    <blockquote cite=”http://w3c.org/” title=”Article title, author, date”>“I’m citing the W3C here.”</blockquote>

    From W3C regarding the cite attribute:

    “The value of this attribute is a URI that designates a source document or message. This attribute is intended to give information about the source from which the quotation was borrowed.”

    BLOCKQUOTE Attribution definitions: CITE

  2. Use the TITLE attribute for the source title: title=”text”:

    <blockquote cite=”http://w3c.org/” title=”Article title, author, date”>“I’m citing the W3C here.”</blockquote>

    For example, this markup:
    <blockquote cite="http://w3c.org/" title="Article title, author, date">“I’m citing the W3C here.” </blockquote

    Becomes this:

    “I’m citing the W3C here.”

    It’s also recommended to include a visual reference to your citation, as always, perhaps like this:

    “I’m citing the W3C here.”

    Article title, author, date

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:

List Elements: UL, OL, LI

W3C info about the List element

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.

Definition List Elements: DL, DT, DD

W3C information about definition list elements

Use definition list elements for terms and their corresponding descriptions. Another possible use is for marking up dialogs, 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.

Misc. Elements, Attributes

The CODE Element CODE at W3C: “Designates a fragment of computer code”

For example, this:

<code>
<style type="text/css">
body {margin:0;}
</style>
</code>

Becomes this:
<style type="text/css">
body {margin:0;}
</style>
</code>

Note: most browsers will render content within the CODE element in the browser’s default mono space 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.

The PRE Element

W3C info: Preformatted text: The PRE element

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.

Source: brainstormsandraves.com

Tags: , , , , , ,

Related:

Posted in HTML, XHTML. 1,021 views
Responses are currently closed, but you can trackback from your own site.

No Comments

Sorry, the comment form is closed at this time.