Display Property Demonstrations

Example 1

In the following example, we see a UL element used to depict a brief links list. This would typically be used to give a list of contents at the top of a page.

In case the above renders as a list instead of a line, or in case the above has bullets, here is what should have been shown:

Using a list element, instead of a paragraph element (as was used in the second instance to simulate the effect), means that styling is much more dynamic. Furthermore, a paragraph doesn't actually describe the structure of the links: they are, after all, a list, and not a paragraph.

Example 2

In the following example, we see five paragraphs. They should be numbered.

The above probably renders as five simple paragraphs, but here is what should happen:

An example of where this would be very useful is the main index page of this set of documents: the headers are numbered, but the numbering had to be added manually! If only this property was supported properly, then authors would not need to do this.

Example 3

This now works completely in IE5 betas.

In this demo, the CITE elements have been given a display value of block. Here is what happens:

This is what it should look like:

Conclusion

The display property is a powerful feature -- indeed, with XML, it will be the only way of telling the browser how to render the document at its most basic level.