All posts tagged ‘Web Standards’

File Under: CSS, HTML, Web Apps

Zen Coding Auto-Generates HTML from CSS

Writing HTML can be something of a pain. Angle brackets and long tags names mean you’ll spend more time typing awkward code than your average programming task requires.

Good text editors and development environments like BBEdit, Eclipse or Adobe Dreamweaver can help simplify your HTML workload, but what we’ve always longed for is a Markdown-like way to create raw HTML.

Smashing Magazine’s Sergey Chikuyonok recently unveiled a programming tool called Zen Coding that isn’t quite Markdown-level bliss, but it’s pretty close. Chikuyonok created Zen Coding from a very basic idea: what if CSS selectors could not just target HTML tags, but also generate them?

In other words, if you’re using Chikuyonok’s tools, writing CSS like this:


will generate HTML markup like this:

<div id="content">




Veteran coders will likely protest that there are already tools like SparkUp and Haml which do very similar things (though with a slightly different syntax). However, Zen Coding offers some nice plugins for popular text editors that SparkUp lacks, and Zen Coding isn’t language-specific like Haml (which is primarily of use to Ruby on Rails developers).

Under the hood, Zen Coding accomplishes two things. First, it expands abbreviations written the form of CSS selectors, and second, it’s able to match tag pairs so it correctly closes your tags.

Consider this somewhat more sophisticated bit of code:


A mere single line of code. When run through Zen Coding’s expander and tag matching tools, it becomes a basic HTML page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"


<html xmlns="" xml:lang="en">



   <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />



   <div id="header">

       <h1 id="logo"></h1>

       <ul id="nav">

           <li class="item-1"><a href=""></a></li>

           <li class="item-2"><a href=""></a></li>

           <li class="item-3"><a href=""></a></li>

           <li class="item-4"><a href=""></a></li>

           <li class="item-5"><a href=""></a></li>





The syntax is a little more complex than simple CSS selectors. For instance, the item-$*5 bit in the example above is used to generate five <li> tags, but it won’t take long to commit the few quirks to memory.

The easiest way to wrap your head around the power of Zen Coding is to watch the demo movie that Chikuyonok put together.

A new way of writing HTML code using CSS-like selector syntax

Our only real gripes with Zen Coding are that it lacks HTML5 support and insists on XHTML syntax. However, since HTML5 isn’t a standard recommendation and there are only a handful of tags where the difference between XHTML and HTML is important, we’re willing to overlook those deficiencies.

If you’d like to give Zen coding a try, there’s a sample online editor available, just use ctrl+, to expand your selectors. If you like Zen Coding’s approach, there are a few plugins available for text editors. Head over to Smashing Magazine and grab a plugin for Aptana (cross-platform), Coda (Mac), Espresso (Mac) or Emacs (cross-platform). The abbreviation expanding tools also work in plugins for TextMate, TopStyle, Sublime, GEdit and the editArea online editor.

See Also:

File Under: Web Basics

Opera Releases Online Web Development Course

Opera, the company behind the browser of the same name, is trying out a new way to help drive web standards: teaching.

The browser is known for rendering web pages under strict adherence to established web standards. Now the company is releasing an online course, or Opera Web Standards Curriculum, to help teach budding website developers those standards right from the start.

The site and curriculum, released in association with the Yahoo! Developer Network, covers basic subjects such as HTML, CSS and design theory. The course authors are all established web developing professionals within industry, and their course material helps guide students on programming websites using the latest approved web standards. Opera’s hope is to teach good web development practices to the next generation of web developers.

The tutorials are all released under the Creative Commons license, meaning you can share the work all you want for non-commercial purposes as long as you use attribution.

Using web standards is a good thing. Typically web developers have to modify code to ensure the web page appears correctly on the most popular browsers, such as Internet Explorer and Firefox. The more developers adhere to web standards, the more likely browsers will too — and vice versa.

If web standards are adopted by all browsers and developers, it will make everyone’s job easier. These days, most web programs need to detect browser types and work around browser incompatibilities to ensure the page displays correctly.

Opera is headed in a good direction by teaching people to code correctly from the start, hopefully reducing the probability of poor site code in the future.