Web Do's & Don'ts » Semantics

Use the text-transform property to specify the case of letters

Bojan — Thu, 12 Aug 2010 09:58:46 +0000

As we know, writing in all-caps is a no-no. For all-caps text, you should use the text-transform property (unless you are actually SHOUTING), and the same property shod be applied if you want to use lowercase text. This means that in the content layer, you must use proper structure and semantics, and leave the styling for the presentation layer.

Use the th element for table headers

Bojan — Wed, 11 Nov 2009 13:38:51 +0000

When marking up tables, remember to use the th element for cells that provide header information for table rows or columns.

Use the optgroup element for hierarchical select options

Bojan — Sat, 24 Oct 2009 11:38:39 +0000

Grouping of options in HTML select element should be achieved using optgroup element in combination with label attribute.

Don’t use empty HTML elements

Bojan — Sat, 24 Oct 2009 11:27:07 +0000

You should avoid inappropriate HTML use such as putting empty elements just for float clearing.

Group form controls by using fieldset and legend elements

Siniša — Tue, 08 Sep 2009 08:16:22 +0000

The grouping and labeling of thematically related controls within a form is an important aspect of providing semantic information so users can understand and complete a form successfully.

Don’t use H1 for site title exclusively

Bojan — Wed, 02 Sep 2009 09:07:49 +0000

H1 represents the top level heading, while the title tag represents the web page title. They can sometimes be the same, for instance on the website index. However, they shouldn’t be the same on the subpages.

Don’t use definition lists for marking up dialogues

Siniša — Tue, 16 Jun 2009 08:29:28 +0000

No matter what HTML specs says, using definition lists for marking up dialogues is just wrong.

Don’t use “click here” links

Bojan — Mon, 25 May 2009 11:59:51 +0000

“Click here” links are bad practice for usability and accessibility reasons. They are context and device dependent and do not provide enough information to users or search engines.

Use ins and del elements for document changes

Bojan — Mon, 25 May 2009 11:58:10 +0000

The neglected ins and del elements should be used to markup changes in a document. Use ins to markup inserted sections and del to markup deleted sections.

Use proper markup on quotes

Bojan — Thu, 21 May 2009 01:44:51 +0000

Use semantic code for quoting text in HTML. In a nutshell: use the q element for inline quotes, the blockquote element (plus a paragraph) for quoting paragraphs, and the cite element for marking up external references.