The Document Object Model
Do you remember the time as well I do, in which it was so utterly difficult to make things looks equally the same in a user agent such as Netscape Navigator as in Microsoft Internet Explorer? The usual strategy was to just optimise a website for one certain web browser. This has eventually, because of their rapidly growing market share, worked out to the advantage of Microsoft. This way all problems seemed te be solved. Yet, it's still annoying to be constantly dependent of one particular browser vendor. This is also what Tim Berners Lee of the World Wide Web Consortium (W3C) must have thought. For that reason the W3C stated a number of recommendations, in which he describes how language, such as (X)HTML and CSS aught to be interpreted by any web browser and how web developers should apply them. Furthermore, the W3C has suggested a model that describes how content on page should be put in so called 'objects' within a logical tree-structure, called the document tree. This model, called the Document Object Model (DOM), enables web browsers to manipulate the presentation of all these objects independently by means of (Java)scripts en styling languages. This collection of recommendations is often referred to as the web standards.
Where as in old times the code of web pages consisted of text mixed with layout information. In modern times, a document that is constructed by the rules of the DOM method, consists of objects, or elements, brought together in a tree structure. This way the content becomes a property of the element, rather than the other way around and thus plays an inferior role towards the structure of the document.
The Document structure
By the rules of the DOM, each document is split up in roughly two parts: 'head' and 'body'. The element head contains information on the content of the document. The element body contains all information intended to be presented to the end user.
The animation below explains the structure of the DOM with an abstract model.
The language that's been used on the internet for the creation of these documents is the well known HTML-format. HTML, which means 'Hypertext Markup Language', was born in the seventies out of the wish to link individual text documents together by assigning the addresses of other documents to certain words. This concept is well known as 'hyperlinking'. Over the years, a number of different versions of the HTML standard have succeeded each other to meet the growing desire for web pages with more advanced scripting possibilities and complex graphical layouts.
xHTML
The HTML version that makes the best out of the Document Object Model is the XHTML family. Elsewhere on this site you may read what requirements an XHTML-document needs to meet and how to structure it.
Other recent articles:
-
Dealing with Labels by Cornelis G. A. Kolbach — February 1, 2009
Read more...As suggested in the article Form Follows Function and Achieving Thereof, every input element on a form should ideally have a label. Labels give more meaning to input elements and makes them accessible. This article dives into dealing with labels and input fields for postal addresses on forms.
-
Form follows function and achieving thereof by Cornelis G. A. Kolbach — February 1, 2009
Read more...Forms can be dreadfully tricky to style and structure properly. Several articles that are out there focus on best practises for building forms using HTML en CSS. This article focusses in a non technical fashion on the use of meaningful nomenclature and how form semantics relate to elements that current markup standards have to offer. It may help you recognise structural patterns and to compose forms properly.
-
Gregorian date input diversity by Cornelis G. A. Kolbach — February 1, 2009
One of the most common interaction patterns one can find on forms is the date input group. They appear in all shapes and sizes in various applications and sign up forms on websites. Certain forms of appearance seem to be more popular in certain geographical areas than other. But other than that it is hard to find any pattern or rationale why one website has chosen for model X while the other has chosen model Y. The suspicion would rise that the date input method is often dictated by the way the backend would 'like' it. This is a situation which neither we, as interaction designers and consultants, nor the end user should settle for.
Read more... -
AJAX and the Old World by Cornelis G. A. Kolbach — November 19, 2006
Most of us know that HTML was designed in such a way that it would enable one to (single) click on certain underlined words in a text, that would link to another page. Initially, these hyperlinks were the only clickable items on web pages. Soon enough, besides using hyperlinks in an inline fashion, they would be grouped on pages so they would form a menu which would help people to navigate between pages that belonged to a certain group of pages. The web site was born.
Today, complex layout methods have made it possible to borrow from interaction patterns of desktop applications, including drop down menu bars, expanding trees and tabs. It's this exact inevitable shift of desktop application design patterns to the page metaphor that has more than often led to confusion amongst both web designers and end users. In this era of AJAX and RIAs, the possibilities for user interface designers have become infinite. Hence the question arises: Have all of these developments actually led to an improved user experience?
Read more...