Mass.gov
Massachusetts Department of Elementary and Secondary Education
Go to Selected Program Area
Massachusetts State Seal
News School/District Profiles School/District Administration Educator Services Assessment/Accountability Family & Community  
> Administration Finance/Grants PK-16 Program Support Information Services  
>  WebTeam Home
>  Accessibility Support
>  Programming Standards
>  Conventions
>  ESE Logos

XHTML Tag Use

Introduction

These standards were originally written in 1999 as a framework for HTML coding at ESE. 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.
  • Special characters must be replaced with their ACSII equivalents.
  • 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 ESE web site, as it is untested.

  1. PARAGRAPHS <p>

    USAGE:
    defines a paragraph

    SYNTAX:

    		<p>this is a paragraph</p>
    		
    		<p> this is another paragraph </p>
    		

    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.

  2. 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>
    		

    this is a paragraph
    which is continued on another line without a line of white space.

    NOTES:
    <br > has no end tag

  3. 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>
    			

    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.

  4. 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>
    		

    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.
  5. 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:

    cellpaddingDefines the gutter surrounding each cell.
    cellspacingDefines 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>
    		
    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.

  6. 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>
    		
    • This is an item
    • This is another item
    • This is yet another item

    NOTE: We use the default ul type only (disc)

    stopline

    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>
    		
    1. This is an item
    2. This is another item
    3. This is yet another item

    NOTES:
    Use styles to define list types a, A, i and I. Default ol style is 1

  7. 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>
    		
    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.

  8. IMAGES: <img>

    USAGE:
    Inserts an image in the document

    SYNTAX:

    		<img src="image.gif" alt="image" width="150" height="150" />
    		

    ATTRIBUTES:

    src The URL of the image.
    alt 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.

  9. ANCHORS: <a>

    USAGE:
    Used to define links and anchors

    		<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>
    		
    Go to the home page
    Go to the location named 'bottom'

    ATTRIBUTES:

    href URL of page linked page
    id named location in an HTML document
    title primarily for accessibility, adds hover text
    class style sheet reference


  10. FORMS & LABELS:

    TEXT INPUT USAGE:
    single line input control

    ATTRIBUTES:

    	<label for="txtName">What is Your Name? </label><input type="text" name="txtName" id="txtName" size="30" />
    	

    stopline

    TEXT AREA USAGE:
    multi-line input control

    ATTRIBUTES:

    stopline

    RADIO BUTTON USAGE:
    on/off switch toggled by user, if several share same control name they are mutually exclusive.

    stopline

    CHECKBOX USAGE:
    on/off switch toggled by user, several may share same control name

    stopline

    SELECT &OPTION USAGE:
    creates a select menu and options

  11. 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="help.asp">Floating Link</a></p>
    		</div>
    		

    This is how to split a title
    on 2 lines without lots of white space



bottom of page



Last Updated: June 11, 2008
E-mail this page| Print View| Print Pdf  
Massachusetts Department of Elementary and Secondary Education Search · Site Index · Policies · Site Info · Contact ESE