HTML Text Format

Dreameaver provides access to a range of HTML declarative tags through the Format box. It is good practice to use these options irrespective of whether you are going to use CSS styles.

Declarative Formatting

The text "HTML Text Format" above is formatted as Heading 2. If you position the curson in that text you will see that the entry in the Format box in the Properties window shows you this. Similarly, the text "Declarative Formatting" is formatted as Heading 3.

This is referred to as declarative formatting because I have not directly specified how to format the text, instead I have specified what the text is, namely a level 2 or a level 3 heading. Exactly how different levels of heading are formatted is then defined elsewhere. This leaves me free to concentrate on the structure of the document first, and then worry about how the elements should be rendered later.

Document Structure Tags

There are a number of predefined possibilities in Format drop down box, each of these corresponds to a different HTML tag:

Each of these formatting options wraps the given text in a particular tag, indicating to the browser how it is to be displayed.

The option None actually removes any declarative tag from the text. This means that the browser will render the text according to the default settings and not apply any special formatting to it.

Most of the text on this page is formatted as Paragraph. This means that each paragraph has a <p> tag at the beginning and a </p> tag at the end. Go into code view now and look at this page to confirm this. Notice that the paragraph above does not have these tags, it has been formatted as None. The difference between formatting text as Paragraph and formatting it as None shows up in the spacing applied when the Return key is pressed. Further, style rules could be defined which would alter the appearance of all Paragraph text, but text formatted as None will not be affected. Start a blank page and experiment with blocks of text to see the effects.

Then there are a range of heading styles. These are useful for dividing the page into logical sections when presenting information. The text "Web Design" at the top of the page is formatted as Heading 1, the text "HTML Text Formatting" is formatted as Heading 2, and so on. Heading 1 text is wrapped in <h1> ... </h1> tags, Heading 2 text in <h2> ... </h2> tags, and so forth. Note the consistent use of these styles throughout this website.

Finally, the Preformatted option is used to specify that the text has already been formatted. Specifically this refers to any white space in the text. Normally, additional white space such as multiple consecutive space characters of return characters are all reduced to a single space when rendered. However, any preformatted text will be wrapped in <pre> ... </pre> tags and this will cause the browser to preserve all spacing when displaying the text. Such text is also usually displayed using a fixed width font.

The table below shows the same text wrapped in a <pre> tag and also without; note that the text in each column is identical when viewed in code view. This shows that without the <pre> tag extra white space is removed.

With <pre> Without <pre>
this   text
        has lots  of
            extra white space   at random
this text has lots of extra white space at random locations

The main practical use of the <pre> tag is to display program code in a web page.

Defining Appearance

The actual appearance of all of these tags can be changed using style rules. So, if you decide that you want all your level 1 headings to be rendered in the Georgia font, bold and at 140% text size you could define a rule that would give that effect. The use of Tag styles is discussed here.