Posted: 16 Jul 2012 10:42 AM PDT
Webmaster level: All
In web development context, semantics refers to semantic markup, which means markup used according to its meaning and purpose.
Markup used according to its purpose means using heading elements (for instance,
Stating the obvious became necessary in the old days, when the Web consisted of only a few web sites and authors used tables to code entire sites, table cells or paragraphs for headings, and thought about other creative ways to achieve the layout they wanted. (Admittedly, these authors had fewer instruments at their disposal than authors have today. There were times when coding a three column layout was literally impossible without using tables or images.)
Up until today authors were not always certain about what HTML element to use for what functional unit in their HTML page, though, and "living" specs like HTML 5 require authors to keep an eye on what elements will be there going forward to mark up what otherwise calls for "meaningless" fallback elements like
To know what elements HTML offers, and what meaning these elements have, it's necessary to consult the HTML specs. There are indices—covering all HTML specs and elements—that make it a bit simpler to look up and find out the meaning of an element. However, in many cases it may be necessary to check what the HTML spec says.
For example, take the
HTML elements carry meaning as defined by the HTML specs, yet ID and class names can bear meaning too. ID and class names, just like microdata, are typically under author control, the only exception being microformats. (We will not cover microdata or microformats in this article.)
ID and class names give authors a lot of freedom to work with HTML elements. There are a few basic rules of thumb that, when followed, make sure this freedom doesn't turn into problems:
Advantages of using semantic markup
Using markup according to how it's meant to be used, as well as modest use of functional ID and class names, has several advantages:
"Neutral" elements, elements with ambiguous meaning, and presentational elements constitute special cases.
In the past a lot of confusion was caused by the
Last but not least, there are truly presentational elements. These elements will be supported by user agents (browsers) for forever but shouldn't be used anymore as presentational markup is not maintainable, and should be handled by style sheets instead. Some popular ones are:
How to tell whether you're on track
A quick and dirty way to check the semantics of your page and understand how it might be interpreted by a screen reader is to disable CSS, for example using the Web Developer Toolbar extension available for Chrome and Firefox. This only identifies issues around the use of CSS to convey meaning, but can still be helpful.
There are also tools like W3C's semantic data extractor that provide cues on the meaningfulness of your HTML code.
Other methods range from peer reviews (coding best practices) to user testing (accessibility).
Do's and Don'ts
|You are subscribed to email updates from Google Webmaster Central Blog |
To stop receiving these emails, you may unsubscribe now.
|Email delivery powered by Google|
|Google Inc., 20 West Kinzie, Chicago IL USA 60610|