Tag Archives: Web Design

The Non-Designer’s Web Book Remark

The Non-Designer's Web Book Cover

The Non-Designer's Web Book Cover

One of my assignments in 502 for this week is to read about Basic Design Principles from the Non-Designer’s Web Book.  I really enjoy reading this book.  I just do not agree with the statement on pg. 121 about the solution to keep Headings close to the paragraph.  The author says: “The solution to keeping a headline close to its body copy: Use a Break, but don’t apply a Heading format.”  I do not know much about HTML and CSS, but I think that it is important to use Heading format for several reasons.

First of all, headings define the document structure.  Headings tell the reader what information is the most important.  For example, H1 (Heading 1 tag) is more important than H2 (Heading 2 tag), H2 is more important than H3, etc.

Secondly, headings are used by the search engines.  Each search engine prioritize the importance of headings differently, so it is important to write the code correctly.

Finally, according to the W3C Accessibility Guidelines it is recommended to use the headings as stated in the following section of the guidelines.

1.2.1 Section headings

Checkpoints in this section:

* 3.5 Use header elements to convey document structure and use them according to specification. [Priority 2]

Long documents are often divided into a variety of chapters, chapters have subtopics and subtopics are divided into various sections, sections into paragraphs, etc. These semantic chunks of information make up the structure of the document.

Sections should be introduced with the HTML heading elements (H1-H6). Other markup may complement these elements to improve presentation (e.g., the HR element to create a horizontal dividing line), but visual presentation is not sufficient to identify document sections.

Since some users skim through a document by navigating its headings, it is important to use them appropriately to convey document structure. Users should order heading elements properly. For example, in HTML, H2 elements should follow H1 elements, H3 elements should follow H2 elements, etc. Content developers should not “skip” levels (e.g., H1 directly to H3). Do not use headings to create font effects; use style sheets to change font styles for example.

Source: HTML Techniques for Web Content Accessibility Guidelines

Therefore, I have to disagree with the author on not using the heading tags.  I would use CSS instead to change the appearance and move the heading closer to the paragraph.

I would like to hear from others.  What do you think?  Should we use the heading tags or not?