Web Content Guidelines

The scope of this guide is centered around the mechanics of authoring web content. You should always research, investigate, plan, and experiment with how to resonate with your audience. These guidelines apply in most situations, but you may be able to justifiably break the rules depending on what your content is trying to communicate.

Guidelines for text

Reading text on-screen is 25% slower than reading from a print publication. As a result, users tend to scan content for parts that interest them.

We all like to imagine that every reader will be 100% engrossed with every word that we write, but there are usually many different types of people accessing your website. With them, these people bring different distractions, objectives, education levels, abilities to read content in your language, etc.

Style considerations

Limit paragraphs to –3 sentences

Nothing is more menacing on the web than large blocks of text. Ignore what you learned in school: there is nothing wrong with a paragraph that is only 1 sentence long.

1 space after sentences, not 2

You may have been taught in school that you should have 2 spaces after sentences. You should throw out that rule while writing web content and only include 1 space after periods, exclamation points, and question marks.

Don’t spell out numbers that represent facts

When you’re presenting facts online, it’s usually more effective to represent numbers as digits instead of spelling them out (e.g., it’s better to use 23 than twenty-three).

Guidelines from the Nielsen Norman Group:

• Write numbers with digits, not letters (23, not twenty-three).
• Use numerals even when the number is the first word in a sentence or bullet point.

• Use numerals for big numbers up to one billon:

  • 2,000,000 is better than two million.
  • Two trillion is better than 2,000,000,000,000 because most people can’t interpret that many zeros.
  • As a compromise, you can often use numerals for the significant digits and write out the magnitude as a word. For example, write 24 billion (not twenty-four billion or 24,000,000,000).
• Spell out numbers that don’t represent specific facts.

Know your HTML formatting

Anyone writing web content should know the basics of formatting text with HTML. Most formatting is a matter of breaking content into scannable chunks so that the reader can easily find parts that interest them.

Keep in mind that one of HTML’s sole purposes is to define the structure of your content, not to define how it looks.

Use headings and subheadings to summarize sections of content

HTML provides 6 levels of heading tags (<h1> through <h6>) so you can provide a hierarchy within sections of your page.

In general, your page structure should look something like this:

This example would translate roughly to this structure:

<h1> The Visible Title of Your Page
  <h2> A 2nd-level subheading
    <h3> A sub-subheading
      <h4> A sub-sub-subheading
  <h2> We're back at the 2nd level

Break key content into lists

One of the handiest ways to break down large blocks of text is to format shorter statements as list items. HTML provides numbered ordered lists (<ol>) and bulleted unordered lists (<ul>).

Be cautious of breaking super-long sentences and paragraphs into lists. You’re kind of defeating the purpose when you do that.

Example ordered list:

Example unordered list:

Use blockquotes to quote someone else

Sometimes the <blockquote> element is confused as merely a way to indent a block of text. Its actual use is to quote a person, article, or other source.

If you’re not happy about how blockquotes appear on the page, your web designer can use CSS to style blockquotes to look more attractive.

Example blockquote:

Mark up abbreviations

Using abbreviations and acronyms in your content can be confusing to readers. HTML provides a tag that allows you to define what an abbreviation stands for so users can learn by hovering over the word.

Example abbreviation:

Coding about code

References to code like variable names or simple statements should be marked up with the <code> tag:

References to blocks of code should be marked up with the <pre> tag:

In both cases, don’t forget to escape special characters within your code. Basic examples include the following:

Creating hyperlinks

Hyperlinks are one of the defining features of HTML. Here are some sure ways to be successful when linking to other pages and websites.

Make links absolute or site-root-relative

If you’re linking to a URL on your site, make the link site-root-relative (e.g., a link to http://www.example.com/about/staff should be linked up as /about/staff).

If you’re linking to a URL on another site, make the link absolute (e.g., http://www.example.com/about/staff).

When linking to an email address via mailto:, use the email address as the link text

Have you ever clicked a link whose text was “Email me” and then been angered because your email program started opening unexpectedly? Don’t let your users fall prey to this in your own web content.

Never do anything like this:

Always make it like this. Then you give the reader the option to highlight the text, copy it, and paste it into their email program of choice.

Guidelines for images

Make sure people in your photos look good

Avoid using stock photography. Visitors want to see your real behind-the-scenes people.

An investment in a professional photographer or good camera equipment/training is often a worthwhile. Photos come out sharp, crisp, and clear when you have the right skills and equipment.

If you have a photo featuring a person or a group of people, make sure their faces are at least as big as a dime. (This is a general rule of thumb because different screen sizes and resolutions will display the photo in a variety of sizes.)

Choose the correct format for each image

Web browsers understand a few different image formats universally, each with its strengths and weaknesses.

Use proper alt texts on your images

The alt attribute provides a description of the image for those who cannot see it.

Ideally, you should provide an alternate description for the job that the image is doing on the page.

• Is there text in the image? Repeat that text in the alternate description.
• Does the image relay an emotional sentiment or visual queue? Describe that, not just what’s in the image.

A better use of alt text in the example above would likely be this:

Store original version of images in a digital asset manager (DAM)

You will end up in various situations where you need to update an image in your content in some way. Storing an unedited original copy of all photos and graphics that you use in your content ensures that you’ll be able to start from the source when you need to change something later.

Related resources

• Be Succinct! (Writing for the Web), Jakob Nielsen, Nielsen Norman Group
• Show Numbers as Numerals When Writing for Online Readers, Jakob Nielsen, Nielsen Norman Group
• Everything you’d ever want to know about the alt attribute, Chris Peters