Copy and paste your marked-up e-mail into the window below.insert HTML

(Roll over highlighted elements for examples and brief notes.)

Block-level elements
Browsers add line breaks before and after most block-level elements. Some receive distinct left / right margins, and, in the case of headings, distinct font sizes, too. And most can contain other block-level elements. (Lists, for example, can contain other lists, paragraphs, or headings, etc.)
    However, Paragraphs and Headings cannot contain other block-level elements. A list can hold paragraphs, but not visa versa.

h1 .. h6   headings

<h1>My level 1 heading</h1>

6 headings are defined—most to least important. The more important the heading, the larger the font.
Note: Headings cannot contain other block-level elements.

p   paragraphs

<p>This is a paragraph.</p>

Paragraphs cannot contain other block-level elements.
This runs counter to my instinct. I'd think lists and blockquotes could be nested within a paragraph, but no.
Try it, and the paragraph closes prematurely. Paragraph text following the inserted element is orphaned and displayed as generic BODY text, losing any formatting specific to paragraphs.

ul   unordered list

<ul>
    <li>apples</li>
    <li>oranges</li>
    <li>bananas</li>
</ul>

  • apples
  • oranges
  • bananas

Unordered lists can contain other lists or block-level elements, such as P or H.
Note: the type of list, UL, is defined first, then the list items are nested within it as LI elements.

ol   ordered list

<ol>
    <li value="15">apples</li>
    <li>oranges</li>
    <li>bananas</li>
</ol>

  1. apples
  2. oranges
  3. bananas

Ordered lists are numbered beginning with "1," unless "value" is specified as above.

dl   definition list

<dl>
    <dt>term a</dt>
    <dd>definition a</dd>
    <dt>term b</dt>
    <dd>definition b1</dd>
    <dd>definition b2</dd>
</dl>
term a
definition a
term b
definition b1
definition b2

As above, other block-level elements may be nested within the list. DD can contain paragraphs or blockquotes or be replaced by an OL or UL list, etc.

blockquote

<blockquote>Blockquotes begin on new lines and are indented.</blockquote>

Blockquotes begin on new lines and are indented.

Blockquotes can contain other block-level elements.

pre   preformatted

<pre>
Preformatted elements
      retain the linebreaks
            and indentation of
                  the source.
</pre>

Preformatted elements 
   retain the linebreaks
      and indentation of
         the source. 

 

(grouping element)

div   division

<div id="divExample">
<h5>Why use DIVs?</h5>
<ul>
  <li>for formatting</li>
  <li>for script control</li>
</ul>
</div>

Why use DIVs?
  • for formatting
  • for script control

DIV can contain multiples block-level elements, including other DIVs. The resulting group can be formatted uniquely by a style rule, or manipulated by a script—as these pop-up "windows" are.
In-line elements
In-line elements flow with the surrounding text, inheriting their margins from their containing elements.

em   emphasized

This is <em>important</em>.
This is important.
Voice readers can heighten tone when rendering EM.

strong   usually bold

This text is <strong>strong</strong>.
This text is strong.

cite   citation

Julian Barnes. <cite>Flaubert's Parrot</cite>.
Julian Barnes. Flaubert's Parrot.

b, i, u   bold, italic, underlined

<b>Here</b> is an example of <b><i>nested</i></b> in-line elements.
Here is an example of nested in-line elements.
The more generic elements above are favored over these print terms, & underlined is deprecated— browsers render it as a legacy element, but it's dropped from HTML 4.01 in favor of a style rule.

img   image placeholder

<img src="cuphome.jpg" alt="picture of cup" />
to homepage

SRC. Sometimes full URLs, paths, or partial paths are needed, in addition to the filename, e.g.:

src="graphics/cuphome.jpg"

(meaning, look in the "graphics" folder for cuphome.jpg).

ALT. ALT text appears in place of the picture, if needed.

a   anchor, start or target of a link

<a>click here</a> marks "click here" as anchor text—the origin or target of a link. Whether it's either (or both) depends upon the opening A tag. (See HREF and NAME.)

Note: An image can also be an anchor. Simply put an IMG tag between the A tags.

   href   hypertext reference

HREF creates links TO locations:
href="mypage.html"
   links to another page
href="#cv"
   links to a spot on this page
href="mypage.html#cv"
   links to a spot on another page
(HREF goes inside the opening tag.)
A complete link to "1.html"
<a href="1.html">link</a>

   name   target of other links

NAME defines the target of a link: name="vita"
Here's a completed NAME anchor,
<a name="cv">Vita:</a>
and a reference to it
<a href="#cv">My vita.</a>

NAMEd anchors are often used in FAQs or other long pages. However, NAME is being phased out in favor of IDs (see below)

(grouping element)

span   defines section within a block

SPAN is the in-line complement of DIV, providing formatting and script manipulation within a block element.
<span class="dropcap">
CA</span>pital
CApitial
 
Letter to Friends of English (32000 byte max): other HTML     preview

Carolyn
Rob
Molly
Dick

(The lists below are mutually exclusive.)

FRIENDS
HOTMAIL-MSN FRIENDS

other address (256 bytes max)

(separate mutiple addresses with commas)