HTML 3.2 and Netscape 3.0: Block elements | WebReference

HTML 3.2 and Netscape 3.0: Block elements

prevtopnext

Block Elements

HTML 3.2 and Netscape 3.0


Block level elements divide the BODY into separate elements, to be treated in the same manner. They act as containers for text and media and allow special formatting to the entire block. They cause a paragraph break before and after the opening and closing tags (except for CENTER). Block level elements can contain text level elements and other block level elements (excluding headings and addresses) while text level elements can only contain other text level elements. The block elements are:

Block Elements

BLOCKQUOTE
The BLOCKQUOTE element is generally used to enclose extended quotations, and is typically rendered with indented margins. The BQ equivalent proposed in HTML 3.0 has been dropped. It requires the start and end tags. BLOCKQUOTEs can be nested to double the margins, but not all browsers recognize nested BLOCKQUOTEs. Ex:

<BLOCKQUOTE>
It is conceivable that most unusual and extraordinary circumstances may arise in which the relief from duty of a commanding officer by a subordinate becomes necessary, either by placing him under arrest or on the sick list; but such action shall never be taken without the approval of the Navy Department or other appropriate higher authority, except when reference to such higher authority is undoubtedly impracticable...

- From the Navy Regulations, Article 184 and the first page of The Caine Mutiny by Herman Wouk
</BLOCKQUOTE>

CENTER
The CENTER element causes the enclosed text and/or graphics to be aligned between the current margins. It requires the start and end tags. The CENTER element began life as NHTML but became so widespread it has been adopted by the W3C. See the DIV element for a more general solution. The CENTER element can be thought of as shorthand for a DIV with ALIGN=CENTER. Ex:

<CENTER>
It was not a mutiny in the old-time sense, of course, with flashing of cutlasses, a captain in chains, and desperate sailors turning outlaws. After all, it happened in 1944 in the United States Navy....
</CENTER>

DIV
The DIV element designates a section of the document to be treated as a whole for formatting or identification purposes, such as chapter, section, or appendix. The DIV tag has the same attributes as the P tag, i.e., ALIGN="left/center/right." In the future, the DIV tag could be utilized with style sheets, such as formatting all chapters one way, footnotes another way, etc. Ex:

<DIV align="right">He was of medium height, somewhat chubby, and good looking, with curly red hair and an innocent, gay face, more remarkable for a humorous air about the eyes and large mouth than for any strength of chin or nobility of nose. He had graduated from Princeton in 1941 with high marks in all subjects except mathematics and sciences. His academic specialty had been comparative literature....</DIV>

HEADINGS
There
are six levels of headers from H1 (the most important) to H6 (the least important). The more important headers are generally rendered larger than the smaller ones. The start and end tags are required. A paragraph break is implied before and after a header, and word wrapping is in effect. There are three attributes to headers, ALIGN="left/center/right." These attributes align the head with the left or right margin or center. Ex:

<H3 ALIGN=CENTER>Chapter 3: Captain Queeg</H3>

NHTML: Netscape 3.0 includes the NOBR attribute, which prevents word wrapping.

HR
The <HR> (horizontal rule) element inserts a divider line in the document, usually used to separate sections, or to surround forms. The HR is not a container, so the end tag is forbidden. HTML 3.2 has adopted the NHTML way of specifying horizontal rules [NC 95]. The attributes are:
  • ALIGN="left/center/right" (align with left, center, or right margin)
  • NOSHADE (allows for a solid bar, ex: HR NOSHADE SIZE=1)
  • SIZE=num pixels (ex: HR SIZE=2 [the default size])
  • WIDTH=% (specifies the relative width of the rule, ex: HR WIDTH=90%)

Usage

<HR SRC="line.gif" SIZE=5% WIDTH=100> - WRONG
<HR NOSHADE SIZE=1 WIDTH=80% ALIGN=CENTER> - RIGHT

LISTS
List elements (UL, OL|DL, DIR|MENU) can contain block and text level elements, although headings and address elements are excluded. HTML 3.2 allows you to control the sequence number for ordered lists. The TYPE attribute can be used to specify the rendering of ordered and unordered lists (type of numbering and bullets respectively).
UL
The UL (Unordered List) element is the simplest list element. It creates a bulleted list. There are two attributes, TYPE and COMPACT. The TYPE element controls the appearance of the bullets, and has three options: "disc|square|circle." Ex:
<UL TYPE=square&gt COMPACT;
  <LI>List item 1
  <LI>List item 2
  <LI>...
</UL>
  • List item 1
  • List item 2
  • ...

OL
The OL (Ordered List) element defines a sequential list, usually displayed indented. There are three attributes, TYPE, START, and COMPACT. Type determines the numbering style, [1|a|A|i|I]:
1   arabic numbers      1, 2, 3, ...
a   lower alpha         a, b, c, ...
A   upper alpha         A, B, C, ...
i   lower roman         i, ii, iii, ...
I   upper roman         I, II, III, ...

START is a number that determines the starting sequence, based on the TYPE. Ex:

<OL TYPE="i" START="2">
  <LI>List item 1
  <LI>List item 2
  <LI>...
</UL>

  1. List item 1
  2. List item 2
  3. ...

The LI element has additional flexibility (first introduced in Netscape 1.1 and now in the HTML 3.2 DTD), allowing you to change the type and list count index for unordered and ordered lists respectively. The two LI attributes are TYPE (UL) and VALUE:

<UL TYPE=square>
  <LI>List item 1
  <LI TYPE="DISC">List item 2
  <LI>...
</UL>
  • List item 1
  • List item 2
  • ...
<OL TYPE="i">
  <LI>List item 1
  <LI>List item 2
  <LI VALUE="5">...
</UL>

  1. List item 1
  2. List item 2
  3. ...

DIR/MENU
The DIR (Directory List) and MENU (Menu List) elements define lists identical to unordered lists. There is one attribute, COMPACT:
<DIR COMPACT>
  <LI>List item 1
  <LI>List item 2
  <LI>...
</UL>

  • List item 1
  • List item 2
  • ...
  • <MENU COMPACT>
      <LI>List item 1
      <LI>List item 2
      <LI>...
    </UL>

  • List item 1
  • List item 2
  • ...
  • DL
    The DL (Definition List) creates a "glossary" type of list, i.e., a flush left term, followed by its indented definition. The DT element is the term, and the DD element defines the term. There is one attribute, COMPACT, which renders a more compact style. In practice, COMPACT has little effect on a DL. Ex:
    <DL>
       <DT>Term1<DD>
          Definition of term1
       <DT>Term2<DD>
          Definition of term2
    </DL>

    Willie Keith
    He was of medium height, somewhat chubby, and good looking, with curly red hair and an innocent, gay face, more remarkable for a humorous air about the eyes and large mouth than for any strength of chin or nobility of nose.
    Captain Queeg
    Nobody was expecting the new captain. The gig was making a routine morning trip to the fleet landing for mail and a movie. The ragged boatswain and his two filthy assistants were appalled when Queeg accosted them and courteously ordered them to load his foot locker and bags into the boat. They had no way of warning the officer of the deck about their passenger, and so the new captain caught his first impression of the ship in its natural unpolished state.

    MULTICOL
    The MULTICOL element is a container that automatically displays multiple columns that automatically flow. The MULTICOL element is new to Netscape 3.0 (Features: Multiple Columns). MULTICOLs can be nested, and have three attributes: COLS, GUTTER, and WIDTH.

    COLS - The COLS attribute is mandatory and used to set the number of columns. The contents will evenly distributed automatically, to create columns about the same height. Ex:

    <MULTICOL COLS=2...>

    GUTTER - The GUTTER attribute controls space between columns. It defaults to a value of 10 pixels. Ex:

    <MULTICOL COLS=2 GUTTER=8...>

    WIDTH - The WIDTH attribute controls the width an individual column. All columns are always the same width, so the overall width of a multicolumn layout is: (cols * width) + ([cols - 1] * gutter). The WIDTH can have an absolute value (pixels) or relative (percentage). Ex:

    <MULTICOL COLS=2 WIDTH=465...> or <MULTICOL COLS=2 WIDTH="90%"...> Nested MULTICOLs - You can create nested columns with multiple MULTICOLs. MULTICOLs can nested to create a newspaper look. Here we've inserted another MULTICOL with 2 columns and a narrow GUTTER of 8 pixels. MULTICOLs can be nested infinitely (although I wouldn't recommend it).

    An Example


    <MULTICOL COLS=2 GUTTER=15 WIDTH=100%>
    Willie Keith

    He was of medium height, somewhat chubby, and good looking, with curly red hair and an innocent, gay face, more remarkable for a humorous air about the eyes and large mouth than for any strength of chin or nobility of nose.

    Captain Queeg

    Nobody was expecting the new captain. The gig was making a routine morning trip to the fleet landing for mail and a movie. The ragged boatswain and his two filthy assistants were appalled when Queeg accosted them and courteously ordered them to load his foot locker and bags into the boat. They had no way of warning the officer of the deck about their passenger, and so the new captain caught his first impression of the ship in its natural unpolished state.


    <MULTICOL COLS=2 GUTTER=12 WIDTH=100%>

    Chapter 4: Shore Leave

    Willie and May were huddled together in the moonlight beside a tall pine on the floor of the Yosemite Valley....They heard a deep masculine voice call, in long-drawn tones echoing between the sheer valley walls, "Let the fire fall!" From the peak of a cliff a red cascade of embers came tumbling straight down through the darkness, a glowing, floating fiery column a mile high. Somerwhere in the gloom cowboy musicians began a melancholy little love song. Willie and May turned to each other and kissed.


    </MULTICOL>
    </MULTICOL>
    P
    The P tag defines a paragraph. The end tag </P> is optional and implied by a new paragraph tag or other text container. There are three attributes to the humble P tag, ALIGN="left/center/right." The P tag is functionally equivalent to two <BR> tags, and creates a blank line between multiple paragraphs. Ex:

    <P>Willie and May were huddled together in the moonlight beside a tall pine on the floor of the Yosemite Valley....They heard a deep masculine voice call, in long-drawn tones echoing between the sheer valley walls, "Let the fire fall!" From the peak of a cliff a red cascade of embers came tumbling straight down through the darkness, a glowing, floating fiery column a mile high. Somerwhere in the gloom cowboy musicians began a melancholy little love song. Willie and May turned to each other and kissed.</P>

    <P ALIGN=RIGHT>After a while they walked arm in arm to the hotel.</P>

    NHTML: - <NOBR> - The NOBR (NO BReak) element disables word wrapping, and prevents line breaks from being automatically inserted inside the opening and closing tags. You can manually break lines by using the <BR> tag. It can contain any number of text containers. The NOBR and WBR elements were added to Netscape 1.1.

    <WBR> - The WBR (Word BReak) element is rarely used in situations where you know exactly at what word you want a line to break. The WBR element does not force a line break (as BR does) it lets Netscape know where a line break *is allowed* if needed.

    PRE
    The PRE tag defines text that is "preformatted" and excludes images and changes in font size. The text should be basic ASCII text and is displayed exactly as entered, usually in a fixed-width, typewriter style font (Monaco, Courier, etc.) PRE tags were used before the TABLE tag was introduced to create crude tables, since the spacing is preserved: blanks are treated as characters not word separators. HTML 3.2 shows that the following elements are excluded from the interior of a PRE tag: IMG|BIG|SMALL|SUB|SUP|FONT. Ex: <PRE>
        Ship's Standing Order #6-44.
        1. The main deck of this vessel will always be spotlessly clean.
        2. Failure to comply will result in heavy disciplinary action
           for the entire crew.
    </PRE>

    nextprev

    Comments/suggestions are welcome at aking@webreference.com

     


    Revised: Apr. 14, 1996

    URL: http://webreference.com/html3andns/alignment.html