The purpose of this document is to define a rich vocabulary of semantic classes whose presentation can be specified in site-wide style sheets—enough to be able to write a long, involved, well-styled document without once writing a CSS rule. These classes take the place of the old presentation templates; the presentation is now defined in the site style sheets, allowing the markup to remain semantic. This simplifies the HTML coder's job, allows a greater flexibility in styling pages, and ensures consistent formatting conventions throughout the site.
These classes are defined to be used on an as-needed basis. If you don't need them, you don't have to learn or use them. But if you find yourself needing presentational markup or CSS, check here first—maybe what you're looking for is already defined. (If it's not, then maybe it should be. If you think your style rules would be useful for other authors, file a bug report against fantasai.bugsCinkedblade.net.)
<p> to mark paragraphs. Use the tags to
enclose paragraphs, not to separate them.
<div class="para"> is for paragraphs that logically enclose
block-level elements not allowed in
<p> by the HTML DTD.
For example, one might have a paragraph split by a
In this case, each half of the paragraph gets a separate
and the whole construct is enclosed by
Don't use it for inline figures you want rendered as blocks,
<img> is allowed in
the style sheets can render it as a block even in NS4.x.
<div class="para"> <p>When writing technical documentation, especially online documentation, strict organization assumes a particularly important role. The reader is often there only to find some specific piece of information, and typically scans rather than peruses the text. To make this easier,</p> <ul> <li>subdivide your document and outline it with headings <li>organize a strong structure <li>use bulleted lists <li>write concisely; don't ramble <li>get to the point first, then elaborate <li>don't write long introductions except in "Introduction" sections <li>give a clear explanation <li>and use specific examples to illustrate the text. (An example is worth a thousand words.) </ul> <p>You want the main points of your writing to stick out so that the reader can find the right section quickly and easily. Snag them first, then explain.</p> </div>
<div class="section"> to mark sections within a document.
Enclose both the heading and the content. Sections are typically indented slightly,
compared to the surrounding text.
<div class="section"> <h2><a name="structure">General Structure</a></h2> ... </div>
Use this class to indicate that an HTML table is a data table so
style sheets can add colors and borders. (There are still a lot of
layout tables on mozilla.org, so we can't just color all tables
indiscriminately.) If you want even/odd stripes, use the
odd classes (on
<tr>) instead of
creating your own.
Use this for block quotes: paragraphs or other block-level content. An attribution
can be given with
<address> just before the closing tag.
<blockquote cite="http://www.faqs.org/rfcs/rfc1866.html"> <p>The BLOCKQUOTE element contains text quoted from another source.</p> <p>A typical rendering might be a slight extra left and right indent, and/or italic font. The BLOCKQUOTE typically provides space above and below the quote.</p> <p>Single-font rendition may reflect the quotation style of Internet mail by putting a vertical line of graphic characters, such as the greater than symbol (>), in the left margin.</> <address><a href="http://www.faqs.org/rfcs/rfc1866.html">HTML 2.0</a></address> </blockquote>
Use this for short quotes: phrases to sentences, not enough to warrant a block quote.
The quoted text should be in
<q>, the attribution, if any, in a
is a motto or quotation, usually at the beginning of a composition, that sets
forth a theme. Usage for the epigraph tags is as for
<div class="quote">, described above.
Use this to designate a writer or editor's comments in a draft. (This is also used to designate comments in code blocks.) Don't add punctuation to set it off; the style sheet may generate them.
This flag is set if the combined area of a frame's children extend past the frame's bounding box. <span class="remark">What is a frame's "bounding box"?)</span> If this flag is set, then...
<p class="note">, and
Use this to mark a note. Style sheets will generate the text "Note: " before the note and will typically also introduce some other font or color change.
Use this for short sections of information (or links) that aren't directly relevant to the main text and thus should be set apart from the main flow of the discussion. While it will typically be floated to the side, don't rely on it for layout purposes: it might set apart only by a different background or border.
Use this to "box" key sections in the main flow of the text—to make them stand out or set them apart. (Use important, though, for critical notices.)
Use this to indicate an important notice—something that must not be missed.
important is typically rendered in a bigger font and/or with bright
coloring. Make sure the text is also encased in a
These indicate varying levels of emphasis. For reference, the typical presentation goes italic, bold, bold italic, bold uppercase.
< div class="figure">
Use this to mark images used as figures or diagrams. A
typically rendered as a centered block.
Use this for any type of example. (But don't forget to enclose code
snippets in code blocks.) You can give caption
text with the
<div class="good example">and
<pre class="good code">
good class to specifically mark examples and code
as good usage. (If the code sample is in a
it doesn't need its own
<div class="bad example">
<pre class="bad code">
bad class to specifically mark examples and code
as invalid or bad usage. (If the code sample is in a
it doesn't need its own
Text to be entered by the user —
use this for text the user must type and for marking key combinations.
Push Esc and type :wq.
<p>Push <kbd>Esc</kbd> and type <kbd>:wq</kbd>.</p>
Use this to mark placeholders.
<p>Push <kbd>Esc</kbd> and type <kbd>:w <var>filename</var></kbd>.</p>
Use this to mark command names.
<p>The <code class="command">ls</code> command lists all files in the current directory.</p>
Use this for filenames, paths, and URIs.
Save the file as <code class="filename">/home/<var>your_username</var>/.bashrc</code>
Mark all code fragments with one of these. In addition to
visually setting the code fragment off from the rest of the
text, it also suggests a syntax-highlighting mode to the
style sheet for markup such as
<span class="remark"> and
<var>, and disables generated content.
Use emphasis to highlight important
screen class on a
mark a block of computer text output, such as a screen
capture from a terminal window or an ASCII-art GUI design.
You can also set it on a
<div> to use
HTML markup to express the output, as for page code examples.
Use this to mark inline fragments of text output.
"toc" marks a list as a table of contents. Use
<ol> for a simple single- or multi-level
listing. (For multi-level listings, only set the class on the
outermost list.) Use
only if the order of the entries in the list is
When used with
<dl>, the term
<dt>) gives the section name and the definition
<dd>) gives a short description or abstract of
snav is for "short navigation" or "sectional navigation", whichever you prefer, and is intended to be a short list of local navigation links (which might all even link to parts of the same page). It is to be used at the discretion of the individual page author (as opposed to a template designer), and it is not a proper table of contents.
ex-ref to denote links to another site. For example,
a link to MozillaZine
would be marked as
ex-ref. Typical formatting for an
ex-ref link is slightly different from a regular link.
It's purpose is to warn the visitor that they're leaving mozilla.org's