Modern Web Design: The Four Essentials

Semantically Correct Code

Nashville Web Design Resources

lenticular clouds - nashville web development

The word "semantic" pops up frequently in web standards circles. But to what does it actually refer?

According to the W3C, the Semantic Web is primarily about two things:

common formats for integration and combination of data drawn from diverse sources, where on the original Web mainly concentrated on the interchange of documents
language for recording how the data relates to real world objects

The ubiquitous application of semantics would allows a person, or a machine, to start off in one database, and then move through an unending set of databases which are connected not by wires but by being about the same thing.

In simpler terms, the XHTML elements used should describe the content they embody. The XHTML markup should explain the document itself, not how it is to be presented; not what it looks like.

It's also important to note that the law of diminishing returns certainly does apply to semantics. Get the primary or basic aspects coded semantically, and you can vastly improve the ultimate meaning of your document; but you can easily go past that reasonable point and spend hours to achieve what are, in the end, only negligible enhancements.

Some of the basic things to keep an eye out for include the following:

The <title> element should describe the specific page, the same tired title should not be used as the title for every page on the web site.
<h1> to <h6> should be used to "chunk" your document into meaningful pieces; state the topic that the following paragraphs will address.
Lists are a good tool to group related information; even if you don't want your presentation to have the appearance of a standard list, think about whether the information fits that presentation, and use CSS to change its appearance later, if desired.
In the case of images, use ALT to explain the image to someone who can't see it, and use TITLE as Tool Tips for those users who can view the pic.
Using tables for layout is certainly out of fashion (thank goodness!), but tables are still perfectly valid for the display of tabular data (their intended purpose). Tables help establish relationships between pieces of information, so one should not use floating
elements if it makes sense to use a table.

Use SUMMARY to describe the table to users who cannot see it, and use CAPTION to describe it to users who can.
<thead>, <tfoot> and <tbody> help describe parts of the table, and provide good CSS hooks for later styling.
Use <th> instead of <td> to convey the extra significance of header cells.

Group forms into meaningful chunks. Using <fieldset> and <legend> not only helps those with disabilities, it's also a big plus for those without disabilities. Use <label> to caption your form elements and help associate your text with those elements.
<div> and <span> elements have no real semantic meaning, so use them judiciously. I'm not saying "don't use them", but if there is another element that explains the content, use it instead!

Semantics in itself will not cause accessibility or validation to be achieved; semantics are just part of the big picture. What semantically correct code does provide is a common framework that allows data to be shared and reused across application, enterprise, and community boundaries. It is a collaborative effort led by W3C with participation from a large number of researchers and industrial partners.

BestWeb Nashville

Modern Web Design: The Four Essentials

Semantically Correct Code

Nashville Web Design Resources

Website Services

Web Design & Development Resources

Website Services Articles that Really Help You