Jason Kottke wrote a post tonight about the general confusion surrounding web standards, semantically rich markup, and the relationship between the two.
Jason makes some valid points in his post. In particular, I agree that the idea of “standards-compliance” often borders on religious zealotry. Sought for no other reason than to attain a simple badge which supposedly “validates” the effort taken to get there. It’s as if some designers/developers strive to follow all the rules just to see those magic words when they get to the pearly gates: “Well done thou good and faithful coder. This page is valid ____!”
As a community, we’ve placed too much emphasis on the “valid” part of standards-compliant design. Some may even claim I did so just yesterday when I pointed out a few small errors on Macromedia’s pages as I closed out the entry. (It wasn’t intended as such, but rather, to quell naysayers about any “lack of compliance” based only on minor technicalities.)
As designers, we’ve danced around the idea of “semantics”, because we know the reality of browser support for CSS. We’re not willing to sacrifice all form for the sake of semantic purity. We don’t live in a world of perfect CSS support in all browsers yet. This means we insert plenty of generic divs or spans as hooks to add style to our pages. I think I can speak for everyone on Jason’s list in saying we’ve all made huge efforts to improve the semantic quality of our sites and those we design for our own companies and clients. But I know semantic purists could pin me to the mat if they picked apart the markup I’ve produced.
Where we succeed in achieving standards-compliance and semantic richness at the same time, we could certainly do a better job of highlighting the structure of our markup and why certain elements were chosen over others. But in doing so, we need to be prepared for the criticism that comes from those who expect absolutism. Once we start pointing out how we’ve made portions of our pages more meaningful, the portions which aren’t will get ripped apart. I’ve witnessed debates on semantics — they’re often endless spirals, leading tortuously to black holes of confusion and disagreement.
A prevailing concept in Jason’s post is something I couldn’t easily accept at face value:
[…] what I feel like is being implied in the effort to get more people to embrace standards compliancy is that coding a page in valid XHTML with valid CSS involves improving the semantic meaning of the content…which is just not true.
It is true that developers can potentially produce valid XHTML/CSS pages which end up semantically equivalent to a pile of junk. But it seems Jason is trying to separate web standards and semantics too far apart:
Coding web documents in valid XHTML doesn’t make them semantically useful nor does coding semantically correct documents mean the documents are standards-compliant
As developers learn and begin to work in XHTML and CSS, I believe they do often begin to automatically generate more meaningful markup. As the power of CSS unfolds, developers realize they can actually use numbered headings (<hn>) as heads and subheads, and gain even more control over them using CSS than using the old table and a few font/bold tags to affect style. Also notice how lists (ordered, unordered, and definition) are being used much more often in XHTML/CSS sites, as opposed to the old way of generating groups of items:
item<br>
item<br>
item<br>
or even:
<div>item</div>
<div>item</div>
<div>item</div>
I believe we’ve seen big improvements in semantics as XHTML and CSS have grown in popularity. Granted, semantic richness isn’t always the first direction people go when they start learning XHTML/CSS. However, it’s a fairly natural tendency for someone to discover what it means to use more meaningful markup as it gets stripped down to the basics. A page full of nothing more than divs, spans, and br’s might be perfectly compliant in its use of standards. But generic markup like this will appear anemic in comparison to well-structured documents. It’s a learning curve which comes in small bits and pieces at first, but then rapidly accelerates as familiarity with the potential increases.
There’s a challenge in the last sentence of Jason’s post which should not go unheard. We do need to demonstrate more often how standards-compliance and semantics work together. And why one without the other won’t get us much further than where we’ve been in the not-so-distant past.
Posted at 11:42pm in Web
25 comments (Comments closed)
Isn’t this just the difference between reading the specification (and following it guidelines) and validating. Validating is easy, following the specification (to the letter) is tough and I don’t think any site has done that…
Spot on!
I often find it difficult to choose which HTML tags to use in some circumstances, because of how limited HTML is really - so few tags, so many different things to say…
Thus I find myself pining for pure XML markup with virtually unlimited semantic richness and flexibility. If only… :-)
Emergent markup languages are also something that I find very appealing for some reason. I think it was Don Park who came up with this term on his weblog a few weeks/months back: http://www.docuverse.com/blog/donpark/2003/05/15.html
Yes, it is true.
If you start doing valid markup pages, you’re goin’ on the path for well semantical formed pages, no matter you will start using strong instead b, em instead i, and the list goes…
A good example is what you said, developers start using hn elements, wich denote importance between topics in an article.
Also, lets considering people who make standards websites are learning the real markupt mean, instead click on the element button in a dreamweaver menu bar, developers could now write a blockquote cite if we need to quote a large text.
After two years on the path of well formed code, i found myselft the last year learning all the tags for making good semantics on a valid page.
Keep it cool.
Standards Compliance and Semantic Richness are related in a sense that when combined, they amplify eachother’s usefulness. Why use CSS on an amount of DIVs that equals an amount of TDs without CSS? How to keep semantic code but still wanting to have some presentation? They were obviously intended to go together.
I found the easiest way to get around with both is to implement semantically rich code into content before even picturing the presentation. Styling follows and is then suddenly a lot easier, since you only have to change the appearance of what already is.
I once marked up a piece of content as a DL for the wrong reason. Had I focussed entirely on structure at that moment, I would have used a TABLE, because that is what the content was about. Styling it would then not have been so terribly difficult.
I have definitely found the way I design sites has changed almost entirely since moving to xhtml/css. In the bad old days I would make comps in Photoshop, then build the site, which I almost never do now.
Instead I work out how the XHTML document should be structured to be semantically valid (which forces me to think more clearly about the content - such as how many levels of headings do I need, etc…) and then design with CSS. One of the things I love most about this approach is that CSS allows me to ‘rapid prototype’ numerous different designs - making changes and viewing them in just seconds. My design approach is now much more ‘iterative’ and the final design is far more integrated with (and informed by) the content, whereas before I would tend to come up with a cool design and then shoehorn the content to fit.
I believe that well-structured documents and meaningful markup almost inevitably lead to better design. At least for me.
(Doug, can I ask if there is any reason you chose not to use a styled elements for the main navigation on Adaptive Path? This seems to be what all the cool kids are doing, just wondered what your reasonin was (if any)…also, I want to say how completely inspirational your work is - I spent a very enjoyable and instructive night recently going through the Adaptive Path source code and CSS seeing how you put it all together and diagramming it in my trusty Moleskine. Now I have lots of great new techniques to add to my toolkit! As has been said numerous times, the image & list double rollover trick is pure genius. Thanks again!)
I can definately see where jk’s coming from when he argues that too much emphasis has been put on having an xhtml site that validates, but I don’t think that he can say that this is because of an error in our priorities as a creative community.
Just like many-many others in this business, I have learned a ton about creating standards compliant xhtml/css sites from the likes of doug, zeldman, dan, eric, and dave (among others). Personally I have found that with most of their articles it is definatley implied (if not out right preached) that we should be using semantically correct markup. Actually, just last week I fought with a complex definition list for almost a full day in order to get it styled correctly and keep it more semantically meaningful.
That being said…keep up the good work doug. This community needs more teachers that are doing it like you guys.
Adopting standards and using validation are the first steps to well formed web design, not just well formed documents. There are a limited number of tags in XHTML/HTML - deal with it. There can’t be many of us building sites that require more than 6 headings, or more than 3 different types of list to correctly describe the hierarchical or semantic importance of a given string/object.
For many designers, (myself included), building sites is rapidly becoming an engineering task, with many disciplines to master, rather than the ‘artistic’ field it once was, and this is forcing us to think in ways which sometimes don’t come naturally to the (alright, my) creative mind. This is a good thing, as others have said, as we consider our work more carefully.
Furthermore, I suspect that, (and I haven’t, but should write it up - apologies), that there are is a limited set whereby all of the guidelines, standards, best practices, methods, optimisations and rules intersect.
For example, some CSS layout techniques are not viable if you wish to place your primary content at the top of the document, say as a search engine optimisation.
If I’m right, then there’s no reason why tools like Dreamweaver, (in a generation or two’s time), can’t construct documents in a satisfactorary and compliant fashion for the majority of users, who aren’t familiar with the innards of markup languages. Tools like DW are good when generating output limited to a small set of options. I’ve scribbled the process and what I think the options are down, it’s halfway to a wizard already.
I agree with Jason’s last point (evangelize etc), but it’ll take effort and some bravery to increase a clients expectations before a project even starts, or educate those who haven’t the time or inclination to listen. I mean, has he honestly never seen/noticed a clients’ eyes glaze over?
Semantically well formedness (is that a word?) is just another element of building a competitive, successful site. Either we all write about how to do it well, or we keep it to ourselves and (ahem) earn more bucks by building better sites. No comments on Jason’s site - so I’ll say it here instead - put up or shut up, eh? Moaning about it doesn’t help anyone.
Maybe the focus will move to semantics soon, once standards are well, standard.
Can someone please define what “semantics” means in the context of the web? Though I’ve seen the word used liberally and frequently, I have never once seen it defined.
I’m not too sure if Jason is trying to place a large gap between standards and semantics. To me, I read his article as giving a more precise definition to each. I tend to agree with him that standards do not necessarily beget semantics, and vice versa.
Standard compliant XHTML lends itself to semantic markup, and perhaps, you might say that semantics is inherent in CSS. But semantics can be subjective by nature and must be applied to the document. As you said above, valid XHTML can be a semantic “pile of junk”. In the end, it is up to the author to apply semantics to whatever she/he has written and that, itself, will depend upon the purpose of the code. I think the beauty of CSS and XHTML is that they invisibly encourage people to write more meaningful markup - it is easier to read by eye, easier to write (coming from someone new to coding), etc.
I liked Jason’s point of view if only because it seemed to give a more precise definition between the two subjects. A little more understanding; a bit better grasp on what it is I am doing.
Gabby, semantics with regard to web design means that if you have a paragraph, surround it with <p> tags; if you’ve got a article title (or something), use an <h1> tag; and if you have a list of items, use <ul> or <ol> with <li> tags instead of separating them with breaks or using <div>s. As much as possible, the tags surrounding the content of a document should describe what that content is and/or what it’s for. I’m sure there’s a more rigorous definition that people can go on and on about, but this simple one is more useful (IMO).
“I tend to agree with him that standards do not necessarily beget semantics, and vice versa. […] Standard compliant XHTML lends itself to semantic markup […]”
Exactly. It is very hard to write semantically correct markup that is not valid HTML of any dialect except for misuse, abuse or misunderstanding the tag syntax.
There needs to be a distiction between semantics and validation, because only then can we explain better how to make them work together.
As designers use better semantics, I believe they will start to see the fruits of doing so. Using better semantics sets up your site for better search engine optimization, easier to maintain, and easily transferred to other platforms.
It just takes getting used to designing that way. Validation should be a by-product of good markup/semantics, it should never be the primary goal of your markup
Thoughtful comments from everyone. It was Sam who found the words I wish I had thought of when writing this post:
Standard compliant XHTML *lends* itself to semantic markup
That’s the direction I was trying to go. Yes they’re separate, but I believe the two often tend to go together (eventually, if not right away).
By the way, did anyone else notice the way Kottke’s post title got truncated to 12 characters in the archive filename?
Standards Do
Interesting.
I think one of the tricky things is that XHTML-validity is testable, whereas whether a page is coded semantically is at least partly in the eye of the beholder. I think we can agree that XHTML that suffers from divitis and classitis (thanks, DWWS) doesn’t pass semantic muster, but for a lot of sites the line is pretty murky.
One thing that’s going on is that the developers and designers that are drawn to create sites that use valid XHTML/CSS right now (like me, though you can’t tell from my site) are also interested in accessibility and (partly through the accessibility angle) semantic markup. To me writing semantic markup means it will look good in Lynx — the page has intrinsic structure that can be discerned without the help of all the associated stylesheets and scripts.
Personally, I think the door to sell semantic markup to new folks is through issues of accessibility and usability on other devices… I think that Jason’s right in his message about evangelism — standards are great, and this other thing called semantic markup is great too, and look, they work together!
In many ways standards-compliance, semantic markup, usability, and accessibility go hand in hand. The toughest part about explaining these facets of web design appears to be separating them from one another.
Using structural tags like <hn>’s, <ul>’s, <p>’s and all the others helps your code be a) more semantically (I hope its a word too) pure, b) more easily accessible via screen-readers and alternate display devices, and c) closer to standards-compliance if you do it right.
I’m really excited about where this entire industry is going. It seems as though all of these similar disciplines are merging, and pretty soon every designer will be thinking about structural well-formedness just as they thought about colspan attributes in years past.
Let’s hope that browsers evolve with us :)
Oh, the irony of standards…
A certain very large firm (VLF) has design standards for it’s very large intranet. Nothing can be deployed unless standards compliant. Those standards are based on a 1999 design wherin all structural markup was sacrificed on the altar of SPAN. (Altar installed by a prominent NYC agency.)
Today a colleague comes back from a deployment review moaning, “They say the h1 is non-compliant, that I have to use span, that no one else uses h1, and if I insist, we need to write an exception request.”
BTW, VLF is indeed very large, in the computer industry, with revenues over … ooops if I tell you any more, you’ll know who it is.
Evil tags will die only when CSS becomes more powerful. There is currently no way, for example, to do something like this:
#div2 {
left: #div1.top + 5px;
}
If something similar gets into CSS3 i predict the end of non-semantic tables, spacers, and other anomalies.
It’s true that many designers who believe in using standards also believe in creating semantic markup, but—as Jason pointed out—font, b, and i are still a part of the standard.
If all non-semantic markup was stripped from the standard, then the connection between standards and semantics would truly exist.
IMHO you don’t appear to really grasp the semantic web concept. Putting your content in xhtml doesn’t make it in any way compatible with the semantic web, “more semantic” etc.
Consider this page: you use classes like header, pageheader, entry etc. If these were standardised (i.e. all sites used the same classes) then we could start getting some benefit from xhtml - you could pull entries from multiple sites and easily aggregate them. But of course we can do all this *already* with databases, RSS, CMS etc. So what are the benefits of xhtml over html?
As it is, xhtml is totally pointless, and discussing semantics in the context of headings, paras etc completely missing the point. Just my 0.2c ;)
As a growing web designer I feel truly lucky to be learning my craft during the time of sematic markup. It helps me immensely to be able to wrap all my paragraphs, lists and such in appropriate tags. I made a brief attempt at learning how to code webpages back in 2000, but found the lack of clarity as to how tags were supposed to be used too confusing. I crave order and structure, especially when I want to apply a creative design on top of it.
Ok, i think that XHTML+css standard use of both is just great, and atbless design greather, so how do i do a “table design” with a 10x10 grid? without a table use ? should i go with 10 div’s float: left for each line ?
Thanks
I chose to redo my site to xhtml/css so that it was semantic, much more maintainable, and hopefully more likely to look the same in all modern browsers. The only thing I sometimes wonder about are the links on the side. On the one hand, they are a list of items. Ok, I forgot what the argument against was. It certainly allows me to manipulate them better.
I wish people would stop with the Dreamweaver bashing already. The tool works perfectly and even encourages semantic markup.
Just because a minority of new designers choose to learn design first and correct markup second doesn’t mean the tool is inadequate.
That said, I wholeheartedly agree that once introduced to the wonders of valid markup and CSS, one is guided into semantic markup by default.
I spend a lot of time writing code that most be understandable by people who have only just entered the world of HTML and have never seen CSS before.
Logical markup almost always equals semantic markup.
I’m looking forward to the day of all web viewing tools (browsers, feedreaders, whatever) stop pushing their proprietry formats and the world can begin using tools that render code to an agreed standards.
One can dream.
*Note on my email address: yes it’s real and it works. I use ‘sitenameIpostedthison’ @ my domain to ensure I know where spam harvesters are getting my details from - that is all.
Semantics covers more than
<h1>, just think aboutcite="...",hreflang="...",lang="..."and why not cover stuff like<kbd>, samp, var, etc.Also have a good knowledge in linguistic, it would let you mark all those words, phrases correctly increasing semantics on a page.
<hr/> in the code is semantic or presentation? That decorative GIF is semantic (-ally meaningful) or presentation? Do I need to push that hrs and GIFs to CSS?
Hello, semantic-XHTML-CSS-stucked guyes. This is what I think you need to do:
- study philosophy, and learn what are objective reality (semantic) and its human reflection are all about;
- study what “process” (at all and in appliance to web/UI/software development) is, and what are the entities involved. You don’t design layers and rectangles in photoshop (old way) or markup your page in XHTML and position divs with CSS (new way). You define (with whatever tool or technology) the page semantic (what objective reality does page contain), maybe its structure (though reality is not structured in itself; it is human beings to structure it to be able to reflect it with limited non-multidimensional brain), and present this reality via UI;
- understand, that XHTML/CSS is not that big as it seems and not a revolution (don’t know how it is “shuher” in English), and not about improving semantics (maybe make page structure visible with nested divs), but just newly introduced convenient shortcut (Ctrl+C, Ctrl+V:) to develop web UI, only a tool; but the process/entities (to those who got The Knowledge) not changed. You really don’t grasp what are semantic (web) is. One thing here is that improved semantic means “semantic can be extracted from this page and be used some way”. Is changing tables to divs about extracting semantics? No. RDF/OWL yes. But XHTML/CSS are about more straightforward way to implement designed page structures (with whatever tool; with a sheet of paper) and more convenient way to change visual aspects later. Maybe a thing to be a candidate for good semantic/presentation separation is pure XML/XSL; though in XML/XSL you cannot give a definite answer where to put that decorative GIF as well.
- see that distinguishing semantic (objective reality) and its presentation (the way to reflect) is not an easy task, and in most cases cannot be definitely solved. It goes to Socrat. And that a project with perfect semantic/presentation separation would break any reasonable budget. “We should be using semantically correct markup”. Go on:)
- read at least W3C materials on semantic web and ontologies. Guyes, you here want to be the one to find that big thing, be creative, invent “emergent markup languages”, but don’t want to take a look at what has been researched and done before, in areas such as knowledge representation etc. And end up producing bulks of text in your blogs.
Excellent comments are #8, #19. #12 is good except for the word “semantic”. #17 is interesting - can it be done?
Having semantic defined as in #10 we have nothing to talk about, because semantic is built-in in XHTML in this case: compliance to XHTML (which says to use <p> for paragraph) _is_ being semantically correct that way. Semantic in its common meaning as “objective reality” has no relation to XHTML/CSS.
Sorry, bored.
Comments no longer open for this entry.