SEC Style Guidelines
The purpose of this page is to provide an overview of the variety of formatting scenarios you may encounter while coding HTML for the SEC's public web site. This Paragraph is an example of how standard text should appear.
Header Tags
The most common formatting tags you will need to use are the H1,H2 and H3 tags. H1 tags should only be used as the page title. H2 tags are then meant to be used as main category headings with H3 tags as subheadings. The titles "Header Tags" above is an example usage of the H2 tag. The style sheet currently defines H5 tags to appear the same as H4 tags. Below is an overview of all the H tags.
Style Example:
Page Title
Main Heading
Sub Heading
Lower Heading
|
Code Example:
<h1>Page Title</h1>
<h2>Main Heading</h2>
<h3>Sub Heading </h3>
<H4>Lower Heading</h4>
|
Images
The suggested style for images is a grayscale format enclosed in a table with yellow border. Note that the border is provided by the enclosing table, not the image itself. This will allow the image to be used in other contexts as needed.
To align the table to the left or right of the text, align="right" or align="left" attributes can be added to the table tag(s).
Style Example:
|
Code Example:
<TABLE BORDER="0" CELLPADDING="5" CELLSPACING="0" align="right">
<TR>
<TD ALIGN="center">
<TABLE CELLPADDING="2" CELLSPACING="0" border="0">
<TR>
<TD BGCOLOR="#F9D449" ALIGN="center"><IMG SRC="/images/persstaf.jpg" ALT="personnel staffer at work" height="190" width="154" BORDER="0"></TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
|
Captions
Images with captions should be wrapped within a style definition named subtext.
Style Example:
|
|
President Franklin D. Roosevelt
|
|
Code Example:
<TABLE BORDER="0" CELLPADDING="5" CELLSPACING="0" align="right">
<TR>
<TD ALIGN="center">
<TABLE CELLPADDING="2" CELLSPACING="0" border="0">
<TR>
<TD BGCOLOR="#F9D449" ALIGN="center"><IMG SRC="/images/histsec_fdr.jpg" ALT="Pres. Franklin D. Roosevelt" WIDTH="144" HEIGHT="165" BORDER="0"></TD>
</TR>
</TABLE>
</TD>
</TR>
<TR>
<TD ALIGN="center" CLASS="subText">President Franklin D. Roosevelt</TD>
</TR>
</TABLE>
|
Footnotes
Footnotes should be superscripted and hyperlink to the bottom of the page. The note at the bottom of the page should then hyperlink back to the calling location of the document. There should be anchors (A NAME) around both the calling location in the document and the footer itself.
Style Example:
This is sentence has a footnote.1
| 1 |
Notice that the footnote also links back to the referring part of the
document. |
|
Code Example:
This is sentence has a footnote.<A NAME="FOOTBODY_1"><SUP><A HREF="#FOOTNOTE_1">1</A>;</SUP></A>
<HR color=#f9d449 SIZE=1>
<TABLE border=0 cellPadding=5>
<TR valign=top>
<TD><A name=FOOTNOTE_1></A><SUP><A href="#FOOTBODY_1">1</A></SUP></TD>
<TD>Notice that the footnote also links back to the referring part of the document.</TD>
</TR>
</TABLE>
|
Note that if you have multiple footnotes you will need to modify the links accordingly.
Menus
Menus and tables of contents should be formatted in a two column format. Main category links are formatted with the default link style. Main category headers that are not links are formatted by a "headerNoLink" class. Descriptive text is formatted by a class called "subtext" and subcategory links are formatted by "subcat" class. Notice the "more..." links only appear when a section has additional links which are not displayed on the current page.
Style Example:
Code Example:
<TABLE CELLPADDING="0" CELLSPACING="0" BORDER="0" WIDTH="500">
<TR>
<td width="20"><IMG SRC="/images/pixel.gif" WIDTH=20 HEIGHT=1 BORDER="0"></td>
<TD VALIGN="top" WIDTH="230" ALIGN="left">
<a href="#" class="mainCat">Main Number One</a><hr COLOR="#F9D449" SIZE="1">
<table>
<tr>
<td> </td>
<td class="subText">This is an example of a text description that may need to exist under a main heading.</td>
</tr>
</table>
<br>
<a href="#" class="mainCat">Main Number Two</a><hr COLOR="#F9D449" SIZE="1">
<IMG SRC="/images/arrowright_dkblue.gif" WIDTH=10 HEIGHT=9 ALT="* " BORDER="0" ALIGN="absmiddle">
<a href="#" class="subCat">Subcategory One</a><br>
<IMG SRC="/images/pixel.gif" WIDTH=1 HEIGHT=3 BORDER="0"><br>
<IMG SRC="/images/arrowright_dkblue.gif" WIDTH=10 HEIGHT=9 ALT="* " BORDER="0" ALIGN="absmiddle">
<a href="#" class="subCat">Subcategory Two Is An Overly</a><br>
<a href="#" class="subCat">Descriptive Title</a><br>
<IMG SRC="/images/pixel.gif" WIDTH=1 HEIGHT=3 BORDER="0"><br>
<IMG SRC="/images/arrowright_dkblue.gif" WIDTH=10 HEIGHT=9 ALT="* " BORDER="0" ALIGN="absmiddle">
<a href="#" class="subCat">Subcategory Three</a><br>
<IMG SRC="/images/pixel.gif" WIDTH=1 HEIGHT=3 BORDER="0"><br>
<div align="right"><a href="#" class="more">more...</a></div>
<a href="#" class="mainCat">Main Number Three</a><hr COLOR="#F9D449" SIZE="1">
<IMG SRC="/images/arrowright_dkblue.gif" WIDTH=10 HEIGHT=9 ALT="* " BORDER="0" ALIGN="absmiddle">
<a href="#" class="subCat">Subcategory One</a><br>
<IMG SRC="/images/pixel.gif" WIDTH=1 HEIGHT=3 BORDER="0"><br>
</td>
<td width="20"><IMG SRC="/images/pixel.gif" WIDTH=20 HEIGHT=1 BORDER="0"></td>
<td WIDTH="230" valign="top">
<div class="headerNoLink">Main Number Four</div>
<hr COLOR="#F9D449" SIZE="1">
<IMG SRC="/images/arrowright_dkblue.gif" WIDTH=10 HEIGHT=9 ALT="* " BORDER="0" ALIGN="absmiddle">
<a href="#" class="subCat">Subcategory One</a><br>
<IMG SRC="/images/pixel.gif" WIDTH=1 HEIGHT=3 BORDER="0"><br>
<IMG SRC="/images/arrowright_dkblue.gif" WIDTH=10 HEIGHT=9 ALT="* " BORDER="0" ALIGN="absmiddle">
<a href="#" class="subCat">Subcategory Two</a><br>
<IMG SRC="/images/pixel.gif" WIDTH=1 HEIGHT=3 BORDER="0"><br>
<IMG SRC="/images/arrowright_dkblue.gif" WIDTH=10 HEIGHT=9 ALT="* " BORDER="0" ALIGN="absmiddle">
<a href="#" class="subCat">Subcategory Three</a><br>
<IMG SRC="/images/pixel.gif" WIDTH=1 HEIGHT=3 BORDER="0"><br>
<IMG SRC="/images/arrowright_dkblue.gif" WIDTH=10 HEIGHT=9 ALT="* " BORDER="0" ALIGN="absmiddle">
<a href="#" class="subCat">Subcategory Four</a><br>
<IMG SRC="/images/pixel.gif" WIDTH=1 HEIGHT=3 BORDER="0"><br>
<br>
<a href="#" class="mainCat">Main Number Five</a>
<hr COLOR="#F9D449" SIZE="1">
<IMG SRC="/images/arrowright_dkblue.gif" WIDTH=10 HEIGHT=9 ALT="* " BORDER="0" ALIGN="absmiddle">
<a href="#" class="subCat">Subcategory One</a><br>
<IMG SRC="/images/pixel.gif" WIDTH=1 HEIGHT=3 BORDER="0"><br>
<IMG SRC="/images/arrowright_dkblue.gif" WIDTH=10 HEIGHT=9 ALT="* " BORDER="0" ALIGN="absmiddle">
<a href="#" class="subCat">Subcategory Two</a><br>
<IMG SRC="/images/pixel.gif" WIDTH=1 HEIGHT=3 BORDER="0"><br>
<div align="right"><a href="#" class="more">more...</a></div>
<br>
</TD>
</TR>
</TABLE>
Special Characters
Special characters should be coded with the appropriate HTML markup.
Style Example:
< > &
|
Code Example:
< > &
|
Lists of Links
Some HTML pages require an index that does not conform well to the two-column style listed below. An alternative method of formatting is as follows:
Style Example:
|
Code Example:
<TABLE CELLPADDING="4" CELLSPACING="0" WIDTH="50%">
<TR>
<TD>
<hr COLOR="#F9D449" SIZE="1">
<IMG SRC="/images/arrowright_dkblue.gif" WIDTH=10 HEIGHT=9 ALT="* " BORDER="0" ALIGN="absmiddle">
<A HREF="#intro">Introduction</A><BR>
<IMG SRC="/images/arrowright_dkblue.gif" WIDTH=10 HEIGHT=9 ALT="* " BORDER="0" ALIGN="absmiddle">
<A HREF="#create">Creation of the SEC</A><BR>
<IMG SRC="/images/arrowright_dkblue.gif" WIDTH=10 HEIGHT=9 ALT="* " BORDER="0" ALIGN="absmiddle">
<A HREF="#org">Organization of the SEC</A><BR>
<IMG SRC="/images/arrowright_dkblue.gif" WIDTH=10 HEIGHT=9 ALT="* " BORDER="0" ALIGN="absmiddle">
<A HREF="#laws">Laws That Govern the Industry</A>
<hr COLOR="#F9D449" SIZE="1">
</TD>
</TR>
</TABLE>
|
HTML & Other Code Elements
Samples of code should be placed within <BLOCKQUOTE> and <CODE> tags.
Style Example:
Insert your code here
Code Example:
<blockquote><code>Insert your code here</code></blockquote>
Misc Pages
Some misc. pages do not use the the standard header and footer. These pages can still make use of the other formatting standards by including the stylesheet as follows:
Code Example:
<script language="JavaScript" src="/include/sec.js"></script>
</HEAD>
This code includes the source to a javascript which will detect which web browser is viewing and include the appropriate style sheet. Netscape and Internet Explorer require different style sheets.
http://www.sec.gov/templates/styles.shtml
