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.
Page TitleIf 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
IDThe 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.
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
BodyThe 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.
HeadingsHeadings 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.
ListsA 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.
Bold, Italics, and UnderlineOn the web, bold, italics, and underline each have a unique purpose.
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.
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
- Room locations on schedule of events for a conference
- Job titles on a staff list
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.
LinksHyperlink 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."
- Bethel Undergraduate Catalog (pdf)
- Bethel Style Guide (doc)
- Bethel Expense Report (xls)
Call to ActionNearly 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.