Headings, Paragraphs, Links, and Lists

Headings

Use HTML headings for content headings and subheadings. Since users often skim web pages by its headings, write your headings to send your intended main messages. DO NOT USE headings to simply make the font size larger. The following are examples of the six heading tags:

<h1>heading1</h1>

<h2>heading2</h2>

<h3>heading3</h3>

<h4>heading4</h4>

<h5>heading5</h5>
<h6>heading6</h6>
Search engines use your headings to index the structure and content of your web pages. Also, headings & subheadings establish content hierarchy. This is especially important for assistive reading devices.

Paragraphs

Paragraphs are defined with the <p> tag. Be sure to use the closing </p> tag.

Links

In general, main content text links should have a style text-decoration such as underline (not just color) to identify the text as links. Then, the link’s text-decoration would change to none (not just color change) upon hover.

Do not use click here as link text. Describe where the link will direct the user.

When linking to a file, add parenthetical text after the link indicating the file type. For example, a text link to a PDF should resemble this example text link (PDF).

Lists

Ordered lists are created with the <ol> tag with <li> tags for the list items. Example code follows:

<ol> 
    <li>List item1</li> 
    <li>List item2</li> 
    <li>List item3</li>
</ol>
 

Unordered lists are created with the <ul> tag with <li> tags for the list items. Example code follows:

<ul> 
    <li>List item1</li> 
    <li>List item2</li> 
    <li>List item3</li> 
</ul>