Dynamic HTML

Controlling HTML

HTML3 only allowed HTML content to flow down the page in the order specified by the page. Tables allowed certain horizontal positioning but even using colspan attributes and zero borders, the designer could never be confident that elements could be positioned as intended on the final web page.

Two new tags are the main framework for both DHTML and CSS: <div> and <span>. These tags are different in that the tags are placeholders: pegs from which you can hang your CSS and Javascript. <div> adds a line break above the <div> tag and below the </div> tag. <span> does not affect the text flow at all.

The most important attribute for these new tags is "id" Each id must be unique to that document (and to the web site if the document is used as external content). Once other attributes like position and style are added, the id allows you to code for any change in the position, font, font-weight, visibility, colour, even background of any elements within the <div> and </div> or <span> and </span> tags.

<div> and <span> tags can also use CSS class attributes as well as id. If the style is unique to the document, use an identifier in the CSS (#) and give the div or span the same id. For styles that repeat within a document, use a class (.) in the CSS and use the class attribute in the tag.


<div class=anything id=unique>
This text is within the tag</div>
<span class=anything id=unique>
This text is within the tag</span>

Now you can apply your CSS only to the included text instead of a whole area or document



This is part of www.codehelp.co.uk Copyright © 1998-2004 Neil Williams
See the file about.html for copying conditions.