Information Design and Advanced XHTML

Semantic Methods - Some Comparisons

At SXSW 2005 Tantek Çelik ">presented The Elements of Meaningful XHTML. The following examples come from or are inspired by the examples Tantek used in this presentation.

XHTML Elements: simple contact info <address> element

Web page footers often contain simple information about the site or auther. For instance,:

		<p>
		   This WP Theme is CC By-NC. Contact jared at 5tein dot com for terms of 
		use.
		</p>
	

But use of P is probably inappropriate. Instead, try this:

		<div>
		   This WP Theme is CC By-NC. Contact <address>jared at 5tein dot 
		   com</address> for terms of use.
		</div>
	

Reasoning: this excerpt may not qualify as a paragraph, but it does require it's own separation from the rest of the document content, thus the DIV. ADRESS is appropriate for indicating any sort of address.

And of course we would want to hyperlink out to the Creative Commons license:

		<div>
		   This WP Theme is <a href="http://creativecommons.org/licenses/by-nc/3.0/" 
		   title="CC By-NC license details">CC By-NC</a>. Contact 
		   <address>jared at 5tein dot com</address> for terms of use.
		</div>
	

XHTML Elements: Blog quote<cite> & <blockquote> elements

Rather than this:

		<p>Thompson's Reeder Grant replied swiftly and courteously:</p>

		<p>
		   If you are not receiving, or you do not anticipate receiving more than $100,000
		   annually from mp3 distribution activities, you do not need a license. From your
		   described use below (distribution of non-profit educational MP3s), it would seem
		   that you would fall into this latter category of not needing the license. 
		</p>

		<p>Good news, right?</p>
	

... you should use this:

		<p>Thompson's <cite>Reeder Grant<cite> replied swiftly and
		courteously:</p>

		<blockquote cite="personal correspondance">
		   <p>
			  If you are not receiving, or you do not anticipate receiving more than $100,000
			  annually from mp3 distribution activities, you do not need a license. From your
			  described use below (distribution of non-profit educational MP3s), it would seem
			  that you would fall into this latter category of not needing the license. 
		   </p>
		</blockquote>

		<p>Good news, right?</p>
	

Reasoning: the quote is long, so it deserves BLOCKQUOTE rather than just Q. It is also a full paragraph, so it earns a P. The cite attribue on the BLOCKQUOTE allows us to use CDATA to refer to the original source, and use of the CITE element is the right way to refer to the originator.

This example is from a blog post, and it's therefore a good idea to always hyperlink to the author's information page, the content origination page, and anything else that the reader may find useful:

		<p><a href="http://mp3licensing.com/">Thompson</a>'s
		<cite>Reeder Grant<cite> replied swiftly and courteously:</p>

		<blockquote cite="personal correspondance">
		   <p>
			  If you are not receiving, or you do not anticipate receiving more than $100,000
			  annually from mp3 distribution activities, you do not need a license. From your
			  described use below (distribution of non-profit educational MP3s), it would seem
			  that you would fall into this latter category of not needing the license. 
		   </p>
		</blockquote>

		<p>Good news, right?</p>
	

XHTML Compound: Block of code <pre> and <code> combined

When marking up code examples, rather than this:

		<p>
		Style the address tag to be inline and normal:
		</p>

		<p>
		table { 
		   border-collapse: collapse;
		}
		table td, table th { 
		   border: 1px solid gray;
		   padding: .25em .5em;
		}
		</p>
	

...use this:

		<p>Style the TABLE to collapse borders, and apply borders to TDs and THs:</p>

		<pre>
		   <code>
		table { 
		   border-collapse: collapse;
		}
		table td, table th { 
		   border: 1px solid gray;
		   padding: .25em .5em;
		}
		   </code>
		</pre>
	

Reasoning: The PRE element marks the element as containing essential whitespace. The CODE element marks the PCDATA as code information.

XHTML Compound: Conversation

Tantek provides one challenging example from a screenplay or transcription. How should we markup the following?

		  Costello
			   Well then who's on first?
		  Abbott
			   Yes.
		  Costello
			   I mean the fellow's name.
		  Abbott
			   Who.
		  Costello
			   The guy on first.
		  Abbott
			   Who.
	

To achieve the presentation we desire we might try to stick this into a definition list:

		<dl>
			  <dt>Costello</dt>
				   <dd>Well then who's on first?</dd>
			  <dt>Abbott</dt>
				   <dd>Yes.</dd>
			  <dt>Costello</dt>
				   <dd>I mean the fellow's name.</dd>
			  <dt>Abbott</dt>
				   <dd>Who.</dd>
			  <dt>Costello</dt>
				   <dd>The guy on first.</dd>
			  <dt>Abbott</dt>
				   <dd>Who.</dd>
		</dl>
	

But this is non-semantic. Even though there is a paired relationship between speaker and quotes, these are not defintitions, therefore this is abuse of DL/DT/DD. DLs are terms & descriptions. Try this instead:

		<cite>Costello</cite>
				   <q>Well then who's on first?</q>
		<cite>Abbott</cite>
				   <q>Yes.</q>
		<cite>Costello</cite>
				   <q>I mean the fellow's name.</q>
		<cite>Abbott</cite>
				   <q>Who.</q>
		<cite>Costello</cite>
				  <q>The guy on first.</q>
		<cite>Abbott</cite>
				   <q>Who.</q>
	

Nice and simple, but we can be even more explicit and precise if we like, and provide for longer excerpts of text:

			<cite>Costello</cite>
		<blockquote><p>Well then who's on first?</p></blockquote>
			<cite>Abbott</cite>
		<blockquote><p>Yes.</p></blockquote>
			<cite>Costello</cite>
		<blockquote><p>I mean the fellow's name.</p></blockquote>
			<cite>Abbott</cite>
		<blockquote><p>Who.</p></blockquote>
			<cite>Costello</cite>
		<blockquote><p>The guy on first.</p></blockquote>
			<cite>Abbott</cite>
		<blockquote><p>Who.</p></blockquote>
	

And since order is important, we can take this a step further:

		<ol>
			<li><cite>Costello</cite>
			<blockquote><p>Well then who's on first?</p></blockquote></li>
			<li><cite>Abbott</cite>
			<blockquote><p>Yes.</p></blockquote></li>
			<li><cite>Costello</cite>
			<blockquote><p>I mean the fellow's name.</p></blockquote></li>
			<li><cite>Abbott</cite>
			<blockquote><p>Who.</p></blockquote></li>
			<li><cite>Costello</cite>
			<blockquote><p>The guy on first.</p></blockquote></li>
			<li><cite>Abbott</cite>
			<blockquote><p>Who.</p></blockquote></li>
		</ol>
	

Are we getting carried away with this last example? Quite possibly! It's easy to learn the semantic meanings of XHTML elements, but in order to learn how to stop applying XHTML we must weigh elegance against explicitness.