The document discusses common misconceptions and pitfalls around using web standards. It argues that web standards are about more than just validation - they are about semantics, separation of concerns, and pragmatism. Some key points include: using the most appropriate HTML elements to convey meaning rather than appearance; applying styles through CSS instead of presentational markup; avoiding non-semantic class names; and recognizing that not all uses of tables or images are invalid. The document advocates for balancing standards with practical concerns like multiple authors and one-off content needs.

1. Web standards pragmatism
Patrick H. Lauke / Web Developers Conference / 12 November 2008
FROM VALIDATION TO THE REAL WORLD

2. Who am I?
Web Editor for University of Salford
Co-lead of Web Standards Project (WaSP) ATF
Occasional author

3. What are web standards?

5. Web standard tenets
Boil down to three things:
 Valid (published grammar)
 Separation of content and presentation
 Semantic markup/code

6. Visual aesthetics?
“Beautiful sites” can be created with any
technology...
 Table-based layouts
 Font tags
 Giant images
 etc
Why bother with web standards/CSS?

7. Why web standards
Some advantages:
 Lighter code
 Easier to maintain
 Easier to change look/feel
 Multiple output media
 Accessibility
 SEO

8. Web standards and aesthetics?
“You can't make good looking sites with web
standards...”

13. Traditional “old school” way
Choice of markup purely down to their look
 <h1> is too big ... I'll use <h4> instead, or just a
<p>
 <blockquote> to indent
 More space between paragraphs ... add a few
empty <p></p> or just lots of <br>

14. Traditional “old school” way
...then sprinkle presentational markup on top
<p><font size="+3"
color="ff0000”><b>Heading</b></font></p>
<p>this is <b>important</b>.</p>

15. Web standards elements
Building a page by defining:
 What each piece of content is in HTML
 What it looks like in CSS

16. Web standards process
Distinct tasks:
 Mark up content with most appropriate
elements — convey meaning, not look
 Apply styling (override browser defaults)

17. Semantic / structural markup
<h1>Heading</h1>
<p>this is <strong>important</strong>.</p>

18. I know kung fu... common
pitfalls

19. New technology, old habits
<p><font size="+3" color="ffffff">...</font></p>
<p><span style="font-size: 200%; color:
#ffffff">...</span></p>
<p style="font-size: 200%; color:
#ffffff">...</p>

20. Meaningless content
Presentational:
<p class="headingbig">Heading</p>
<p>Very <span class="bold">important</span>.</p>
<p class="headingsmall">Subheading</p>

21. Meaningless content
Semantic:
<h1>Heading</h1>
<p>Very <strong>important</strong>.</p>
<h2>Subheading</h2>

22. Non-semantic class/id names
<p>I know <a href="..." class="red">CSS</a>.</p>
.red { color: red; }
I know CSS.

23. Non-semantic class/id names?
<p>I know <a href="..." class="red">CSS</a>.</p>
.red { color: green; }
I know CSS.

24. Semantic class/id names!
Presentational:
... <a href="..." class="red">CSS</a> ...
Semantic:
... <a href="..." class="external">CSS</a> ...

26. Classitis – the “labelmaker” approach
.nav { text-decoration: none; }
<ul>
<li><a href="..." class="nav"> ... </a></li>
<li><a href="..." class="nav"> ... </a></li>
<li><a href="..." class="nav"> ... </a></li>
<li><a href="..." class="nav"> ... </a></li>
<li><a href="..." class="nav"> ... </a></li>
</ul>

27. Classitis – cured
#nav a { text-decoration: none; }
<ul id="nav">
<li><a href="..."> ... </a></li>
<li><a href="..."> ... </a></li>
<li><a href="..."> ... </a></li>
<li><a href="..."> ... </a></li>
<li><a href="..."> ... </a></li>
</ul>
 Be smart with your CSS
 Use semantic structure to your advantage

28. Tables?
“I've just learnt web standards and removed all
tables from my site...”

31. Tables (faked)
Misguided zealots go too far...
<div>
<div>
<span>...</span>
<span>...</span>
</div>
<div>
<span>...</span>
<span>...</span>
</div>
...
</div>

32. Tables!
Not all tables are evil...
 Tabular content (think Excel spreadsheet)
 Best way to define relationship
 Accessibility

33. “Fluff” images

34. “Fluff” images
<p class="warning">
<img src="warn.gif" ... alt="" />
<strong>Error: no entry found</strong>
</p>

35. “Fluff” images via CSS
If only decorative...
 Decorative = presentation
 Add images as non-repeating CSS
backgrounds

36. <p class="warning">
<strong>Error: no entry found</strong>
</p>
p.warning { padding: 10px;
border: 1px #000 solid;
background: url(warn.gif)
no-repeat left top;
}

37. “Fluff” images via CSS
...but sometimes you have to stick with images
 WYSIWYG authors?
 One-off images don't warrant new CSS rules

38. Image replacement
Images used for headings etc
 Branding
 “Fancy” font
 Graphical buttons

40. Image replacement
 Mark up text version (proper semantics)
 Hide this text
 Put an image in its place

41. Image replacement
Wrap text in a span, apply background image
<h1><span>Heading</span></h1>
h1 { width: 350px; height: 75px;
padding: 0;
background: url(heading.gif)
no-repeat left top;
}

42. Image replacement
Hide the span
<h1><span>Heading</span></h1>
h1 { width: 350px; height: 75px;
padding: 0;
background: url(heading.gif)
no-repeat left top;
}
h1 span { display: block; position: absolute;
top: 0; left: -999em;

43. Image replacement issues
 Multiple (unskilled/WYSIWYG) authors?
 Backgrounds don't normally print
 Sometimes, a humble image will do...
<h1><img src="heading.gif" alt="..." /></h1>

44. Dogmatism and standards

45. Dogmatism and standards
“If your site doesn't validate, you've failed and
nobody wants to even talk to you...”

47. Dogmatism and standards
Validation is not an end in itself
 Quality Assurance of your code
 Some rules can be bent, others can be broken
 Depends on your particular situation

48. Attack of the pedants...
“What's the most semantic way of marking this
up?”

51. Most semantic?
<ol>
<li><a ...>University home</a></li>
<li><ol>
<li><a ...>About the Uni</a></li>
<li><ol>
<li><a ...>...</a></li>
...
</ol>

56. Take-away advice...

57. Web standards are not just about validation
Easy to use standards in an inappropriate way
Tables are for tabular data
Sometimes, you have to compromise

58. Thank you...