A brief introduction to semantic HTML

This entry was posted on October 23, 2007

Wiktionary defines the word “semantics” as:

  1. (linguistics)The science of the meaning of words. Semantics is part of linguistics.
  2. The study of the relationship between words and their meanings.
  3. The individual meanings of words, as opposed to the overall meaning of a passage.

HTML is a language (the letters stand for HyperText Markup Language), and semantic HTML is markup that has proper meaning. In simple terms, this means using the right tag for the right job.

The easiest way to get to grips with writing semantic HTML is to think about what the meaning of your markup is. HTML is about meaning and structure, it’s not about presentation - that’s what your CSS is for!

So no more using the <b> tag to make your text bold. Bold text means nothing. Why is your text bold? Is it because it needs a strong emphasis on it? That’s what the <strong> tag is for. The <strong> tag will make your text appear bold by default, though you can back it up with CSS by placing strong {font-weight:bold;} in your stylesheet.

No more using the <i> tag either! Italic text has no meaning. We use italics when we want to place an emphasis on something, which is why we have the <em> tag.

Those two changes are the easiest to make when starting out with semantics. Semantic HTML is no different to normal HTML, only in that it focuses a lot more on the meaning of each tag, and heading towards completely separating structure from presentation wherever possible.

So no more <p class=”header”> for your titles. There’s six different heading levels you can use from: <h1> all the way down to <h6> - surely that’s enough choices for you?

One large change that you might need to make is your use of tables. Despite thousands of people harping on about why tables are bad for your layouts (including myself), let’s stop and have a think about it for a second. Why do we have tables? What should tables do? What’s their purpose? What do they mean?

Tables are used to portray tabular data. Numbers, statistics, correlations, employees’ choices for the company’s Christmas do, the list goes on. Tables are not used for portraying your header, sidebar, main content, and footer! You wouldn’t display your layout like that on paper, and you definitely couldn’t show your layout in a graph, so please, don’t use tables for your layouts.

The discussion of semantics could (and has) gone on for days. I just wanted to outline a brief introduction for those of you who weren’t entirely sure what semantic HTML is. It doesn’t have to be an overly complicated thing if you don’t want it to be. All it requires is a little bit of thought on your part about what you really want your markup to mean. Good luck!

8 lovely people have commented

·