Web Standards Solutions: The Markup and Style Handbook

Publisher: A-Press
Author: Dan Cederholm
Year: 2005
ISBN-10: 1590593812

BOOK DESCRIPTION
Web Standards are the standard technology specifications enforced by the World Wide Web Consortium (W3C) to make sure that web designers and browser manufacturers are using the same technology syntax. It is important that these implementations are the same throughout the Web, otherwise it becomes a messy proprietary place, and lacks consistency. These standards also allow content to be more compatible with multiple different viewing devices, such as screen readers for people with vision impairments, cell phones, PDFs, etc. HTML, XML, and CSS are all such technologies.This book contains questions and answers on markup and style topics for Web Standards. It explores the multiple ways you can handle a situation when building with Web Standards – and the advantages and disadvantages of those methods. Additionally, each chapter goes a step further, with “extra credit” sections to give the reader extra tips and tricks based on the topic. The reader is empowered to make better decisions based on well-rounded information.

BOOK CHAPTERS

Lists
Headings
Tables Are Evil?
Quotations
Forms
<strong>,<em>, and other Phrase Elements
Anchors
More Lists
Minimizing Markup
Applying CSS
Print Styles
CSS Layouts
Styling Text
Image Replacement
Styling <body>
Next Steps

REVIEW
I thought this book was very helpful in providing other ways of handling markup. Some are examples I have not encountered before. Below are some examples.

<thead> and <tfoot> elements must appear above <tbody> sections to allow for browsers and devices to load the content first. An example of a table marked up with grouped table rows may something like this:

<table summary="">
	<caption>Meta data info about the table</caption>
	<thead>
		<tr>
			..table header content...
		</tr>
	</thead>
	<tfoot>
		<tr>
			...table footer content...
		</tr>
	</tfoot>
	<tbody>
		<tr>
			...table data row...
		</tr>
		<tr>
			...table data row...
		</tr>
		<tr>
			...table data row...
		</tr>
	</tbody>
</table>

PHRASE ELEMENTS
<cite>: Contains a citation or a reference to other sources
<dfn>: Indicates that this is the defining instance of the enclosed terms
<code>: Designates a fragment of computer code
<samp>: Designates sample output from programs, scripts, etc.
<kbd>: Indicates text to be entered by the user
<var>: Indicates an instance of a variable or program argument
<abbr>: Indicates an abbreviated for (e.g. WWW, HTTP, URI, etc…)
<acronym>: Indicates an acronym (e.g. WAC, radar, etc…)

THE BEST WAY TO MARKUP AN ANCHOR
This is a standard way in which one would probably create an anchor:

<a href="#oranges">About Oranges</a>
	... some text here ...
<a name="oranges"></a>
<h2>Oranges Are Tasty</h2>
	... more text here ...

This is a better way of doing the same:

<a href="#oranges">About Oranges</a>
	... some text here ...
<h2 id="oranges">Oranges Are Tasty</h2>
	... more text here ...

This method works best because you can also use CSS or JS to target this entity without the extra markup.

CSS: PRINT SYTLES
To ensure each of these CSS files are used only for the intended medium we add the MEDIA attribute to the LINK element.

<link rel="stylesheet" type="text/css" media="screen" href="/css/styles.css" />
<link rel="stylesheet" type="text/css" media="print" href="/css/print.css" />

Make it a point to hide unnecessary elements when creating a print stylesheet. Set display attribute and its value to none with elements.

Expose hyperlink URLs in content area to a print style sheet:

#content a:link:after, #content a:visited:after {
	content: " (" attr(href) ") ";
}

…essentially we are telling the print version of the page to reveal the hyperlink URLs afer the hyperlinked text, putting the URL in between a set of parentheses with a single space before and after.

DISPLAYING A LO-FI/HI-FI VERSIONS OF LOGOS

<div id="logo">
	<span>
		<a href="/">
			<img src="/images/logo_lofi.gif" width="173" height="31" alt="" />
		</a>
	</span>
</div>

Here is the CSS that makes it all work!

#logo img {
	display: block;
	width: 0;
}
#logo span {
	width:173px;
	height: 31px;
	background: url(../images/logo_hifi.gif) no-repeat;
}

Additional Source Sites

W3C
www.w3.org

Web Standards Projects
www.webstandards.org

A List Apart
www.alistapart.com

CSS Zen Garden
www.csszengarden.com

Dive into Accessibility
www.diveintoaccessibility.org

CSS-Discuss
www.css-discuss.org

Web-Graphics
www.web-graphics.com

Digital Web Magazine
www.digital-web.com

The Weekly Standards
www.weeklystandards.com

Influential & Inspirational Web Blogs:

Jeffrey Zeldman Presents: The Daily Report
www.zeldman.com

Stopdesign
www.stopdesign.com

mezzoblue
www.mezzoblue.com

Eric Meyer
www.meyerweb.com

Tantek Celik
http://tantek.com/log/

What Do I Know?
www.whatdoiknow.org

Asterisk*
www.7nights.com/asterisk/

superfluousbanter
www.superfluousbanter.org

Simon Willison’s Weblog
http://simon.incutio.com

Brainstorms and Raves
www.brainstormandraves.com

Living Can Kill You
www.saila.com/columns/lcky/

blog