Anatomy of a Webpage

There are lots of pieces to think about when creating a webpage. Here’s a quick guide to the most basic elements.

1 .Page Title

If we’ve done our job well, the page title should tell visitors exactly what they’ll find on the webpage.

• Keep it short Use clear language
• Make the first two words count
• Avoid internal jargon or acronyms

2. ID

The ID is a label assigned to the webpage that will appear at the end of the url.

• Use hyphens between words.
• Never use underscores or other characters.
• No capital letters.
• Use words that make sense.
• In almost every case, your page ID should use words found in your page title.
• Don't use obscure acronyms or abbreviations.

3. Description

The description is a one-sentence summary of your page. It’s important to use key words and phrases that you think visitors might be using as search terms.

Where your description might show up:

• Google search results page
• Facebook, comments threads, or any other website where someone might post a link to your page

4. Body

The body is the bulk of your webpage content. It’s the information you’re providing to help visitors complete their tasks.

• Put your information in priority order with the most important information first.
• Use short words, sentences, and paragraphs.
• Think about your user first. What is the information that they want to know?
• Are you using language that your users understand?
• Never use all caps unless it's a predefined style you cannot control. Use bold instead if you're wanting to convey emphasis.

5. Headings

Headings help users scan and find information quickly so they can assess if they're in the right place.

• Accurately describe the information in the section.
• Be clear and concrete.
• Use key terms or phrases that are relevant for users.
• Use powerful and active words.

When formatting your headings, use H2 for main headings and H3 for subheadings. Re-evaluate your content if you're needing H4 because your page can get messy in a hurry.

6. Lists

A list is a helpful tool for breaking down huge paragraphs or providing step-by-step instructions.

• Start with a capital letter.
• Place a period at the end of complete sentences.
• Use parallel language for list items (all fragments, all complete sentences, all questions, etc.).
• Use numbers if you’re outlining a process or concrete steps that a visitor needs to take.
• Visitors usually only see the first 2 words for each list item, so make those first 2 words meaningful.

7. Bold, Italics, and Underline

On the web, bold, italics, and underline each have a unique purpose.

Bold

Use bold for highlighting important info, such as an application deadline or fee. You can also use bold for key introductory phrases of bulleted lists.

Words of advice: if bold is overused, it’s no longer helpful. When too much is emphasized nothing stands out.

Italics

Use italics according to the Bethel Style Guide:

• Book titles
• Movie titles
• Titles of newspapers or publications
• Other items as noted in the style guide

Italics can also be used to consistently format a repeated piece of minor information.

Examples:

• Room locations on schedule of events for a conference
• Job titles on a staff list

Underline

Never underline text on the web. Visitors will mistake underlined text for a link. This leads to confusion and reduces the impact of what you were trying to highlight. Use bold for emphasis instead.

8. Links

Hyperlink meaningful phrases rather than single words or words that lack context.

• Phrases are easier to spot.
• Meaningful words help search engines scan and pick up useful information.
• Avoid using "here" and "click here."

Alert visitors when links will lead them to a document instead of a webpage by adding the appropriate tag at the end of the link:

• Bethel Undergraduate Catalog (pdf)
• Bethel Style Guide (doc)
• Bethel Expense Report (xls)

9. Call to Action

Nearly all webpages should provide visitors with a call to action. What do we want them to do with this information? What task have they come to perform?

It’s helpful to always give visitors a place to go from each webpage that’s related to the task at hand.