Careful Web

So many people talk about semantic web, valid code and other related stuff. I can’t imagine how I can write more than the usual 5 cents.

But I am trying.

Every professional web developer knows about such topics, but sometimes something stops him from following semantic rules or valid markup. What? His name is Mr. Style. Yes, every HTML coder knows about missing additional div elements to wrap some blocks for fancy shadowing or other eye-candy features.

It’s a long story, that begins in HTML‘s roots. SGML — is a general markup standard, HTML is based on it. HTML was created as both a content and style markup language at the same time. For example, HTML tags like font, i, b is purely style-related. The main task of HTML was not content meaning (semantics), but more styling and representation (rendering).

Opposite to HTML, XML was invented as a pure semantic standard. The main usage for XML is hierarchical data storage and retrival. It has fully flexible generalized element naming, that allows one to create new markup languages on top of XML.

After some time the next standard was invented — CSS, which brings new possibilities for styling both HTML and XML marked-up documents. With CSS each tag/element can be styled in any manner. For example, usual paragraph HTML tags p can be styled as lists with few lines of CSS code. The representation meaning of HTML becomes less important with CSS features.

The next level of document markup was reached with XHTML. Yes, it seems like a natural evolution of HTML, with focus on strong semantic markup as XML. This one brings new possibilities to machine processing for data retrieval, but keeps backward compatibility with older browsers and other HTML processors.

Well, why can’t we use pure XML formats for semantic data exchange in Web? RSS/Atom is the first widely used format in Web that comes to my mind. OK, here are some points:

1. Semantic (x)HTML can be interpreted by web browsers (with or without corresponding styles the user can see rendered content).
2. Semantic (x)HTML can be interpreted by machines for data retrieval.
3. Semantic (x)HTML can be interpreted by special screen readers and other devices dedicated to disabled people.
4. Semantic (x)HTML can mix different types of information such as news feed, contact cards, calendars, etc. in a single document.

I want to write a little more about the last point. Microformats — is one of the most famous and usable representations of semantic HTML. It’s a very useful thing, because lots of robots/tools can retrieve information (hatom, hcard, hcalendar) from web site pages. Lots of the well-known big players of the Internet community already integrated this standard for their document mark-up (Google, Yahoo, etc). It’s still not Internet-wide, but already shows more and more cases with new possibilities.

With CSS evolution, the Web will go closer and closer to the semantic meaning of web page contents. I recommend that modern web developers always be on the cutting edge of markup technologies. You can easily start with Microformats as a rich example of semantic markup. You can dive into CSS3 techniques and features to be ready to implement it in some of your next projects (and write fewer divs). The markup will shine for those who reach this formatting Zen and for a few robots too! :-)

1. Provide alternative text in images with the alt attribute of the img tag.

2. Create corresponding label elements for each form input field, or add the title attribute if you can’t provide a label.

   Example #1: <p><label for="first_name">First name</label><input id="first_name" name="firstname" type="text"></p>

   Example #2: <input type="password" name="passwd" title="Enter your password">

3. CAPTCHAs must have an audio version. Like reCAPTCHA, for example.

4. Write links carefully. Be informative when you point a user by using relevant link text. Avoid javascript: or other placeholders for the href attribute when you are using JavaScript action on link elements. Links must always point to the content they are referring to.

5. Avoid elements without content. For example, spacer images or table-based layouts. All uninformative pictures must be used as backgrounds (with CSS).

6. Otherwise don’t include content images as backgrounds. Use img as specified in #1.

7. Use text and media alternatives for object embedding elements. You can include as many alternatives as you like, encapsulating them within each other. Here is an example of including a Quicktime movie:

   <object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="320" height="256" data="http://movies.apple.com/movies/independent/blessedisthematch/blessedisthematch_480p.mov">
   <param name="src" value="http://movies.apple.com/movies/independent/blessedisthematch/blessedisthematch_480p.mov">
   <img src="http://images.apple.com/moviesxml/s/independent/posters/blessedisthematch_l200812221525.jpg" alt="Blessed Is the Match movie">
   </object>

Three CSS3 features which works right in all major browsers (Mozilla, Safari and Opera). Yes, IE plays outside with finalizing of CSS2 support.

CSS3 Opacity

Opacity effect is very widely used in graphics and of course in web-design too. Today we can use it not only inside our graphic editor, but with plain CSS feature { opacity: 0.5 }. IE users can be supported with { filter: alpha(opacity=50) } property. You can see lots of demo examples here:

• Opacity for image example;
• Opacity and RGBA quick overview;
• Lots of examples on Mandarin Design page: Opacity and transparency.

Box-sizing

This feature really matters for fast coding of block design. It really simple to use: just specify float, width in percent and box-sizing property. Like this (Mozilla, Opera and Safari uses different declaration):

div.span { width: 50%; float: left; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

Also see live example at CSS3.info box-sizing page.

Overflow-x & overflow-y

Overflow property is improved in CSS3 specification. It allows to specify X and Y axis overflow independently with visible, hidden, auto and scroll options. See examples and tests here.

Text-shadow (bonus)

This one is really fancy and well-know effect. Firefox supporting it only in upcoming 3.1 release. But Opera and Safari already taking care on it. See demo page with reference image on CSS3.info: text-shadow.

A quick thought about upcoming HTML5 standard.

The main advantage of HTML5 is lots of modern web features like:

• embedding multimedia content;
• 2D drawing with canvas;
• new DOM methods;
• Web Forms.

But with XHTML we still have XML comparability, that brings lots of libs and apps which can work with well formed XML/XHTML (aka parsers). So HTML5 is missing that.

HTML5 parsing will come soon after specification release, so we can start to use it believing in future.