Recently, the issue of semantics and its importance in standards-compliant web design has become a hot topic among many of the Big Names in web development (e.g. Jeffery Zeldman, Douglas Bowman, David Shea, Dan Cederholm, etc.). The discussion was raised in response to an article posted on Jason Kottke's blog. Although I certainly do not hold myself in the same esteem as any of the aforementioned persons, I thought that I too would weigh in on this topic, as I have not often seen it discussed on this forum. I feel that it is appropriate to post my views in this thread, as semantics and standards-compliant markup are integral to any CSS and XHTML discussion.
And with that out of the way, here we go...
===
Kottke contends in his posting that "standards don't necessarily have anything to do with being semantically correct." Before we address this issue, however, we must first understand what semantic markup is.
Essentially, semantic markup is markup structure that describes to as great an extent as possible the meaning of its content. This means, among other things, that you should use <p> tags to denote your paragraphs; that your headings should be placed within <h[i]n[/i]> tags; and that you should use ordered, unordered, and definition lists to display items in a sequence, instead of merely inserting <br>s after raw text entities.
It is true, as Kottke asserts, that semantic markup and standardized markup are not necessarily one in the same. Take the following, for example:
[code]
<strong>Directions</strong>
Measure ingredients. <br />
Mix together. <br />
Bake for 90 minutes at 325 degrees. <br />[/code]
The above code is semantically worthless: the markup structure tells us nothing at all about the information that it presents. Nevertheless, it is still valid per W3C specifications. Indeed, much is valid per the W3C specifications that is not good design practice. XHTML 1.0 Transitional still allows the use of the font tag, and even XHTML 2.0 allows us to design with tables. Although the XHTML 2.0 spec asserts that tables should be used for displaying tabular data (e.g. calendars, matricies, etc.), there is nothing to stop us from creating our layouts using invisible, nested tables. This, while technically valid, violates the spirit in which the standards were written. David Shea put it very well when he said,
[quote][If you are writing valid code but make no efforts at writing semantic code,] you are like the driver of the VW Beetle carefully pulling to a stop at the light, failing to move for the Mack truck barrelling toward him at 120km/h. Sure he?s following the letter of the law, but the light was put there for his safety. He?s completely missing the spirit in which it was written.[/quote]
(X)HTML was very clearly designed with the use of semantic markup in mind. But why? How does semantic markup benefit us as web designers? Well, let's take the same example text as used above, except re-written semantically:
[code]
<h3>Directions</h3>
<ol>
<li>Measure ingredients.</li>
<li>Mix together.</il>
<li>Bake for 90 minutes at 325 degrees.</li>
</ol>[/code]
Such markup makes it clear at a glance that the above is a list of things that must be done in order (in this instance, steps involved in baking a cake).
But if we're using valid CSS to style our content, why is semantic code even important? After all, the end user cannot tell the difference between <h1>Page Title</h1> and <span class="title">Page Title</span>, if the CSS written for the two is identical. Semantic code is very often more difficult to write, and it is seemingly unnoticed and unappreciated by whomever is viewing our designs.
First of all, we must consider that there are those who cannot view our stylesheets. Some of us even intentionally hide styling from certain users (by, for example, using @import to include stylesheets, because the @ selector cannot be understood by Netscape 4.x, which horribly mangles most CSS-based designs). In other instances, the User Agent is simply incapable of understanding styling, either because the technology is not yet advanced enough (e.g. PDA software), or because of limitations inherent to the UA (e.g. the small size of a cell phone screen). Finally, some otherwise "normal" users purposefully disable CSS in their browsers.
To all of these people, non-semantic markup -- such as the example presented earlier in this document -- will appear as nothing more than a jumble of text (assuming that we have been separating our content from our presentation, of course). Semantic markup, however, will remain meaningful. Even without CSS, the importance of headers carries through (via text size and weight) both compared to normal text and relative to each other (h1 is larger than h2 is larger than h3...). Ordered lists still inform the user that the listed steps must be followed in order. Etc.
Secondly, it is important for designers to employ semantic code not just for the benefit of the end user, but because it makes us better designers. In this respect, the reasons that we should use semantic code are very similar to the reasons that we should use standards-compliant code. There is no benefit to converting from invalid (X)HTML to valid (X)HTML unless it changes how we approach our document structure. Similarly, converting from non-semantic layouts to semantic layouts is of little good unless the change affects how we fundamentally design.
Semantic markup is what makes complicated CSS-driven layouts possible, as it gives us the "hooks" with which to trigger our CSS. Take the following (X)HTML*:
[code]
<div id="navigation">
<h1>Site Map</h1>
<ul>
<li><a href="#">Blog</a></li>
<li><a href="#">Archives</a></li>
<li><a href="#">F.A.Q.</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>[/code]
Which gives us the following CSS conditions:
[code]
#navigation {
}
#navigation h1 {
}
#navigation ul {
}
#navigation li {
}
#navigation li a {
}
h1+ul {
}
li+li{
}[/code]
(Note: The [i]element[/i]+[i]element[/i] selector does not work in any version of Internet Explorer for Windows, although it is rendered properly in almost all other browsers, including Opera 7, Netscape 7, IE5/Mac, Mozilla, Chimera, and Safari.)
Even the most advanced designs** will most likely not need all of the above selectors. However, it is better to have more options than we need, than to be forced to struggle to make due with too few. Consider what would happen, if non-semantic markup were used:
[code]
<span class="heading">Site Map<span>
<a href="#">Blog</a>
<a href="#">Archives</a>
<a href="#">F.A.Q.</a>
<a href="#">Contact</a>[/code]
This leaves us with only the following selectors:
[code]
.heading {
}
a+a {
}[/code]
Of course, we can mark up the general elements (div, h1, a, etc.) in both examples. However, as almost all designs will call for the repitition of these elements, we cannot rely upon stying them without ids and classes. For example, we cannot use CSS to modify the anchor element in order to achieve a certain look in our site map, when we will likely use anchors elsewhere for other purposes.
Finally, although standards-compliant (X)HTML is not necessarily synonymous with semantic markup, it is the contention of this article that standard-compliant (X)HTML lends itself to semantic markup, as does CSS. To borrow words from Jeffery Zeldman,
[quote]Recently thoughtful web designers have been making or responding to the point that technologies like XHTML and CSS... and appropriate document structure... are not the same thing: you can have one without the other, although it is best to aim for both. This is somewhat like discovering that spelling and grammar are not the same thing: good sentence structure does not guarantee correct spelling, and vice-versa.[/quote]
One does not have to code valid markup in order to code semantically; one does not need to have semantic code in order to have valid markup. However, there is a clear, synergistic effect between the two. Only after we can seperate our content from our presentation with valid, semantic, markup, will we see the full scope of what (X)HTML and CSS have to offer.
* The navagation list code and CSS examples used earlier in this document were taken from the "Taming Lists" article at A List Apart ([url]http://www.alistapart.com/stories/taminglists/[/url]).
** To see an example of how such semantic markup was used in a real-world situation, please visit Asset Surveillance ([url]http://www.assetsurveillance.com.au/[/url])
Last edited by Gichin_Funakosh, August 29th, 2003 02:37 AM (Edited 1 times)
August 27th, 2003 10:32 AM
