Monday, July 16, 2012 at 10:42 AM
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,
h6) to mark up headings, paragraph elements (
p) for paragraphs, lists (
menu) for lists, tables for data tables, and so on.
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
codeelement represents a fragment of computer code. This could be an XML element name, a filename, a computer program, or any other string that a computer would recognize.
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:
- Keep use of IDs and classes to a minimum.
- Use functional ID and class names; if that is not possible, use generic ID and class names.
- Use names that are as short as possible but as long as necessary.
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:
- It’s the professional thing to do.
- It’s more accessible.
- It’s more maintainable.
“Neutral” elements, elements with ambiguous meaning, and presentational elements constitute special cases.
span offer a “generic mechanism for adding structure to documents.” They can be used whenever there is no other element available that matches what the contents in question represent.
In the past a lot of confusion was caused by the
em elements. Authors cursed
i for being presentational, and typically suggested a 1:1 replacement with
em. Not to stir up the past, here’s what HTML 5 says, granting all four elements a raison d’être:
||“a span of text to be stylistically offset from the normal prose without conveying any extra importance, such as key words in a document abstract, product names in a review, or other spans of text whose typical typographic presentation is boldened”||
||“strong importance for its contents”||
||“a span of text in an alternate voice or mood, or otherwise offset from the normal prose, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, a thought, a ship name, or some other prose whose typical typographic presentation is italicized”||
||“stress emphasis of its contents”||
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
||For headings there are heading elements.|
||Presentational markup is expensive to maintain.|
||Use table elements for tabular data.|
||Use table elements for tabular data.|
||Denote paragraphs by paragraph elements, not line breaks.|