DeskToppie und Webbie .NET Programmierer

How “semantic web” are you?

Hi guys! Just to refresh my entries about web 2.0 on this intro and then part 2, one of the hype of web 2.0 is semantic web. Now, this semantic is not just talking about the what your page will look, but it’s also what your html (or xhtml) page should be constructed. Meaning that, the source of your web page should be in a context of semantically correct.

Note:

First of all, I’m not a web standards fanatic or advocate! Even though I was once part of the W3C HTML/WG invited participant about 9 years ago.

A very nice example of this is the source of stackoverflow and the most complete sample that I’ve known of, is the website of Tantek Çelik, former Microsoft’s developer of IE 5 for Mac (which is sadly, not further developed).

As we move further and further to XHTML and Semantic Web, the old tags of HTML 3.2 will be considered obsolete or deprecated. W3C itself is moving to more semantically direction.

Web are moving to.. semantic web as semantic in simple linguistic?

Why?

HTML 3.2 and before is:

• A mixes of style and data/content presentation
• Ambiguous tree representation of DOM 1
• Vendor influential (not neutral), for example: APPLET element
• Focusing on quick deployment of looks and layout instantly (remember FONT element?)
• Focusing on “tag”, not element. This is because it’s rooted back to the original hyperlink text created by CERN, the original birthplace of web and HTML and no DOM at that time.

HTML 4.01 is:

• Promoting separation of style and layout (moved into CSS) and content presentation. No FONT element anymore!
• Focusing on HTML element that’s further sync with DOM’s object.
• Less ambiguous and in sync with DOM 2, although some ambiguities are still exist. Samples of ambiguities removed: use DIV instead of LAYER, BLINK is completely removed.
• More neutral and based on very lengthy process of WD-“WD Last Call”-CR-PR-REC that unfortunately can take very long time to wait for finished Recommendation and can be pushed back to WD! Even Microsoft has been struggling with standardization and actively participating since the release of IE 7 Beta (see notes below).
• A natural transition toward stricter DOM and readable and understandable HTML (geared toward browsers for sight impaired/disabilities), even on the source code level, since your HTML can also be read using a combined implementations of WCAI AAA
• This natural transition is bringing more focus on content presentation but still allow STYLEs elements
• Not just have to be understood, the meaning of translated or read HTML has to be meaningful in a sense of semantic linguistic, and therefore semantically correct, not just syntactically valid/correct.

Notes on Microsoft on W3C:

As a result of overwhelming request of IE’s standard conformances, many web developers were leaving IE, even fewer after the release of IE 7. As a matter of fact, IE 8 Beta 2 hasn’t been able to pass ACID2 test.

But Microsoft, especially Microsoft’s employee aren’t just bringing promises. See these promises and “horror” comments of this blog of Chris Wilson, Microsoft IE’s Architect. Also don’t forget to catch up with Chris Wilson’s new blog: cwilso.com.

Curious about latest IE development? Follow IE development on MSDN’s IE Team blog.

XHTML 1.0 is:

• Based on XML 1.0 (now in 5th edition), Namespaces in XML 1.0
• Although a transitional DTD is available, the use of case sensitivity is strongly applied since it’s XML based.
• Can be extended implicitly, although this fact is still debated. But due to the fact of “X” factor in XML is eXtensible, this will welcome new possibilities of applications with other XML related standards at W3C, such as XSL, XSLT, XPath, XForm, XFrame, and others.
• Promoting discipline over readable and transportable web
• Focus on more well formed XML and more correct semantic

Where is the semantic factor, actually?

There are way too many aspects of semantic web and I can’t simply put those all in this small blog entry. But I can give you quick samples.

On the HTML side:

On the HTML table representation:

• Table should be used exclusively for tabular data, not for HTML layout
• Use thead to give table header a real semantic representation of a header of tabular data, and use tbody for data itself.
• Use fixed width to ease layout calculation for browser rendering, but do this in CSS, not in the HTML source! Hint: use “table-layout: fixed”
• If you need footer or last row summary, use tfoot
• You want caption? You can use “caption” and use it directly as a child element of the table

This is the sample of a table:

<table>
<thead>
<tr><td>First name</td><td>Last Name</td><td>City</td></tr>
</thead>
<tbody>
<tr>
<td>Eriawan</td>
<td>Kusumawardhono</td>
<td>Surabaya</td>
</tr>
<tr>
<td>Benyamin</td>
<td>Suaib</td>
<td>Jakarta</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total data:</td>
<td>&nbsp;</td>
<td>2</td>
</tr>
</tfoot>
</table>

With additional formatting, the table will be rendered like this:

If you look closely, the IE I use  is IE 8 Beta 2. See the compatibilty button. :)

These are the complete code of the sample:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Semantic web</title>
    <style type="text/css">
    thead
    {
        background-color: #00f;
        color: #fff;
    }
    </style>
</head>
<body>

<h1>Table sample</h1>
<table border="1" cellspacing="0">
<thead>
<tr><td>First name</td><td>Last Name</td><td>City</td></tr>
</thead>
<tbody>
<tr>
<td>Eriawan</td>
<td>Kusumawardhono</td>
<td>Surabaya</td>
</tr>
<tr>
<td>Benyamin</td>
<td>Suaib</td>
<td>Jakarta</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total data:</td>
<td>&nbsp;</td>
<td>2</td>
</tr>
</tfoot>
</table>

</body>
</html>

Are there any help from tools/utilities?

The sad fact is, not many HTML/XHTML editors are aware about these.

Adobe Dreamweaver CS2 and CS3, for example, have acknowledged most of these and it also validates XHTML 1.0 well, but there’s no support for directly inserting thead and tfoot. Dreamweaver CS2 and CS3 also have supports for suggesting the use of “alt” attributes on “img”. Sweet!

I’d like to test Dreamweaver CS4, but the hardware requirements are quite overkill.

Microsoft Expression Web is more lightweight than Dreamweaver CS3, but unfortunately has many XHTML validation consistencies.

Surprisingly, HTML editor of Microsoft Visual Web Developer (of Visual Studio 2008) has valid validation and has “preview mode” that is closer to the current browser used. And it fully respects W3C XHTML 1.0 DTD, not paying respect to IE’s HTML DTD! Although, the suggestion is somehow less cleaner than in Dreamweaver CS2/CS3. Why?

Because Microsoft acknowledges the fact that IE even IE 8 Beta 2 doesn’t explicitly support XHTML 1.0. Only Opera 9.5 (or above), and Firefox 4.0 (yes, 4.0!) support XHTML.

What to see in the near future? I’ll try to continue this humble mumble of semantic web.

Comments are welcome! :)

Share this post: | | | |