The term Semantics refers to the use of elements which have meaning or significance in relation to their content. To use semantics correctly in CSS, we would assign class and ID names that have meaning as it relates to their function:
#leftcol
...rather than names that describe appearance or style:
.red
Semantic Web refers to the W3C using XML technology
like
RDF
(Resource Description Framework)
to integrate a variety of applications from library catalogs and world-wide directories to
syndication and aggregation of news, software, personal collections of
music, photos, and events to support the exchange of knowledge.
One aspect of this work is specifying a set of formal semantics. In other words, using naming conventions that mean something in relation to the content. This is very different from the "old days" and takes a while to think about, and get used to!! This page will give you some new ideas to think about.
Realize that we are talking theory and XML, not normal XHTML tags. But this is where the web is headed, which will be a good thing in the long run!
| "Old Way" | "New Way" |
|---|---|
<h1>Whole Foods Market </h1>
<h3>Produce</h3>
<p>Vegetables</p>
<ol>
<li>celery </li>
<li>tomatoes </li>
<li>corn </li>
<li>peas </li>
</ol>
|
<market>Whole Foods Market </market>
<department>Produce </department>
<vegetables>
<veg_type>celery </veg_type>
<veg_type>tomatoes </veg_type>
<veg_type>corn </veg_type>
<veg_type>peas </veg_type>
</vegetables>
|
Developers are moving away from thinking about what the document looks like from a markup standpoint and focusing instead on what it means; ...what it means in relation to content, relationships, terms, sources (better search, faster, more customized). This adds value and also helps with search engine optimization. It is, however, a completely new way of approaching a document for many developers and it takes a while to make the shift to thinking in data structures - not design.
For instance:
- H1 - is not big and bold - but the top priority.
- P denotes paragraphs with content - it is not a spacing device.
- Lists are used for all list-based structure - possibly navigation.
- Tables are used correctly. Not for layout purposes but for display of tabular data.
Semantics in Practice
Instead of thinking italic and bold, think emphasis and strong emphasis!
<strong>The STRONG tag normally displays as bold</strong> (the displayed text is bold)
When using Id's or classes, name them semantically not presentationally. These can then also be used as hooks for JavaScript via the DOM. The more semantic the document is (less presentation in code), the better it will be reflected in search engines.
- topHead
- topNav
- content
- branding
- sectionBlock
- mainNav
- bottom_footer
- copyright
One last point...
In the past, cross browser compatibility meant that the page should look the same in every browser. This may not be true anymore as there are so many browsers and devices. The trend is that each device might have its own look and feel rather than the same for all. Which means more employment for developers! Yea!