Skip navigation

Use header elements to convey document structure.

(see guidelines for overcoming access barriers)

For example, in HTML, use H2 to indicate a subsection of H1. Do not use headers merely for font effects.

Example:

Using header elements to convey the document structure:

This is a heading one

This is a heading two

This is a paragraph

This is a heading two

This is a paragraph

Code for a simple style sheet

h1 {
/* top, right, bottom, left */
   margin : 15px 0 2px 0;
   color: #444466;
   font-size : 140%;
   font-weight: bold;
  }

h2 {
/* top, right, bottom, left */
	margin : 5px 0 15px 45px;
	color: #000000;
	font-size : 135%;
	font-weight: normal;
}

p {
	margin : 5px 105px 5px 5px;
	text-align : left;
	font-size: 100%;
} 

Save this code in a separate .css file and link to it from within the html. The html page should look like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <title>CSS example</title>
   <link href="example.css" rel="stylesheet" type="text/css">
</head>
<body>
   <h1>This is a heading one</h1>
   <h2>This is a heading two</h2>
   <p>This is a paragraph</p>
   <h2>This is a heading two</h2>
   <p>This is a paragraph </p>
</body>
</html>

Back to top