These standards were originally written in 1999 as a framework for HTML coding at DESE. They have been adjusted a few times over the years to reflect changes in (X)HTML code, accessibility requirements and browser versions. These tags have been tested with Internet Explorer Version 5+, Opera version 6+, Safari and Mozilla Firefox version 1+.
General Conventions:
Code must be well formed, (properly nested).
CSS is used to define all formatting, including bold, italic, alignment and list styles.
All tags, attribute names and values must be lower case.
Attribute values must be in quotes
Do not use deprecated Tags such as: FONT, STRONG, EM, B, I, CENTER, U, PRE.
All tags must be closed, including empty elements, (start tag must end with />).
All content shall be left-aligned.
ALT Tags are required, use alt= " " for images used as spacers.
All pages must be validated according to XHTML 1.0 Transitional, either from within HomeSite or via an external validator such as The W3C Markup Validation Service or HTML Tidy.
Pages are to be updated to our current standard as time permits. more conventions
Tags and Usage
The following is the current list of tags and their implementation for use in the HTML body.
Formatting of the HTML code should be followed strictly in accordance with the examples in order to maintain consistency in both document structure and display.
If a tag is not listed on this document, then its use is not recommended on the DESE website, as it is untested.
PARAGRAPHS <p>
USAGE: defines a paragraph
SYNTAX:
<p>this is a paragraph</p>
<p> this is another paragraph </p>
EXAMPLE:
this is a paragraph
this is another paragraph
NOTES: <p> is a block element. A line of white space is inserted on either side of a <p> tag. Always use end </p> tag. Keep the content of a paragraph on a single line in the editor, no word wrap.
LINE BREAK <br />
USAGE: forces a line break
SYNTAX:
<p>this is a paragraph<br />
which is continued on another line without a line of white space. </p>
EXAMPLE:
this is a paragraph
which is continued on another line without a line of white space.
NOTES: <br > has no end tag
HEADINGS <h1>, <h2>, <h3>, <h4>, and <h5>
USAGE: used in the <body> to structure information hierarchically
SYNTAX:
<h1>This Is A Heading Tag Example</h1>
<h2>This Is A Heading Tag Example</h2>
<h3> This Is A Heading Tag Example </h3>
EXAMPLE:
This Is A Heading Tag Example
This Is A Heading Tag Example
This Is A Heading Tag Example
NOTES: <hx> is a block element. A line of white space is inserted on either side of a Heading Tag. We generally use only up to <h4> Browsers display the size of the headings in relation to their importance and Search engines rank the content of headings in relation to the hierarchy. Headings must begin at <h1> and proceed sequentially down to the lowest value.
BLOCKQUOTE <blockquote>
USAGE: Used to display long quotations.
SYNTAX:
<p>Here's a bunch of content. Here's more fascinating content. This is the rest of the content. </p>
<BLOCKQUOTE>This is a introductory quotation which will be indented from the rest of the content. Blockquote is often used to display long quotations.</blockquote>
EXAMPLE:
Here's a bunch of content. Here's more fascinating content. This is the rest of the content.
This is an introductory quotation that will be indented from the rest of the content. Blockquote is often used to display long quotations.
TABLES:
USAGE:
<table>
Defines a table.
<th>
Defines a table header
<tr>
Defines a table row
<td>
Defines a table data, (cell)
<caption>
Defines a table's caption, optional
TABLE ATTRIBUTES:
cellpadding
Defines the gutter surrounding each cell.
cellspacing
Defines the gutter within each cell.
scope
Specifies the set of data cells for which the current header cell provides header information. Example: scope="row" means the current cell provides header information for the rest of the row that contains it.
SYNTAX:
<table cellspacing="0" cellpadding="0" class="borderall">
<caption>caption describing what the table is all about</caption>
<tr> <th>1st heading</th><th>2nd heading</th></tr>
<tr><td> Row 1 column 1</td> <td>Row 1 column 2</td></tr>
<tr><td> Row 2 column 1</td> <td>Row 2 column 2</td></tr>
</table>
EXAMPLE:
caption describing what the table is all about
1st heading
2nd heading
Row 1 column 1
Row 1 column 2
Row 2 column 1
Row 1 column 2
NOTES: Every table must have a specific cellpadding and cellspacing value. In general use cellpadding = 4 cellspacing = 0 and (if using a border) class = borderall.
LISTS:
UNORDERED LIST: USAGE:
<ul> Creates an unordered list.
<li> list item
UNORDERED LIST: SYNTAX:
<ul>
<li>This is an item</li>
<li>This is another item</li>
<li>This is yet another item</li>
</ul>
UNORDERED LIST: EXAMPLE:
This is an item
This is another item
This is yet another item
NOTE: We use the default ul type only (disc)
ORDERED LIST: USAGE:
<ol> Creates an ordered list.
<li> list item
ORDERED LIST:SYNTAX:
<ol>
<li>This is an item</li>
<li> This is another item</li>
<li> This is yet another item</li>
</ol>
This is an item
This is another item
This is yet another item
NOTES: Use styles to define list types a, A, i and I. Default ol style is 1
DEFINITION LISTS:
USAGE:
<dl> defines a definition list
<dt> defines a definition term or label
<dd> defines a definition description
SYNTAX:
<dl>
<dt> This is definition term 1</dt>
<dd>This is definition description 1.1</dd>
<dd> This is definition description 1.2</dd>
<dt> This is definition term 2</dt>
<dd> This is definition description 2.1</dd>
<dt> This is definition term 3</dt>
<dd> This is definition description 3.1</dd>
<dd> This is definition description 3.2</dd>
<dd> This is definition description 3.3</dd>
</dl>
EXAMPLE:
This is definition term 1
This is definition description 1
This is definition description 2
This is definition term 2
This is definition description 2.1
This is definition term 3
This is definition description 3.1
This is definition description 3.2
This is definition description 3.3
NOTES: Must contain at least one <dt> or <dd> element in any order. Definition descriptions display indented from their definition terms.
Alternative text to display. REQUIRED to meet accessibility standards
height
The height of the image.
width
The width of the image.
NOTES: Every image must have height, width and alt values; Use alt=" " for images used as spacers.
ANCHORS: <a>
USAGE: Used to define links and anchors
SYNTAX:
<a href="index.html" title="go to home page">Go to the home page</a> <br/>
<a href="index.html#bottom">Go to the location named 'bottom'</a><br/>
<a id>bottom of page</a>
<label for="txtName">What is Your Name? </label><input type="text" name="txtName" id="txtName" size="30" />
EXAMPLE:
TEXT AREA USAGE: multi-line input control
ATTRIBUTES:
SYNTAX:
EXAMPLE:
RADIO BUTTON USAGE: on/off switch toggled by user, if several share same control name they are mutually exclusive.
SYNTAX:
EXAMPLE:
CHECKBOX USAGE: on/off switch toggled by user, several may share same control name
SYNTAX:
EXAMPLE:
SELECT &OPTION USAGE: creates a select menu and options
SYNTAX:
EXAMPLE:
span and div:
USAGE:
<span> apply a style to text which doesn't play any structural role, or where use of standard XHTML elements is not desirable.
<div> a block element that is basically used as a 'container' to contain other XHTML elements and display them discretely from the rest of the document. div tags can be used to float a navigational element on a page.
SYNTAX:
span
<h1>This is how to split a title <BR><span class="nav">on 2 lines without lots of white space</h1></span>
div
put this part in the head of the page
<style type="text/css">
<!--
#help {position: absolute; left: 248px; top: 5520px;}
-->
</style>
this goes in the body, doesn't really matter where it is located, but for clean code, put right after the <body> tag
<div>
<p class="nav"><a href="htmlhelp.html">Floating Link</a></p>
</div>
EXAMPLE:
This is how to split a title on 2 lines without lots of white space
