Formatting Text in HTML


Earlier it was stated HTML does not focus on formatting in a document, but there are a few features of HMTL that handle formatting issues within the text of a page, in the look of the text and in the portion of the page they are placed.

Most of these tags are merely descriptive of the action to be performed and allow a browser to interpret formatting, but a few tags, such as BOLD <b>, specify the formatting.

Many tags can be used in conjunction with others (pretty much all HTML works that way), so to have text in bold italic, you can <i><b> do this </b></i>, but make sure the tags nest correctly to avoid the browser not recognizing them (if you start with <i> like in this example, close off with </i>, making <b> ... </b> part of the <i> element).

Some elements are interpreted in a similar fashion by many browsers, such as several of the list tags, or appear to go unrecognized by the browser, as the Underline <u> tag does in Netscape Navigator 2.0 and below (version 3.0 and above uses the underline tag, as does Microsoft's Internet Explorer).

Headings

 A heading is often used for designating a section of a document (like the Headings section here).
<h1>...</h1>

This is Heading Level 1
<h2>...</h2>

This is Heading Level 2
<h3>...</h3>

This is Heading Level 3
<h4>...</h4>

This is Heading Level 4
<h5>...</h5>
This is Heading Level 5
<h6>...</h6>
This is Heading Level 6

Text Elements

 <p>

This starts a new paragraph; your browser will format this by adding a blank line between the previous and the next paragraph. The </p> can be used to close off the paragraph, but all current browsers can read the empty <p> tag correctly when it's used without it.


<center> . . . </center>

Centers text or specified element (like an image) on the page.


<pre> . . . </pre> 

Identifies text that has already been formatted (preformatted) 
by some other system and must be displayed as is (usually in a 
fixed font). Preformatted text may include embedded tags, but 
not all tag types are permitted. The <pre> tag allows an easy
way to include tables in documents.


<listing> . . . </listing>

Example computer listing; embedded tags will be ignored, but embedded tabs will work. This is an archaic tag.


<xmp> . . . </xmp>

Similar to <PRE>, except embedded tags will not be recognized. This tag is rarely used.


<plaintext> 

Similar to <pre> except embedded tags will not be recognized, 
and since there is no end tag, the remainder of the document 
will be rendered as plain text. This is an archaic tag.


<blockquote> . . . </blockquote>

Include a section of text quoted from some other source.

Logical Styles

 <em> Use the EM tag for emphasis </em>

<strong> The STRONG tag is for stronger emphasis </strong>

<code> CODE tag is used to show HTML directives </code>

<samp> SAMP tag is for sample output </samp>

<kbd> Display a keyboard key with the KBD tag </kbd>

<var> VAR tag is for variable display </var>

<dfn> Display a definition with the DFN tag </dfn>

<cite> The CITE tag is used to display a citation </cite>

Physical Styles

 <b> Boldface </b>

<i> Italics </i>

<u> Underline </u>

<tt> Typewriter (actually teletype) or fixed font </tt>

Lists

 Note: you can embed lists, so you can have a glossary list nested in another glossary list, or an ordered list nested in an unordered one.

The COMPACT attribute can be used in DL, OL, DIR, and MENU list elements to generate a list requiring less space.

Attributes for some list elements were introduced with Netscape 2.0 and above (and may or may not be supported by your browser):

OL Attributes:
TYPE= Specifies how items are numbered. "A" and "a" indicate alphabetical ordering (upper and lower case); "I" and "i" indicate roman numeral ordering (upper and lower case). "1" is numerical ordering (default).
START= Specifies the starting number for a numbered list. START="5" means the list will start numbering at 5.
UL Attribute:
TYPE= Specifies the type of bullet to use. Possible types are "disc" (filled), "circle" (empty), and "square".
LI Attributes:
VALUE= Valid only in an ordered <ol> list; specifies the item number for the given list item, and orders following <li> from there (works like the START attribute above).
TYPE= Specifies numbering ("A", et cetera) or bulleting ("circle", et cetera) depending on whether in an OL or UL list. See TYPE options above.


Glossary (Definition) List: <dl>

<dl>
<dt> First term to be defined
<dd> Definition of first term
<dt> Next term to be defined
<dd> Next definition
</dl>
First term to be defined
Definition of first term
Next term to be defined
Next definition

Unordered List: <ul>

<ul>
<li> First item in the list
<li> Next item in the list
<ul>
<li> Next item sub-list
<li> Next item sub-list
</ul>
<li> And now the next
</ul>
  • First item in the list
  • Next item in the list
    • Next item sub-list
    • Next item sub-list
  • And the next

Ordered List: <ol>

<ol>
<li> First item in the list
<li> Next item in the list
<ol>
<li> Next item sub-list
<li> Next item sub-list
</ol>
<li> Third item in the list
</ol>
  1. First item in the list
  2. Next item in the list
    1. Next item sub-list
    2. Next item sub-list
  3. Third item in the list

Menu List: <menu>

<menu>
<li> First item in the menu
<li> Next item
<li> And next item
</menu>
  • First item in the menu
  • Next item
  • And next item

    • Directory List * : <dir>

    <dir>
    <li> First item in the list
    <li> Second item in the list
    <li> Next item in the list
    </dir>
  • First item in the list
  • Second item in the list
  • Next item in the list
    • *Items in a directory list should be less than 20 characters long.

    Back to Basic HTML
    Index

    Back to the Ziplink 101 page       ©2000 ZipLink. All Rights Reserved.