The style of your page text and the structure of that text on the page has a huge influence on the readability of your content. Remember that if your site visitors cannot easily find the information they need on your page, they will quickly leave and go elsewhere. So here are some quick tips.
Topics:
Titles
I do not favor the use of the Title style on a web page. Rather, the Title style should be reserved for the name of the website and thus is defined only once for the entire website. This is done often from within the structure of the chosen platform, sometimes referred to as the site’s framework. Do not ‘reset’ the title text on each page of the website even though the value is the same and never define different Title text on different pages.
Landmarks
Perhaps you never heard the term Landmarks with regard to web pages. However, you probably recognize that most web pages are divided into sections. If you are starting with an existing framework provided by your website editor, these sections may have already been defined for you. They include things like the menu, the banner, one or more content areas, and possibly a footer area that is the same on every page with the site and includes perhaps contact information for the organization.
Typically, if you are using a site template, it already has different landmarks and content areas. As a content editor, you may not have the ability to change landmark areas without having access to and knowledge of how to access the page framework. One feature the framework should have is a Bypass Blocks option which allows users of screen readers to jump immediately to the first major content section. This is required by ADA (Americans with Disabilities Act) for websites so that vision-impaired people can immediately jump to the main content areas much like a sighted person automatically does.
Some designers may refer to the definitions of the page landmarks as the page framework or the wireframe of the page. A website can have several different page styles with some common landmarks like a menu, banner, and footer, and other landmarks that differ by page perhaps having different content areas or content areas with different sizes. Often the definition of page landmarks for the site’s home page differs from the rest of the site’s content pages. Whether the other content pages share a single landmark layout or alternate between a small set of different layouts is up to the site’s designers.
Headers
Most websites have multiple pages. Therefore, while the site may be defined by the Title style, each page begins with a page name often defined using the H1 style. Within a page, content can be further broken down into subtopics following the hierarchy identified with styles H2, H3, H4, H5, and H6. Each heading level further subdivides the topic of that web page into smaller subtopics. On many platforms, the page header is automatically assigned to the H1 header style. As a result, a page can only have one H1 definition. In addition, each page should have a unique H1 text value across the entire website. Another way of saying this is that each page should have a unique name within the website. Why? Thinking in terms of a hierarchy with Title defining the website as a whole, the page names must uniquely define each page within the site.
Within a page, you can have as many main topics as necessary with each one defined using the H2 header. If a topic defined with an H2 header needs subtopics, then use H3 headers. Further division of the topics may require additional levels using H4, then H5, etc. But here is an important point that ADA (Americans with Disabilities Act) emphasizes, you can never skip a level as you go into subtopics. In other words, you cannot immediately follow an H2 topic with an H4 topic without first having an H3 topic. On the other hand, if you finish the text in an H4 subtopic, can you follow that with an H2 topic without another H3 topic. Of course! The rule about not skipping a level only applies on the way down, not on the way back up. A future post will illustrate this in more detail.
While most site editors have predefined styles for each header level, you should NEVER use headers merely to provide a style to the text. Header tags should only be used to define subsequent subsections in your text. Think of the fact that they also provide a font style as simply a way to make the font style of each header level consistent across all pages.
In theory, you can go deeper than H5, but honestly, more levels are rarely needed nor understood.
If you have a very long document, more than perhaps 2 screens full of text, I strongly recommend breaking the text into sections with headers. The degree to which you also divide each section into additional subsections can be viewed in a similar way.
If a page’s content is short and of a singular purpose, it may not even need an H2 level with the page name defined in H1 sufficient to identify the topic of the page.
If you have a very long page with many sections and subsections, it is often best to create a table of contents at the top of your document that provides links to each of the headers so that a visitor to your site can quickly jump to the section of interest. Even for sighted people, reading through a long page to find the information they want can be painful, but imagine the difficulty of finding the information you need if you are blind and have to listen to the entire page to find the information you need. A future post will detail how to build this type of Table of Contents for your page if your page editor cannot do it for you.
Paragraphs
Have you ever opened a web page and the content was one long single paragraph that when on and on as you scrolled and scrolled down the page? I have. I hated it.
Your text should be broken into paragraphs that each present a single thought. This helps the reader understand your text because it is natural to assume that a new paragraph means a new thought and not a continuation of the prior one.
Paragraphs do not need to be indented, but you can indent the first line as long as you do that consistently throughout your site. Honestly, though, indented paragraphs are not seen often in web page content.
Alignment is another issue that I have seen misused and abused. For the most part, your text should be left-aligned. Right aligning paragraphs is extremely rare. For cultures that read left to right, the eye has been trained to quickly find the beginning of the next line with left-aligned text because it is always in the same place. With right-aligned text, there is a fraction of a second in which the eye must determine where the next line begins horizontally. This fraction of a second makes it harder to read the text. For a similar reason, center-aligned text, while acceptable for titles and headers, is not acceptable for the body of paragraphs.
Strikethrough text should only be used if the reader needs to see changes to the original text as well as the final text such as in legal documents. For the average website, rather than use strikethrough text to remove text no longer needed, just delete the text.
NUEWeb 