Semantic Markup

What is Semantic Markup?

In general, semantic markup means taking the presentational elements out of your code and replacing them with meaningful ones that can be styled separately (with a styling language such as CSS).

For example, instead of making a line of text bold and italic to indicate that it’s a heading, just use a heading tag!

Bad: Welcome to my Website

Good:

Welcome to my Website

Advantages

The practice of using semantic markup in your webpages yields a number of major benefits:

  • Your markup will become cleaner and easier to understand.
  • Your content will never expire with the design, since they become two separate entities.
  • Content editors (that’s you!) can spend more time on the content, and less on the design.
  • Search engines will index your site properly, giving better page ranks to relevant content.

Additional advantages of using semantic markup include:

  • One source of content can be delivered to many devices (i.e., screens, printers, handhelds, projectors, etc.).
  • Redesign costs are cut significantly, as one style sheet can effectively control an entire website.
  • Your Web pages will be smaller; usually up to 40%! That means faster loading times for everyone.
  • Your content becomes accessible to humans as well as machines (i.e., search engines).

“Bad” Tags

Most of these tags have been deprecated as of XHTML 1.0:

  • FONT
  • B, U, I
  • BIG, SMALL
  • HR
  • CENTER
  • BLINK
  • MARQUEE

All of these are presentational elements and their purpose can be better managed with CSS.

“Good” Tags, Bad Use

Tables are appropriate for tabular data. They should be organized logically for consistency and easy interpretation. A good rule of them to use when considering a table is: “does the table still make sense if the rows and columns are swapped?”

Tables are bad for most layout purposes because they limit the structure of the design significantly. They also tend to rely on sliced, inline images, which make the content non-semantic and impossible to reuse effectively.

Limited exceptions to this rule exist for XHTML Transitional document types, but tables should never be nested inside of another table.

Hold the Attributes

Avoid using presentational attributes like bgcolor, background and align. Again, these affect the content’s presentation. CSS is more appropriate for these purposes.

Basic Web Page Structure

Each page should be structured through the use of hierarchical elements: TITLE, DIV (page divisions), H1, H2, H3. To distinguish paragraphs, use the P tag.

Sometimes, additional DIVs are used as containers, or “wrappers” to give our pages better design flexibility. Currently, this is necessary to achieve consistency across browsers and enable advanced presentational effects on Web pages. Like most Web standards, the CSS specification takes time to develop, and even more time to become adopted. CSS3, which is currently in working draft, promises many more useful features that will reduce the need for these extra containers.

Forget About the Design

Do your pages make sense when the CSS is removed? (Tip: use the Firefox Web Developer extension’s CTRL+SHIFT+S to quickly disable styles on any page). Note that inline styles defeat the purpose of CSS and should be used only when absolutely necessary.

Into the Future

Designs change much more frequently than articles and ideas. Well-written documents may never need to be modified, unless the content itself changes. Using semantic markup that is based solely on the meaning of your content is a good preparation for tomorrow.