Skip to Page Content | Navigation for Module


Navigation for Module 9: HTML
Page 7 of 16

  1. *Introduction
  2. *Files You Need
  3. *Basic Concepts
  4. *Images
  5. *CSS
  6. * Textual Elements
    1. Lab: Textual Elements
  7. *Forms
  8. *Tables
  9. *Plug-ins
  10. *Image Maps
  11. *Resources

Textual Elements in HTML

Proper Use of Headers

When designing a well-formatted Web page, it is important to consider structure first before presentation. Because various Web browsers will render the content differently, it is imperative that elements such as "h1" and "h2", are only used to mark section headers. While it might be tempting to use the "h1" tag to denote a large font text block, avoid doing this to ensure proper accessibility and formatting of your document.

In addition, headers should be well-formed and structurally correct. For example, headers should make sense logically, breaking up sections and subsections in an "outline" type style. One should only progress to a subsection header after establishing a "higher" header.

The following examples can help to clarify:

This use of headers is appropriate because there is a logical progression

"up" and "down" the header chain:
<h1>Main title</h1>
<h2>Sub Point 1</h2>
<h2>Sub Point 2</h2>
<h3>Sub Point 2.1</h3>
<h3>Sub Point 2.2</h3>
<h2>Sub Point 3</h2>

The following use of headers is inappropriate because the logical progression is disjointed and does not progress from one "level" to the next:

<h1>Main title</h1>
<h3>Sub Point 1</h3>
<h3>Sub Point 2</h3>
<h1>Sub Point 2.1</h1>
<h4>Sub Point 2.2</h4>
<h4>Sub Point 3</h4>

Note: The overall rule to follow when using headers is to treat your document's use of headers like an outline. If the headers convey a natural ordering of the sections of the document and if the headers do not "skip around" and do not skip "levels" of heading, then your use is appropriate.

Using HTML Elements Properly

Some elements that are commonly used have become deprecated with the advent of new, style sheet-based text formatting. The following is a list of items to consider:

"What you see is what you get" (WYSIWYG) editors, such as Macromedia Dreamweaver or Microsoft Front Page, allow you to easily format your documents, but they can also encourage poor formatting techniques. Here are some of the guidelines that you must follow to ensure accessibility in your HTML documents:

The following lab focuses on textual elements within HTML.

Top of Page arrow up
       Page 7
Next Page Next
Page 8:
Lab: Textual Elements


 
-- END OF PAGE