Separating Style from Structure from Semantics
For a long time, Web designers have been asked to separate the style of their documents from the structure. This means moving to CSS and using tags that are more structured than style oriented. For example, using a <strong> tag rather than a <b> tag and using external CSS to display how the document looks rather than using tables or other HTML markup.
But now we're supposed to look even deeper. Instead of looking just at the structure, the Semantic Web is an attempt to look at the meaning of the data that is provided in the Web pages. Eventually, your computer will know that this document you're reading is an "article", it's author is "Jennifer Kyrnin", it's publisher is "About", and it's topic is "Semantic Web". (Note: chances are the decisions of what meta data will be captured will be different from what I just described, but you get the idea.)
This information is the semantics of the page. It is the information about the data that allows computers to access and use the data rather than simply display it for a human to read.
What is Web Document Structure
A Web page's document structure is the backbone of the page. It is how it is put together. To have a well structured page you must:
- Use a DOCTYPE to define your document
- Include a root element (usually <html>)
- Include <head> and <title> elements
- Include a <body> or <frameset> element
Once you have a document that is well structured, it will display in a tree format with all elements branching off of the element above it in the hierarchy. This makes it very easy to design CSS style sheets that impact exactly the nodes or elements that you want in your document. It also allows you to interact with even very specific nodes through JavaScript. Finally, well-structured documents tend to be streamlined, clean and easy to maintain.
How to Write a Web Page Semantically
At this stage in the game, we don't have vocabularies defined for all the various types of data that can be found on the Web, but it is still possible to write a Web document that is written semantically.
Use HTML elements to describe what the content is:
- Headers should define headers, and be listed in hierarchical order.
<h1> is the most important headline on the page and <h6> is the least important headline. - Paragraph tags <p> should be used to denote paragraphs.
They should not be used to get extra space between elements. - Lists should be used for all list-based structures, including navigation.
This means that whenever you have a list of items, it should be in one of the three list forms <ul>, <ol>, or <dl> - Tags that are primarily style-based should be avoided.
These are the tags that have only one function, to display how the contents should look. Examples are <b>, <i>, and <font>.
Once you have a document that is marked up structurally and semantically, you'll be able to affect how it looks easily with CSS and JavaScript.
Taking the Semantic Web Further
There are several XML specifications for the Semantic Web already in development. The most developed are RDF, FOAF (a derivative of RDF), and OWL. These specifications strive to turn data into computer-readable formats.
