A brief introduction to semantic HTML
This entry was posted on October 23, 2007
Wiktionary defines the word “semantics” as:
- (linguistics)The science of the meaning of words. Semantics is part of linguistics.
- The study of the relationship between words and their meanings.
- 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
Nice blog! Very helpful. However, in this paragraph:
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 write tag for the right job.
You’ve written write instead of right.
Of course, it makes more sense to use the right tag for the right job. 
Anyway, while I haven’t learned anything new from this, I’m glad you explained it so well.
I wish their was something for underline, though. I miss it
There is. ins. and for strikethrough del
Thanks for explaining about the and tags I didn’t know what these were for, and everybody keeps going on about it 
^ You’re welcome.
@Catherine:
ins and del shouldn’t be used to create a styling effect. Both those tags has a spesific semantic purpose which indicate changes to a document.
why use tables when clearly DIVs rule? Also try using sIFR for that sexy looking Mac aliasin on a PC - but be warned only use it on header tags looks pretty cool. Any font you want to use even fonts that aren’t web standard and everyone gets to see them and not only that they are SEO friendly. Now hows about that then…
Leave a comment?
·
Kaylee said:
To me, bold and italic text makes more sense than saying strong/emphasized text, but I like to follow the rules! I wish their was something for underline, though. I miss it