Do you consider yourself to be a software craftsman? Do you find yourself frequently writing html? Would you feel comfortable giving a talk on Expressive html?

What is HTML?

Hyper Text Markup Language is, for all intents and purposes, the common language of the web. The elements described by html are the fundamental building blocks of web pages and applications.

Web browsers (those pieces of software to which I owe my livelihood) exist to interpret html documents and translate them into visible/audible experiences that breathe life into our increasingly digitized society.

One of the reasons html is important is that it:

Provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, articles, lists, links, quotes and other items. —Wikiepedia entry on html

What is Expressive HTML?

Expressive html isn’t fundamentally different from “regular” html. It’s not an abstraction. It’s not a new tool. It doesn’t seek to alter the basic vocabulary of the web’s common language.

In fact, even if you aren’t familiar with the term “Expressive html,” I can guarantee you already know how to make use of it.

Rather, Expressive html is simply a different way of seeing, interpreting and authoring markup. It is:

• A mindset.
• An approach.
• A departure.
• A mantra.

Before css was mature web designers/developers were forced to rely on the structural properties of elements like <table> and <br> to form the foundations of their visual designs.

In the darker days before browsers’ implementations of css became reliable enough to use as a means of visually structuring and styling web pages, even the most conscientious of web designers and developers were forced to abuse mark-up to satisfy the needs of the visual layout. —Andy Clarke

The unfortunate phenomenon Andy Clarke is referring to here is what was (and still is, sadly) known as “presentational” markup.

This, of course, was an abuse of the original intent of the specification for these elements, but hacks are hacks and bygones are bygones.

Still, the bad habits formed by these techniques remain. Expressive html seeks a new way forward: the wholesale abandonment of the “presentational” approach to authorship in favor of a technique that focuses on the inherent meaning of the content being conveyed.

Again, Andy Clarke from Transcending CSS: The Fine Art of Web Design:

Writing meaningful markup can be simple when you approach it from the content, not the presentation. Rather than starting by asking “What html elements do I need to accomplish this design?” ask yourself “What is this?“ and “What does this mean?” —Andy Clarke

That is, be articulate. Use your words. Before you think about how you would piece together your web page or application with html, think about how you might explain your content to a non-technical friend or spouse, grandma or grandpa, using the vernacular of your native tongue.

Then simply translate this into markup. Good markup authors are good translators. Bi-lingual, as they are, in the language of the world and the language of the web.

Why is Expressive HTML important?

This is a multifaceted question with numerous and varied answers which range from the technical, to the professional, to the ethical, to the humane.

In light of this, I’ll focus on a few of those answers that are important to me.

1. We have a responsibility to our users.

   Say what you mean and mean what you say. Don’t let the browser babble. There are a host of handicapped users out there that surf the web by relying assistive devices to literally read the contents of your website aloud.

   We (and I mean you) owe it to them to speak clearly and concisely. You can help these individuals save time and avoid confusion by writing meaningful markup.

2. We have a responsibility to our clients.

   I’ll be honest. I’m not a fan of the term seo. I often hear it spoken about circuitously in marketing circles: “We are seo experts, blah, blah, blah.”

   • Voodoo.
   • Smoke and mirrors.
   • Gaming the system?

   Okay, maybe not all seo experts are evil. But, do you know what the most effective strategy for managing seo is? Expressive html.

   Google publishes a list of recommendations that surround the topic of seo called “Design Content Guidelines.” Here are just two of the top list items:

   Make a site with a clear hierarchy and text links.

   Create a useful, information-rich site, and write pages that clearly and accurately describe your content.

3. We call ourselves Craftsmen.

   A few months ago, Ryan Singer (ui Designer at 37 Signals) published a diagram visualizing a product’s ui and code layers that I feel pretty truthfully illustrates the relationship between ui and code.

   What I took away from these diagrams (and what I’ve always intuitively felt as a designer/front-end developer) is the notion that your application is your interface.

   As a developer, html is not beneath you, it’s above you.

   For example, my wife (lovely as she is) doesn’t care about your code. She judges the quality/integrity of your application based solely on what it looks and feels like.

   Moreover, anyone with a browser can see your markup. Can we call ourselves craftsmen if we possess the ability to write beautiful, well-architected back-end code, but allow our front-end markup to degrade into a state of neglect?

   What good is a cabinetmaker who builds a table, only to leave it un-sanded, un-varnished or un-glued?

   The ui is not a second class citizen. Don’t be lazy.

So, how do we do it?

My wife has this habit of using the word “thing” when assigning me tasks. It’s okay, I understand why she does it. We are often on the same wave-length. Still, try as I might, I don’t have telepathic powers.

So when she tells me to: “Put the thing in thing, you know with the other thingies in it,” my response is generally, quite unsurprisingly, “Huh? I don’t know what you mean!”

In my mind, poorly written html presents users, screen readers, web crawlers and enterprising developers (who might be peeking at your code to figure out how you’ve accomplished something) with a similar problem.

Here, we are presented with some extremely vague html:

<div id="wrapper">
		<div class="container">
				<div class="inner-container">
						Socks and Shirts
				</div>
		</div>http://localhost:8000/entries?entry_id=71
		<div class="container">
				<div class="inner-container">
						Pants and Underwear
				</div>
		</div>
		<div class="container">
				<div class="inner-container">
						Belts and Accessories
				</div>
		</div>
</div>

Keeping in mind that a <div>—the most generic block level element—is used mainly to “group related content,” what we have here is a piece of code that describes its content in the broadest terms possible. It doesn’t leave us with very many clues—simply put, it’s not expressive html. Can you visualize the thing this code is describing?

We can write better, more expressive html using less markup and fewer, more descriptive class names:

<ul id="chest">
				<li class="drawer">Socks and Shirts</li>
				<li class="drawer">Pants and Underwear</li>
				<li class="drawer">Belts and Accessories</li>
</ul>

In this example, we’ve considerably reduced the amount of markup. We’ve also removed some extraneous <div> elements and have replaced them with a single unordered list that aligns more conceptually with the object we’re trying to portray, in this case a chest of drawers:

Now, this is a rather simple example so the question remains: how do we write expressive html? Here are a few platitudes to help you with your approach:

• Variety is the spice of life.
• There is more than one way to skin a cat.
• It depends.

As you may or may not know, translation is an art. Say you are really interested in a medieval epic poem like Beowulf. Chances are, you aren’t going to try and tackle the original, written, as it was, in Old English.

Instead, you are likely going to read a translation. And, my friends, not all translations are created equal. Some are good, some are bad. Some are artful and some are bland.

So it is with html. It can be artful. It can be basic. It can be verbose. Ultimately, it’s up to you, the author.

Above all, it should always be considered. This consideration is what makes it expressive.

Here are a few tips to help you sort things out:

1. Start with Plain Old Semantic HTML

   There are a few rules:

   • The first rule of p.o.s.h. is that you must validate your p.o.s.h..
   • Second, drop the use of <table> for purely presentational purposes.
   • Next, fix your <b>ed and <br>eakfast markup.
   • Eliminate Anorexic Anchors.
   • Re-use pre-existing posh-patterns.
   • Use good, semantic-class-names.

2. Get Naked

   By turning off the css on your website, you’ll be better equipped to focus on the “naked” structure of your website or web application.

   What’s more, you will be able to tell how the browser interprets your markup by default, which should give you a really good idea of whether or not you’ve structured your site intelligently.

   Consider the difference between the way the browser renders these two snippets of code:

   
   <div id="model-div">
   		<div class="header">
   				<a href="#">Physician Info</a>
   		</div>
   		<div class="name">John Smith</div>
   		<div class="address">
   				441 Langston Way<br/>
   				Suite 201<br/>
   				Davis, Alabama 06143
   		</div>
   		<div class="phone">610-456-7890</div>
   </div>
   
   

   The markup above renders in the browser like so:

   

   In contrast, well structured html…

   
   <h3><a href="#">Physician Info</a></h3>
   <ul>
   		<li class="full-name">John Smith</li>
   		<li class="address-1">441 Langston Way</li>
   		<li class="address-2">Suite 201</li>
   		<li class="city-state-zip">Davis, Alabama 06143</li>
   		<li class="phone">610-456-7890</li>
   </ul>
   
   

   … is rendered with an intrinsic hierarchy:

   

   The browser interprets our semantic html and by default grants our content a logical structure (without the need for any additional css) that presents our content more expressively.

3. Add Semantic Richness with Microdata, Microformats, or RDFa

   With the addition of many new elements, html5 is a major step forward for the semantic web. Still, the vocabulary offered by html leaves much to be desired.

   For instance, a browser can differentiate between the content contained inside a <p> and, say, a <ul>. But unfortunately, it has no way to differentiate between a person, place or thing.

   This has implications for the way our search engines index and retrieve data. Well-structured html certainly helps web crawlers make some sense out of our content, but it cannot, in its native form, alert such crawlers that this code describes a person.

   Luckily, Microdata, Microformats, and RDFa are paving the way forward to a richer, more semantic web.

   As the homepage of Schema.org points out:

   Many applications, especially search engines, can benefit greatly from direct access to this structured data. On-page markup enables search engines to understand the information on web pages and provide richer search results in order to make it easier for users to find relevant information on the web.

   Essentially, Microdata is a library that provides an extended set of html attributes that allow web authors to write meaningful markup with a much greater level of expressiveness and detail. What’s more, search engines like Google, Yahoo, and Bing! are able to recognize and interpret these attributes and return content accordingly.

   For example, let’s revisit our earlier markup and write it in a way that might allow Google to recognize that we are describing a person:

   
   <h3><a href="#">Physician Info</a></h3>
   <ul itemscope itemtype="http://schema.org/Person">
   		<li itemprop="name" class="full-name">John Smith</li>
   		<li itemprop="address">
   				<ul itemscope itemtype="http://schema.org/PostalAddress">
   						<li itemprop="streetAddress" class="address-1">441 Langston Way</li>
   						<li itemprop="streetAddress" class="address-2">Suite 201</li>
   						<li class="city-state-zip">
   								<span itemprop="addressLocality">Davis</span>,
   								<span itemprop="addressRegion">Alabama</span>
   								<span itemprop="postalCode">06143</span>
   						</li>
   				</ul>
   		</li>
   		<li itemprop="telephone" class="phone">610-456-7890</li>
   </ul>
   
   

   Although Microdata requires extra markup, it more than makes up for this fact with the amount of semantic richness it provides. With a handful of additional attributes we are able to leverage the power of search engines in a whole new way!

   What’s more, Google’s Rich Snippets Testing Tool provides a way to check your Microdata implementation and can even show you a nifty preview of how your your content might appear in a search result (Google makes no guarantees about how it will actually display your information).