CSS Tag 11

Formatting Tags

• BR

• CENTER

• HR

• CENTER

• HR

• MULTICOL

• NOBR

• SPACER

• SPAN

• WBR

---

BR

(line break)

The BR tag inserts a line break. The BR tag does not add extra space before the new line. If text is wrapping around an element such as an image, you can use the CLEAR attribute of the BR tag to force the text to continue its flow at the next clear line (that is, it stops wrapping around the element).

The BR tag does not require a closing tag.

Syntax

<BR
CLEAR="ALL"|"LEFT"|"RIGHT"
>

CLEAR

prevents text from wrapping around one or both sides of an element such as an image. Navigator 1.1

• ALL prevents text from wrapping to the left or the right of any element. The result is that the text appears at the next completely clear line.

• LEFT causes text to appear at the next clear left margin. That is, text is not allowed to wrap to the left of any element.

• RIGHT causes text to appear at the next line that has a clear right margin. That is, text is not allowed to wrap to the right of any element.

Example

The following example inserts a line break in a speech from Hamlet:

<P>Hamlet's famous speech begins:
<BLOCKQUOTE><I>To be, or not to be?<BR>
That is the question</I></BLOCKQUOTE>

---

CENTER

(centered content)

The CENTER tag centers content. All content between the <CENTER> and </CENTER> tags is centered. Navigator 1.1

Some tags take an optional ALIGN attribute that specifies the alignment of an element. However, the <CENTER> tag lets you easily center a block of content without having to specify the alignment of each element in the content. It also lets you center elements, such as images, and arbitrary content that could not otherwise be centered. You can put a CENTER tag anywhere, such as in the middle of a paragraph.

The value of an ALIGN attribute overrides the <CENTER> tag.

Syntax

<CENTER>...</CENTER>

Example

<CENTER>
<H1>Netscape's Mascot Mozilla</H1>
<IMG SRC="/images/mozilla.gif>
</CENTER>

---

HR

(horizontal rule)

The HR tag draws a horizontal line across the document frame or window. You can use a horizontal line to visually divide information or sections. The HR tag does not have a closing tag.

Syntax

<HR
ALIGN="CENTER"|"LEFT"|"RIGHT"
NOSHADE
SIZE="thickness"
WIDTH="width"
>

ALIGN

specifies the horizontal alignment of lines that do not span the width of the page. Navigator 1.1

• CENTER displays the line centered (the default).

• LEFT aligns the line flush left.

• RIGHT aligns the line flush right.

NOSHADE

rproduces a solid black line that has no shading. Navigator 1.1

SIZE=”thickness”

indicates the thickness of the line, in pixels. The default is 2 pixels. Navigator 1.1

WIDTH=”width”

defines the horizontal width of the line. The default is the width of the page. The measurement value can be a number of pixels, for example “5″, or a percentage of the page width or frame width, for example “75%”. Navigator 1.1

Example

The following example draws a horizontal rule between two sentences.

<P>This text appears above a thick, unshaded, centered horizontal rule.
<HR NOSHADE ALIGN="CENTER" WIDTH="50%" SIZE="8">
<P>This text appears below the horizontal rule.

---

MULTICOL

(multiple column formatting)

The MULTICOL tag establishes an area of the document as having multiple, equal-width columns. Navigator 3.0

Syntax

<MULTICOL
COLS="columns"
GUTTER="gutterWidth"
WIDTH="colWidth"
>
...
</MULTICOL>

The COLS attribute is required.

COLS=”columns”

specifies the number of text columns for the text display. Netscape Navigator attempts to flow elements evenly across the columns to make each column be about the same height. Unless the WIDTH attribute is present, column width is adjusted to fill the available width.

GUTTER=”gutterWidth”

specifies the distance between each columns in pixels. If it is not specified, Netscape Navigator uses 10.

WIDTH=”colWidth”

specifies the width of each column in pixels. All columns are the same width. If WIDTH is not present, its value is calculated from the gutter width and the number of columns.

Example

The following example uses the MULTICOL tag to display three columns of text.

<MULTICOL COLS="3" WIDTH="520" >
<P>
HyperText Markup Language (HTML) is a set of tags and attributes that mark how text is organized and
displayed by web browsers.
<P>
HTML documents are files containing text and tags
written for the HyperText Transport Protocol
(HTTP)--the protocol used throughout the World Wide Web.
<P>
HTML tags define both the structure of a web page and
the way the marked text displays in a browser such as
Netscape Navigator. Tags mark the start and the end of
text. For example, you can use the H1 tag to mark text
as a first-level heading. When a web browser such as
Netscape Navigator displays that text, it appears in a
large font,
<P>
HTML documents may have different appearances on
different browsers. Even if all of your readers use
Netscape Navigator, they all might not see your
HTML page in the same way because they can configure
Netscape Navigator to use different fonts and to
override your color settings.
</P>
</MULTICOL>

The file multicol.html shows this example in action in a separate window.

---

NOBR

(no break)

The NOBR tag ensures that a line of text does not wrap to the next line. This tag is useful for words or phrases that must be kept together on one line. However, note that if the line of text is long, it can extend beyond the margin of the browser window, so the user must use scrollbars to view the text. Navigator 1.1

Syntax

<NOBR>...</NOBR>

Example

The following example uses the NOBR tag to display a long line of text.

<NOBR>
Line breaks are not inserted into the text contained within a NOBR
block. This tag should be used with care, since it can create
<i>really</i> long lines of text.
</NOBR>

---

SPACER

(extra space)

The SPACER tag inserts a space in the document. The space can be between characters or between lines, or it can be a spacing rectangle, similar to an invisible image. Navigator 3.0

Syntax

<SPACER
TYPE="HORIZONTAL"|"VERTICAL"|"BLOCK"
ALIGN="LEFT"|"RIGHT"|"TOP"|"ABSMIDDLE"|"ABSBOTTOM"|
"TEXTTOP"|"MIDDLE"|"BASELINE"|"BOTTOM"
HEIGHT="height"
WIDTH="width"
SIZE="size"
>

TYPE

specifies whether the extra space is inserted between characters or between lines, or whether it is a rectangular space that is effectively an invisible image. The value can be one of the following:

• HORIZONTAL inserts horizontal space between two characters. The width of this space is specified by the SIZE attribute.

• VERTICAL inserts vertical space between lines. Netscape Navigator adds a line break to end the current line, then adds the vertical space before the beginning of the next line. The height of the space is specified by the SIZE attribute.

• BLOCK behaves almost exactly like an invisible image. Netscape Navigator ignores any SIZE attribute and instead uses the HEIGHT, WIDTH, and ALIGN attributes to define a spacing rectangle.

ALIGN

applies only when the extra space is a block. It specifies the alignment of the spacing rectangle in relation to the surrounding text. If you do not specify a value for ALIGN, Navigator uses “BOTTOM” as the default. The values are the same as the values of ALIGN for the IMG tag.

HEIGHT=”height”

applies only when the extra space is a block, and specifies the height of the spacing rectangle in pixels.

WIDTH=”width”

applies only when the extra space is a block. It specifies the width of the spacing rectangle in pixels.

SIZE=”size”

depends on the value of TYPE. When the spacer is of type HORIZONTAL or VERTICAL, the SIZE attribute specifies the absolute width or height in pixels of the added space. If the extra space is a block, the SIZE attribute is ignored.

Example

In the following example, the first SPACER tag inserts a 20 pixel gap between the o and r in the word “word.” The second SPACER tag inserts a line break and adds 40 pixels before the words “This line.” The third SPACER tag creates an invisible image, 100 pixels wide and 80 pixels high, and inserts it so it is vertically aligned with the current line in the paragraph.

<P>
This wo<SPACER TYPE=HORIZONTAL SIZE=20>rd has a small gap in it.
<SPACER TYPE=VERTICAL SIZE=40>This line is 40 pixels below the one above.
<P>BLOCK behaves almost exactly like an
<SPACER TYPE=BLOCK WIDTH=100 HEIGHT=80 ALIGN-MIDDLE>invisible image.
The Navigator ignores any SIZE attribute and instead uses the HEIGHT,
WIDTH, and ALIGN attributes to define a spacing rectangle.</P>

---

SPAN

(span of content)

The SPAN tag delimits an arbitrary piece of text. You can apply styles to the span of text. Navigator 4.0

Syntax

<SPAN
CLASS="styleClass"
ID="namedPlaceOrStyle"
STYLE="style"
</SPAN>

Example

<P>Here is some normal paragraph text. It looks OK,
but it would lookmuch better if it were
<SPAN STYLE="color:blue; font-weight:bold; font-style:italic">
in bright, bold, italic blue. </SPAN>

---

WBR

(word break)

The WBR tag marks a place where a line break can take place. It does not necessarily always result in a line break; rather, it says that line breaks are allowed at this place. You could use it, for example, inside a NOBR tag to allow a line break. Navigator 1.1

The WBR tag does not require a closing tag.

Syntax

<WBR>

Example

<NOBR>
Line breaks are not ordinarily inserted into the text contained within
a NOBR block, which can produce some awkwardly long lines.
<WBR>
If the text contains a WBR tag, however, it marks a location where the
insertion of a line break is permitted.
</NOBR>