Semantic Tags you may have Forgotten

Ensuring that your HTML code is semantic is extremely important. Between HTML’s ongoing shift towards XML, accessibility, and SEO coding in a way that describes the content is essential. Look at microformats where semantic code allows plug-ins and applications to extract data/content from a website and use it in other applications (such as address books, calendars, etc).

Half the battle? Knowing the tags, and where to use them.

• <abbr> - Defines an abbreviation. By using the title attribute with the abbr tag, you can have a tool tip on hover that will render the abbreviation. This is very important for sites that are very technical but have a wide audience who may not know all the abbreviations

  <abbr title=”Doctor”>Dr</abbr>

• <acronym> - Defines an Acronym, much like the abbr tag. Using the title attribute will render a tool tip that you can use to spell out the acronym. Again very important for sites that are technical with a wide audience that may or may not know all the acronyms.

  <acronym title=”Cascade Style Sheets”>CSS</acronym>

• <address> - Defines the start of an address. You should use it to define addresses, signatures, or authorships of documents. There is some debate what this tag should be used for specifically, but the W3C spec states it can be used for an address, a signature of a document, or the authors.

  <address> 3.7 Designs, 320 S. Main Suite B, Ann Arbor, MI 48104 </address>
  <address> Website Design and Content Copyright 3.7 Designs </address>

• <cite> - indicates a reference to work, such as a book, report or web site. Essentially this tag is to define a citation to other work, and it can include the date of publication, a link to the publication and a description of the publication you are citing.

  <cite> Written on December 26th, 2006 by Ross Johnson</cite>

• <code> - Defines computer code text. The code tag by default will monospace your font, but it also defines computer code and sets it apart from other written content.

  <code>#header { margin: 0; font-size: 3em; } </code>

• <samp> - Defines sample computer code. Similar to the code tag, the samp tag monospaces your font and refers to example or sample code in your documents.

  <samp> html, body { margin: 0; padding: 0; } </samp>

• <del> - defines text that was deleted. Most browsers will render the text with a strike through, and it is used to show when a document has been updated and how.

  Semantics are <del>often</del> always important

• <ins> - defines text that was inserted (often used with <del>). Again the ins tag shows where a document has been updated and how. Many browsers will underline the the inserted content, however some still render them as plain text.

  Semantics are <del>often</del> <ins>always</ins> important

• <q> - defines a short quotation. Similar to blockquote the q tag defines a short quotation. Modern browsers will automatically render quotations around the content enclosed, however IE6 and below do not. Some resort to the DOM to fix this hole in IE’s rendering engine.

  <q>Studying is learning.</q>

There are a ton more, and I encourage everyone to print out this list and try and use semantic code whenever possible. You will find that by using these methods your sites become of a much higher quality, and you can use the usage of many of these tags as sales notes for either landing a job or client. Imagine showing a client that you can help people better understand their company by having all acronyms defined on their pages? Who wouldn’t want such a feature?

« About my redesign, just incase anyone cares Social Media Optimization (SMO) - a Rundown »