Markup layer

Front-end stack

SEO. Accessibility. Semantics. The markup layer is where your carefully worded prose is enhanced with tips for computer-to-computer communication.

As you write your web pages, you naturally develop a rhythm to your sentences and paragraphs. Working with the punctuation essentials of the English language—commas, semicolons, colons, periods, parentheses, and dashes—you develop that rhythm.

To go beyond that rhythm, publishers have developed typographic conventions that impart additional meaning to readers: section headings, tables, pull quotes, and typeface variants for word emphasis.

Web pages have taken these centuries-old traditions and added the layout conventions developed during the 20th century by magazine publishers: sidebars, photographs, and wrapping layouts. But web pages are not simply articles or chapters, and web sites are not simply magazines or books.

The extra challenge of the markup layer is to serve the needs for search engine optimization, web accessibility, and meta-semantics.

HTML: Hypertext Markup Language

At its most basic level this "language" is really no more than a small collection of tags that provide instructions to the browser about how to distinguish one group of words or paragraphs from another. The everyday tags come in two types: inline tags that are used to mark-up words and phrases, and block-level tags that are used to mark-up paragraphs, tables, lists, and headings.

• Inline: a, i, b, img, br, pre, span
• Block: p, table, th, col, tr, td, ul, ol, li, h1, h2, h3, h4, h5, h6, div

SEO

The basic goal of Search Engine Optimization is to make sure your web page can be found by the audience that you're trying to reach. And the basic rule for findability is easy: write something relevant and "mark it up" (apply HTML tags) with the correct semantics:

Beyond this, all that's needed is a good title and a good description meta tag. Finally, don't waste time over doing it with the keywords meta tag—search engines just can't be goosed with keywords anymore.

All the effort expended on link-exchange programs and other techniques to boost page rank are wasted if you haven't got your markup done properly.

Web accessibility

Let's face it, none of us are like the Six Million Dollar Man with bionic eyes. The number of people with some type of color-blindness is about one in twenty, and the number of tech-savvy "baby boomers" who now need to wear bifocals is in the millions. But web accessibility encompasses much more than just visual acuity, your next web-site may also need to be designed for these needs:

• Low vision: People with macular degeneration, glaucoma, diabetic retinopathy, or cataracts have difficulty reading web pages with low contrast ratios. Does your web site use text and background colors with high contrast ratios to accommodate people with low vision?
• Color blindness: People with protanopia and deuteranopia see a limited set of colors and are unable to distinguish shades of green or shades of red. Does your website rely on color only to convey important information?
• Memory impairments: People with short-term memory impairments need a consistent navigational structure in order to effectively use a website. (A consistent page layout is a design imperative for many other reasons as well.) Does your website adhere to this cardinal rule?
• Dexterity : Some folks find it much easier to repeatedly use the TAB key instead of the mouse. Does you website make this intuitive and convenient?
• Aging: Mature adults face a gradual diminution of vision. Does your website gracefully scale up when they use their browser's zoom feature?
• Assistive technology: Many people with disabilities turn to assistive technologies to help them effectively use computers. Does your website work with screen magnifiers and text-to-speech synthesizers? Does your website provide all the same functionality with CSS style sheets turned off?

If your web site isn't designed for people with disabilities, you'll soon discover that your visitors are simply going someplace else.

Meta-semantics

A collaborative effort, loosely emerging around the buzzword "the semantic web" has begun to evolve the purely syntactic markup capabilities of HTML into new descriptive markup capabilities. Some of this uses the concept of microformats, an HTML extension set that allows document elements to be declared as objects with globally agreed upon meanings (address book entries, groups of people, equipment parts lists, etc).

But for this new type of markup to work on more than just toy problems, industry groups will need to agree on standards that are meaningful and productive towards meeting their own business needs. When that happens, they will likely leverage other technologies such as Resource Description Framework (RDF), Web Ontology Language (OWL), or Extensible Markup Language (XML).

The semantic web will be built by progressive business, non-profit, and government organizations working on one definition at a time. Ready to get started?