Semantics and design
With everything else that has been going on lately, it’s been a while since I’ve written anything much about CSS. It’s not that I’m any less interested in CSS; infact seven’s recent Beta has me more excited than ever about what we will be able to do on a regular basis. But over recent months, I’ve discovered a renewed interest in semantics and markup and CSS has taken a back seat.
CSS is often thought of as the presentational topping on modern web design. I described it once as the Fruity jelly(o) in a The Web Standards Trifle..
I think that most of you will have got the importance of separating structural and semantic markup (HTML/XHTML) from presentation (CSS) and behavior (DOM scripting). For those that have, I’m sure that presentational markup such as,
<p>I should be a header</p> <p><strong>I should be a header</strong></p> <p style="font-weight:bold;">I should be a header</p> <p class="header">I should be a header</p>
has already vanished from your code. But as well as the danger of muddying markup with presentation, there is also a danger of adversely effecting semantics through incorrect use of CSS. In other words there are times that we use CSS to achieve a visual style and in doing so reduce the semantic value of a document. I’ll give you some examples of what I mean.
<h2> + <p>
One of my favourite design devices is to make the first paragraph of content on a page (typically one that follows a top level header such as <h2>) bigger or bolder than its sibling paragraphs. This first paragraph is often a summary of the particular article or content on that page. Typically this would be marked up and styled as:
<h2>CSS for Developers</h2>
<p>A one-day workshop designed to cover the fundamentals of CSS.
It’s aimed at developers… </p>
h2+p { font-size : 120%; font-weight : bold; }
But wait. What was my reason for singling out that paragraph in the first place? To emphasize it. A perfectly good and more appropriate element exists for just this purpose, the <em> element. So more appropriate would be to markup and style that paragraph as:
<h2>CSS for Developers</h2>
<p><em>A one-day workshop designed to cover the fundamentals of CSS.
It’s aimed at developers… </em></p>
h2+p em { font-size : 120%; font-weight : bold; font-style: normal; }
See the difference? I’m not using the emphasis element here for presentational reasons because I intended to to add emphasis to it. It’s a subtle but important distinction.
Images and FIR
Along with many others I try to limit the images that I include in my markup and add images that are purely there for presentational reasons via CSS. But I have seen a tendency to remove images that can add meaning to a document from markup. I have been as guilty as anyone in falling into this trap.
Let’s take this example from a site for the Fifth Wheel Company that I designed back in December. (You’ll see the unordered list below represented as the three images that overlap the main header image.)
<ul> <li id="nav_01"><a href="#">Celtic Rambler</a></li> <li id="nav_02"><a href="#">GlobeStormer</a></li> <li id="nav_03"><a href="#">Equisara horse trailer</a</li> </ul>
It could be argued that these images are purely decorative and as such have little to contribute to their function which is linking to another page. But compare them to the two images below them. Are these two images significantly different from the three in the list? No. Yet these two have been been placed directly in the markup.
It’s a subtle difference but one that illustrates that images, marked up with appropriate alt attributes (and perhaps longdesc) can add semantic meaning to a document and should not be placed via CSS.
Image replacement
It is also important to remember that for a whole bunch of reasons, not least wider accessibility, that image replacement techniques should always be used sparingly and never to insert content into a page through CSS background images or generated content that should correctly be added through text or properly attributed inline images.
What belongs in markup should stay in markup
Jeremy Keith has often argued that DOM scripting should not be used to generate content that rightly belongs in markup. The same could be argued of CSS Generated Content. Until now few browsers have reliably and consistently implemented this powerful CSS tool and there are no plans to support it in the commercial release of seven. But as browsers themselves develop (seven will only hasten the development of competing browsers) and support for Generated Content increases, we should be mindful of not abusing its power at the expense of semantic markup.
Design is meaning
One final point to ponder is that far from being divorced from meaning, good design conveys meaning; a point which is often lost when stripping away presentation for the sake of leaner markup.
Let’s think for a moment about the CSS Zen Garden, where the designs have little or nothing in keeping with the purpose or meaning of the content. The Garden does an amazing job of illustrating that semantics can be completely and in many cases wrongly separated from design. Let’s look at two of my favourite examples.
Pinups by Emiliano Pennisi
Business Style by Gunta Klavina
In the wild these very different designs would convey a different message and therefore a different meaning to their users through their design, irrespective of their markup. One is fun, the other businesslike and more serious in tone. Yet stripped of CSS, the differences in meaning conveyed through their designs are lost.
And this, what I like to call the semantics of design, is something that I’m going to return to in a column some time in the near future.
Replies
-
#1 On April 25, 2006 10:32 AM Matt said:
I think you have been away from HTML a little bit too long, there are quite a few typos in the code above. Missing angled brackets and misplaced forward slashes generally.(Ed says: I think you’ll find that those pesky strokes are now to your liking Matt.)
-
#2 On April 25, 2006 10:36 AM Matt Wilcox said:
"Are these two images significantly different from the three in the list? No. Yet these two have been been placed directly in the markup."
With regard to the Fifth Wheel site, when we built it we put the two images in the mark-up because they are editable via the CMS. In an ideal world they would live in the CSS as do the top three images, but there’s no way to specify the padding-top to be the same height as whatever image they choose to use, and thus no way to do this layout and retain flexibility using only CSS.
-
#3 On April 25, 2006 10:37 AM Stephen Lewis said:
Nice article, and one that I think a lot of people (myself included) will relate to.
It would seem the natural tendency when starting out with CSS is to pathologically strip out anything that could in any way be construed as "presentational"; it’s only once your use of XHTML / CSS has reached a reasonable maturity that you start to ruminate on the questions described here.
The "leader" paragraph after a heading is a particularly good example of this.
There is one question that I have, regarding the use of unordered lists for navigation. For every site that I have ever worked on, the order of the navigational elements has been given at least some consideration, meaning that the links are displayed according to their priority within the site.
This being the case, why not use an ordered list? It’s something I’ve taken to doing of late, but I fear I may be missing something…
Stephen
-
#4 On April 25, 2006 10:43 AM Malarkey said:
@ Matt Wilcox: You’re right, when you and I put the templates together for Fifth Wheel, those images were a concern and we decided to put them into the markup for the reasons you described. My point was more philosophical rather than practical reference that specific example.
-
#5 On April 25, 2006 11:00 AM Matt Wilcox said:
@ Malarkey:
Ah, I see! In that case, fair point.
I do agree though, it’s easy to get into a groove of dealing with mark-up and code in one particular way (i.e. porting all images into the CSS by force of habit), without actually considering the semantic value of what you’re working on - and that’s not a good thing.
CSS generated content is definately one to be very careful over. Bruce Lawson mentioned the issue it in his post about IE7 : Three Cheers for Internet Explorer. I think it’s a great tool when responsibly used (for example to show href attributes on printed documents). The trick is to use CSS Generated Content either purely for decorational elements, or to display existing semantic content which otherwise would be invisible to the user (access keys etc.). It shouldn’t be used to add semantic content to a document.
-
#6 On April 25, 2006 11:55 AM Tony Bittan said:
Re: Emphasis, I guess it depends on what you are emphasising it for. You seemed to imply that you wanted to emphasise the first paragraph just because it’s something you like doing stylistically. If it is a summary of an article, fair enough, but if it’s just a "first paragraph" there’s no genuinely semantic reason for using <em>. Is there?
Are adjacent siblings actually going to work in IE7? I mean to test all the css support in seven that was previously absent, but I haven’t got around to it yet - (maybe today!).
-
#7 On April 25, 2006 12:10 PM Jaap said:
About the empahsize bite, I don’t exactly agree with you. Do you really want to emphasize the first paragraph, not just visually emphasize it?
I always try think of the em element in a piece of text as if it were read to me a bit louder compared to unemphasized text. To indicate that it is of more importance.
By emphasizing a full paragraph your giving every word in that paragraph the same weight effectivly unemphasizing it from a semantic point of view. You might have emphasized the first paragraph but does that paragraph really have more meaning then the others following it?
-
#8 On April 25, 2006 05:06 PM Aaron Gustafson said:
I’m with you Andy, I’m always amazed at how much rish meaning you can add to a document with semantic markup, whether you want to do anything with it visually or not. abbr, dfn and dl, for instance, are particular faves, but more common elements like em and strong can be very useful when trying to convey a message. And that’s why we do this isn’t it? To get a message across?
-
#9 On April 25, 2006 05:51 PM simon r jones said:
On the emphasis point think about newspapers, they do a great job of different sizes type for headers and leading paragraphs.
The point is when you scan the paper you can quickly pick up meaning without having to read the whole thing. So the lead paragraph does have more importance in that context, and seems to be perfectly reasonable to highlight with the em tag.
Having said that scanning text in this form is presumably a very sighted way to access content - I don’t know how well a visually impaired user can scan through the first few important bits of text in a document with a screen reader…
-
#10 On April 26, 2006 12:38 AM Federico said:
About the h2 + p example, you could also markup your P with a class name entry-summary (from hAtom).
-
#11 On April 26, 2006 01:38 AM web said:
On your last point -- design conveys meaning -- I couldn’t agree more. I find myself adding in markup all the time which is not present on the design to make things clearer for the visually-challenged.
A good example of this is any page will have a usual sidebar on a page which may not contain any specific headline -- sometimes I’ll toss in some additional markup like an h4 and create some title like "additional information"
I typically look at a unstyled page to ensure that everything has some context.
-
#12 On April 26, 2006 01:47 AM Chasen Le Hara said:
@ Stephen: I do the same thing with ordered lists for navigation (at least, in my spring reboot…); I think it makes sense for navigation to be an ordered list unless it actually makes no difference what the order is, which doesn’t seem to be the case for most sites.
-Chasen -
#13 On April 26, 2006 03:42 AM Wilson Miner said:
I’ve gone back and forth so many times on whether images are important enough to the content to go in the markup at all. I’m especially conflicted about logos. One day I think they ought to be images because branding is important to the content, and the next I think it’s fluff and it ought to be shoved out to the CSS.
How can I cure this rash… of… uncertainty?
-
#14 On April 26, 2006 09:58 AM Dave Scriven said:
@Wilson: You just described exactly what I was thinking.
This is a really good article and it’s come at a time when I’ve been thinking about these sorts of questions. I have stripped out images before just to replace them with background images without even thinking about whether they are content. I’m too used to trying to avoid images when there is no need - just use them properly. It’s too easy to not think about it and just do it which is something I have to sort out.
I really like the first para emphasis idea. It’s not something I’ve even thought of before but see it every day in the paper. Perhaps that’s just because I’ve never written article style content before.
-
#15 On April 26, 2006 12:24 PM Stevie D said:
"There is one question that I have, regarding the use of unordered lists for navigation. For every site that I have ever worked on, the order of the navigational elements has been given at least some consideration, meaning that the links are displayed according to their priority within the site.
This being the case, why not use an ordered list? It’s something I’ve taken to doing of late, but I fear I may be missing something…"
It is no more *ordered* than the paragraphs in this article are ordered. Any list or set of information will generally start with the most important and work its way to the least important. But it’s still just a list of items that could be written in any order.
That is different to the sort of list where items need to be in the same order, such as a list of instructions or a table of contents.
I would say that a navigation list is definitely [ul], but a breadcrumb trail could be a good case for [ol].
-
#16 On April 26, 2006 12:31 PM Stevie D said:
About the h2 + p example, you could also markup your P with a class name entry-summary (from hAtom).
How much use is this, in general? Is it substantially better than [p class="first-para"] or any other name you choose to make up?
[p][em] is a semantically correct and appropriate construction that will work cross-browser and in any situation - and works in HTML as well as XHTML.
Another solution that a lot of people use is to put the paragraph as a subheading. I’m in two minds about this - if it is a very brief paragraph, I can see that as valid, but anything more than a couple of lines I think it would be hard to classify as heading.
-
#17 On April 26, 2006 01:41 PM Wilfred Nas said:
Great article, this is stuff to think about if you are coding clean and want sites to be accesible too.
(ps is h2 + p not something IE can’t handle, js is needed to make it work, something I personally try to steer clear of..)
-
#18 On April 26, 2006 08:04 PM Malarkey said:
(In sunny Iceland, preparing for IceWeb.)
@ Wilfred Nas: "Is h2 + p not something IE can’t handle."
h2+p is an adjacent sibling selector that are not supported by legacy IE browsers (even so no is a great time to start widely using this kind of ’advanced’ CSS selector.
@ Federico: "About the h2 + p example, you could also markup your P with a class name entry-summary (from hAtom)."
You are absolutely right. XHTML is limited in the breadth of its ability to give us all the elements that we need to ably describe the type of content on the web today and Microformats are an interesting solution to that problem. hAtom is not a microformat I’m too familiar with (or have used in anger).
@ Stevie D: "Another solution that a lot of people use is to put the paragraph as a subheading. "
This is an idea that I have been toying with, however for longer blocks of text I think that <p><em> is still the most appropriate.
@ Wilson Miner: "I’m especially conflicted about logos."
That is a tricky one. I’m not sure that a logo image is strictly content, but correctly marked up with appropriate alt attributes it could become content of a sort. Maybe attributing alt text is the ’acid test’? If an needs alt text it’s content and should be in the markup, if there is no appropriate text that you can add, it’s decorative and should be in CSS. How about these examples.
<img src="logo.png" alt="Apple logo" />
I would consider "Apple logo" to be non-informative alt text and would move the logo to CSS.<img src="macbook.png" alt="MacBook with integrated iSight camera" />
I would consider informative alt text and therefore would keep the image in the markup. -
#19 On April 28, 2006 01:18 AM Alex McKee said:
Whew. I thought I was the only one in the emphasis-where-it-is-due camp. Quite right, the emphasis element should be used when you wish to semantically emphasise not presentationally emphasise.
It’s too subtle a difference for some people, but the emphasis sure is noticable when the page is read. In fact, IMO if you fail to use those strong and emphasis elements where they are needed, you are discriminating against those not using a GUI browser.
So well done Andy and I totally agree with you!
-
#20 On April 28, 2006 07:27 PM Stephen Lewis said:
@StevieD
It is no more *ordered* than the paragraphs in this article are ordered. Any list or set of information will generally start with the most important and work its way to the least important. But it’s still just a list of items that could be written in any order.
I take your point with regard to the navigation, although I’m not sure that I’d go along with it 100%.
However, comparing a list of navigational items to the ordering of paragraphs in this article is a flawed analogy. The ordering of the paragraphs is far from arbitrary (at least, I assume not, Andy?), and if you change their order, you certainly risk changing their meaning.
Stephen
-
#21 On May 1, 2006 02:47 AM patrick h. lauke said:
on the css zengarden designs: of course they both have a different feel (fun versus serious/businesslike). and yes, if the imagery is the only indication of this feel, you’re right that removing them also removes this meaning. however, in reality (i.e. outside of the experimental lab of the garden), the feel will most likely also be conveyed by the actual copy…text that either conveys an idea of fun or of business.
-
#22 On May 1, 2006 01:58 PM Sunshine said:
If an [image] needs alt text it’s content and should be in the markup, if there is no appropriate text that you can add, it’s decorative and should be in CSS.
But from a marketing point of view your logo is a major part of your brand and your brand is absolutely content. So even though your logo widget is indescribable by alt text it should be more than just decoration because it serves as alternative content for the name of your site/product/company.
Even though it will be missed by those with screenreaders it’s still seems important that people with styles off get that name == logo association. It might even be worth it develop a unique text description for your logo for use in all instances where an image is unavailable, to give screenreader users that brand association as well.
nike could be "logo: a swoosh resembling a stylized curved check mark going left to right"
malarkey could be "logo: a bulls-eye with a blue outer ring, a white inner ring and a red center"of course that would work better in some instances than others and would need someone good at writing descriptively but the point is.. generally you’ve worked really hard to build a brand and associate it with a logo. It seems wrong to relegate it to the world of decorative backgrounds and dropshadows.
-
#23 On May 1, 2006 11:58 PM patrick h. lauke said:
"Even though it will be missed by those with screenreaders it’s still seems important that people with styles off get that name == logo association. It might even be worth it develop a unique text description for your logo for use in all instances where an image is unavailable, to give screenreader users that brand association as well."
but when would screen reader users come across a swoosh and think "ah, i remember reading the alt on the nike site, so this is associated with nike"
if a site was specifically about analysing the design of logos, a text alternative like the ones you propose may be relevant, nay essential. for common use, however, this seems like the same bad approach as having an image as a bullet point with "a small red sphere with a highlight on the top-left corner"…useless.
-
#24 On May 2, 2006 10:55 AM Chris Hunt said:
With regard to images, I don’t think it’s as clear cut as "no alt=no content". Sure images that don’t have alternate text probably aren’t content, but it ain’t necessarily so.
There are images which are useful content to those who can see them, but for which no useful alternative can be provided to those who can’t. Logos would often fall into this category, so would the images in an image gallery, another example would be a map of a location.
In the case of a map, I would always want to supplement it with a seperate text description or directions - after all, some people can see maps without being able to read them (insert sexist comment here). However, the map is certainly content despite having no useful alt text.
Another consideration, albeit somewhat removed from the lofty deliberation of semantic purity, is people who have their browsers set to ignore background colours and images when printing. Maybe "do I want people to be able to print it" is another test to apply?
-
#25 On May 5, 2006 04:45 PM Steve Ganz said:
I’ve gone back and forth and back and forth on the logo as content issue for years now. I revisit it everytime I sit down to create a new site.
But I’ve been sittiing firmly in the logo is content camp for a while now and it’s pretty comfortable here. Primarily for the reason that if your users are likely to print your Web pages, the only way you can guarantee that the logo, and indeed your brand, will be printed right along with the rest of the content, is to place the image inline. Most browser’s default settings are to not print background images. To enable the printing of background images, the user is required to take action. And your average user is unlikely to take that action.
So if your brand is important to you, or your client, and you want that logo to accompany the content of a particular page when printed, go with the inline logo.