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:

Element Semantic HTML Why
<b> <strong> More emphasized and clearer definition. It’s also stated in HTML 4.0, this will be rendered as bold face.
<i> <em> More emphasized and cleaner definition. It’s also stated in HTML 4.0, this will be rendered in italic face.
<font> no longer used Use CSS to specify type faces and sizes. Also promote more separation.
<blockquote> for quotation <q> for quotation Cleaner definition over quote of “q”. There have been numerous disagreements on blockquote on many forums of W3C, since blockquote is not clear and ambiguous.

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:

formatted_html_table

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! :)

kick it on DotNetKicks.com

Share this post: | | | |

Comments

# How

Friday, January 23, 2009 4:51 PM by DotNetKicks.com

You've been kicked (a good thing) - Trackback from DotNetKicks.com

# re: How “semantic web” are you?

Friday, January 23, 2009 7:34 PM by reyza

benar bos, kalau disuruh bikin xhtml dulu biasanya pakai dreamweaver...tp sekarang lebih asik pakai visual studio, nyaman dan lumayan valid.

# re: How “semantic web” are you?

Friday, January 23, 2009 10:02 PM by eriawan

yup, aku juga lebih suka pake vs 2008, hehehe... tapi untuk CSS editing, aku lebih suka pake Dreamweaver CS2/CS3.

soalnya CSS editor di VS 2008 masih belom bisa mengakomodasi CSS 2 sepenuhnya. :)

# re: How “semantic web” are you?

Saturday, January 24, 2009 3:41 AM by Sagi Arsyad

maaf bukan maksud nge-flame,

tapi nampaknya yang dibahas artikel ini bukan semantic web, melainkan standarisasi web/html

artikel singkat semantik web :

en.wikipedia.org/.../Semantic_Web

kebetulan semester kemarin saya ambil 2 kuliah yang sedikit membahas tentang semantic web,

dari yang saya pelajari, Semantic web adalah bagaimana sebuah web page memiliki properties yang bisa dibaca oleh mesin (crawler).

berbeda dengan web page, bentuk data semantic web bukanlah html, melainkan RDF

CMIIW

thanks

Sagi Arsyad

# re: How “semantic web” are you?

Saturday, January 24, 2009 4:20 AM by eriawan

Thanks tanggapannya, mas Sagi.

Coba lihat paragraf saya yang mengatakan:

"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."

Dan memang benar secara umum yang dikenal ya OWL, RDF, SPARQLE, tetapi basic idea-nya adalah representasi content/data yang nantinya bisa diolah untuk mesin parsing secara semantic linguistic, bukan search engine biasa. Kalo saya bahas ini juga, gak cukup blog entry saya dan malah jadi buku, hehe...

Kalo hanya bisa dicrawling dengan search engine, jadinya hanya SEO, bukan semantic web.

Silakan baca pula blognya Tantek tentang hal ini. Tantek juga termasuk salah satu penggagas Semantic Web di W3C, dan dia yang juga memberikan contoh seperti blog saya di atas.

Silakan lihat ini:

tantek.com/.../semantic-xhtml.html

tantek.com/.../elementsofxhtml

Karena XHTML juga seharusnya bisa diextend. :)

Saya ada banyaak sekali literatur tentang ini dan kebetulan pernah presentasi juga. Mau tukar resource, mas? :)

# Posts about Web Standards as of January 23, 2009 | XHTML and CSS

Pingback from  Posts about Web Standards as of January 23, 2009 | XHTML and CSS

# re: How “semantic web” are you?

Friday, January 30, 2009 6:11 PM by madipta

hmm interesting article

apa betul web 2.0 itu harus semantic web?

punya contoh konkrit web 2.0 yang semantic?

# re: How “semantic web” are you?

Friday, February 6, 2009 2:40 PM by eriawan

Terima kasi atas komentarnya, madipta! :)

Contoh yang bagus ada di penjelasannya Tantek, silakan liat komentar saya di atas.

http://tantek.com/presentations/20040928sdforumws/semantic-xhtml.html">tantek.com/.../semantic-xhtml.html

http://tantek.com/presentations/2005/03/elementsofxhtml/">tantek.com/.../elementsofxhtml

Bisa juga melihat source code dari homepagenya Tantek:

http://tantek.com

Eriawan

# re: How “semantic web” are you?

Wednesday, April 22, 2009 12:51 AM by dani

om Tantek, Mark Norman Francis, Joe Dolson, Tommy Olsson, they are semantics web/x-html evangelists..

and now W3C has a Semantic Data Extractor Tool, at least to cure div-itis and span-itis.. :)