Html Designer

HTML 2.0

Logical Tags
Tim Berners-Lee is a genius but it’s pretty clear that the right-side of his brain dominates his left. Back in 1991 when he devised HTML as a vehicle for sharing scientific information he concentrated almost exclusively on the delivery of content rather than of presentation. The fundamental and ubiquitous unit in HTML is therefore the logical tag. Open any Web page in a text editor and you’ll see these tags marked off within angled brackets before and after the element being described. Each body paragraph, for example, is marked with <P> at its beginning and </P> at its end. Other fundamental tags include the six levels of hierarchical heading from <H1> through to <H6>, ordered lists <OL> and unordered lists <UL>.

The crucial point about each of these tags is that they are logical and content-based rather than design-based. Of course for the end user to be able to distinguish one tag from another they still have to be differentiated visually, but this design function is handed over entirely to the browser software. In other words the first HTML 2.0 standard offers no absolute typographic control at all. With a bulleted <UL> unordered list, for example, you not only have no control over the precise bullet character used but no control over the paragraph’s point size or even typeface. Using the <B> tag you can mark off text to be shown in bold but even this is frowned upon in favour of the more logical <EM> and <STRONG> tags for marking text to be emphasized in any way that the browser software sees fit.

The situation is exactly the same when it came to HTML 2.0’s layout control – there isn’t any. You can forget about producing interesting layouts as all text flows within a single column. You can’t even control the width of this column – the line width depends on the width of the browser window so that resizing automatically reformats the page. Vertically you have no control either with no way of setting interline or interparagraph spacing. No wonder the early guides to Web design made so much of the horizontal rule <HR> tag as this at least allowed you to divide the page into clear sections.

Of course the huge strength of this lack of formatting power is the system’s simplicity. All you need to create a Web page is a basic text editor like Notepad. To produce a simple home page for my own site, for example, I want to pick out the page title and the major categories of software that the site covers - web design, DTP, photo-editing and drawing.

 I clearly want these paragraphs to be bigger and bolder than the body text. I can’t do this precisely but I know that for the majority of browsers the heading tags will take advantage of HTML’s in-built range of 7 text sizes centred around the default body text size of 3. By marking off the title paragraph as <H1> and each category as <H2> I can produce a basic hierarchy that can be made more apparent, and given a slight visual lift, with <HR> rules. Within each category I want to list reviews, articles and tutorials which is best done as <LI> items within an unordered list <OL> as this will prevent excess interparagraph spacing and at least provide a bullet of some description to give a little visual interest.

The purpose of design is to aid the transmission of information. For the last five hundred years this has largely meant working with a single medium: print. Over the last ten years, however, the arrival of the Internet has changed everything. With its promise of near instant, near free and near universal access, the Web has already begun to replace paper as the most powerful medium for spreading information. But how does the Web compare in terms of its design capabilities; in terms of the typographic and layout power it offers to control the appearance of text and page?

When producing visually attractive, dynamic and interactive layouts with a modern application like Dreamweaver 3, it might seem that the standards of traditional paper design have already been surpassed. It’s certainly true that at its current rate of change, the Web will soon become not only the most important but also the richest design medium available. But it’s not quite as simple as this. The Web as it stands now is the product of its history. To truly master the Web’s current and future design potential you have to understand where it’s coming from. And to do that you have to start at the beginning.