PageTalks

I met this book in the library months ago. Despite the few glimpses in a hurry, I felt it was a great book and made up a mind to produce some time to read it.
Detail about this book:

http://astore.amazon.com/simplebits-20/detail/1590593812

It’s only a handy book, light and thin. The author is Dan Cederholm, who probably is a nobody in your mind but indeed an expert in Web Standards. Simplebits is his own site and I took it into my favorites long time ago.

On the whole, this book is good enough for those who know the basics about XHTML, but desire to rise into a upper atmosphere of web standards. You may think CSS Mastery is also anther choice. Yes, it’s very similar to CSS Mastery. In my opinion, just buy either of two.

Following are some my digests and thoughts about this book, for you review. Hope you find it useful.

Lists

• Don’t use br to break a line
• Keep the tag closed
• Use li with ul

In this chapter, Dan use pure css to create a beautiful navi tab, which may inspire you a lot.

Heading

• Use h1~h6 to describe headings
• Use them in the descending order

Here, we get to know The Chameleon Effect, which take advantages of transparent GIF in a IMG tag. When you change the background property of IMG in CSS, you change the background of the image the users will feel.

<h3><img src="http://images.fastcompany.com/icon/first_imp.gif"width="13"height="13"alt="*"/>FIRST IMPRESSION</h3>

See, you just change the background of a “image” through modification of CSS. This will work well when you want add a watermark on your photoes.

Tabular Data

Table is not evil, and it’s part of XHTMl Spec. Tabular data should be described by table tag, e.g:

• Calender
• Spreadsheet
• Charts
• Schedules

Do with more cautions：

• Add caption tag to serve as a title of the table
• Assign summary property to tell users the breif to the table, thus increasing the accessiblity.
• use th as cell heading
• use the headers property of td tag to show the relations among the data cell
• assign abbr property in th to brief the cell heading. This will help screen readers a lot
• Use thead, tfoot, tbody to make table more sematic. You will be glad to find table heading and table foot will be displayed on every printed talbes.

And the author shows us how to create a grid using table and CSS ：

table{
border-top:1px solid#999;
border-left:1px solid#999;
border-collapse:collapse;
}
th,td{
border-right:1px solid#999;
border-bottom:1px solid#999;
}

Here we set the border-collpase to collpase the gag between cells.

Quotations

It’s a common pitfall to most designers. Dan lists some methods used widely and tell the goods and bads.

For correct quotations:

• Use blockquote to wrap the content
• Assign cite property to blockquote, telling us where the quotations come from
• Use q for inline quotations
• Assign lang property for q to tell users in which language the quotaions are (Complete list of the availible values for lang: http://www.w3.org/TR/html4/struct/dirlang.html#langcodes)

Form

Just another perilous pitfall. Good forms and bad ones differ tremendously.

Sometiems we find people write some like this:

• Use br to break a line
• Use table for layout
• Use both p and br to break a line

Dave suggests：

• Nerver use table for simple forms
• Wrap the title of input item with label tag
• Use p and label for simple forms
• For ultimate readablity, use dl, dt, dd to describe a forms
• Assign tabindex property for input tags and other interactable components
• Assign accesskey property for frequently used elements
• Use fieldset to group related form items

Some examples：

<form action="/path/to/script"id="thisform"method="post">
<dl>
<dt><label for="name">Name:</label></dt>
<dd><input type="text"id="name"name="name"/></dd>
<dt><label for="email">Email:</label></dt>
<dd><input type="text"id="email"name="email"/></dd>
<dt><label for="remember">Remember this info?</label></dt>
<dd><input type="checkbox"id="remember"name="remember"/></dd>
<dt><input type="submit"value="submit"/></dt>
</dl>
</form>

In code above, dt and dd are not equally matched, which I doubtly personally. But I can’t prove this wrong as HTML&XHTML The Definitive Guide give only a dim definition：

each item name in a<dl>list is marked with the<dt>tag,followed by the item’s definition or explanation marked by the<dd>tag.

<form action="/path/to/script"id="thisform"method="post">
<p><label for="name"accesskey="9">Name:</label><br/>
<input type="text"id="name"name="name"tabindex="1"/></p>
<p><label for="email">Email:</label><br/>
<input type="text"id="email"name="email"tabindex="2"/></p>
<p><input type="checkbox"id="remember"name="remember"
tabindex="3"/>
<label for="remember">Remember this info?</label></p>
<p><input type="submit"value="submit"tabindex="4"/></p>
</form>

<form action="/path/to/script"id="thisform"method="post">
<fieldset>
<legend>Sign In</legend>
<p><label for="name"accesskey="9">Name:</label><br/>
<input type="text"id="name"name="name"tabindex="1"/></p>
<p><label for="email">Email:</label><br/>
<input type="text"id="email"name="email"tabindex="2"/></p>
<p><input type="checkbox"id="remember"name="remember"
tabindex="3"/>
<label for="remember">Remember this info?</label></p>
<p><input type="submit"value="submit"tabindex="4"/></p>
</fieldset>
</form>

Phase Elements

These are confusing elements in HTML. You may encounter questions about these when you are applying for a front-end engineer:
“What’s the difference between <b> and <strong>?”

In fact, most designers are just reluctant commsuming time applying these seemingly insignificant phase elements.
But, these are the very important steps to build more semantic pages.

Dave points out：

<em> means emphasis
<strong> means stronger emphasis

• <b> and <strong> both make text bold，but <strong> convery a sematicly emphasizing meaning，while <b> only does the job of formatting visually。Of course you’d better to use font-weight and font-style other to make text bold or italic
• <i> and <em> are the same story.

Your order number for future reference is:<strong>6474-82071</strong>.
It took me not one,but<em>three</em>hours to shovel my driveway this weekend.

Only the two methods above can show your intended emphasis.

<cite> is used to contain a citation or a reference to other sources, E.g ：

The novel,<cite>The Scarlet Letter</cite>is set in Puritan Boston and like this book,was written in Salem,Massachusetts.

• <abbr>Indicates an abbreviated form (e.g., WWW, HTTP, URI, Mass., etc.)
• <acronym> Indicates an acronym (e.g., WAC, radar, etc.)
• Assign title properties for <abbr> and <acronym> to tell users the full name
• Although IE only support <acronym>，we cannot abandon the use of abbr and desert the will of web standards. Just mark the term up according to the specifications.

<abbr title="eXtensible HyperText Markup Language">XHTML</abbr>
<acronym title="North Atlantic Treaty Organization">NATO</acronym>

There are also two CSS rules that could be added to an aural style sheet to further reinforce these directives:

abbr{
speak:spell-out;
}
acronym{
speak:normal;
}

The element is designed for demonstrating code examples within XHTML pages.

<code>
#content{
width:80%;
padding:20px;
background:blue;
}

<p>When the script has executed,at the command line you will see the message<samp>script was successful!</samp>.</p>

<p>I'm going to pass the parameter<var>lastUpdated</var>to my main.xsl file.</p>

<p>To quickly change focus to the search input field,Mac users type<kbd>Command+9</kbd>.</p>

<p><a href="#orange">About Orange</a></p>
.......
<h2 id="orange">Orange are tasty</h2>

<p><a href="#orange">About Orange</a></p>
.......
<h2><a id="orange"name="orange">Orange are tasty</a></h2>

<dl>
<dt>CSS</dt>
<dd>A simple mechanism for adding style(e.g.fonts,colors,spacing)to Web documents.</dd>
<dt>XHTML</dt>
<dd>A family of current and future document types and modules that reproduce,subset,and extend HTML,reformulated in XML.</dd>
<dt>XML</dt>
<dd>A simple,very flexible text format derived from SGML.</dd>
</dl>