Branding + Websites + Communications + Advertising

St. Paul, MN

« Bogie Thoughts
end of content

Develop a Web Style Guide for Your Company

Add a style guide that is unique to your online writing

By now, you must have checked out my article Develop a Writing Style Guide for Your Company. Now you are ready for this companion article. Just as writing for print has specific considerations—postal conventions, brevity in the case of billboards, etc.)—writing online adds usability, interaction (UX), search-engine optimization (SEO), and semantic organization principles.

Resources for writing online

Loading …

bold, underline, italic

Use bold sparingly. The less you use it, the more powerful each instance of it is. If more than 10% of your page is bold, you have too much bold. Use HTML headings for headings not bold.

Never underline text. Underlining should be an indication of a clickable link. If you underline other text, readers will expect to be able to click it and think your site is broken if they can’t.

Follow your style guide for use of italics and be consistent.

headings

HTML makes several levels of headings available to us. We use them to make our pages easy to scan. A typical page uses heading like this:

One Heading 1 <h1> per page. This is generated by the page title in the WordPress database. Use title case for your page titles (capitalize each major word).

A few Heading 2’s <h2> that break the page down into its main content areas. Use sentence case (capitalize first word and proper nouns).

Within each <h2>, we use Headings 3 and 4 to break that content down further. <h3> and <h4> can be adjusted to look larger or smaller using Bootstrap. I add Bootstrap to all my work. It gives me many options for adjusting the look of content without having to write specific CSS to style elements. Continue to use sentence case for all subheadings.

What is Bootstrap?

Bootstrap is a free tool that helps us make websites look professional and work smoothly across phones, tablets, and computers—automatically.

Its ready-made design pieces let content writers and editors quickly update text, images, or layouts in their site editor without learning CSS or adding additional styles to stay mobile-friendly.

line breaks

Do not force line breaks. Modern websites are responsive and people view pages on many sizes of devices from mobile phones to tablets to laptop screens and even large, curved gaming monitors. You may be tempted to force a line break you think looks great on the screen you are editing it with but can easily look like a mistake on other screen sizes.

Often you don’t want a product name or company name to break in the middle. A fix that doesn’t force a line break, but will keep those words on the same line is to add a non-breaking space between the words. Find your text in the CODE view of the WordPress classic editor (or view HTML in the WordPress block editor or other CMS) and replace the spaces between the words you want to keep together with &nbsp;.

Correct

    • links should be descriptive of what comes next and use words that match the title of the destination page
    • and open in a new window when there is no navigation on the page to be opened, examples:
      • PDFs/images
      • external websites
      • slideshows or videos

Incorrect

    • links should not be placed in the middle of a paragraph (there are exceptions where it makes sense, but as a rule, put your link on its own line)
    • or show the https://
    • or simply say “click here,” “here,” or “more”

Think of your website users as being there for the first time or being there for the thousandth time. Make it easy for first timers to scan the page for important links. Make it easy for the person using your website regularly to always be able to find links at the start of a new line. Links in the middle of paragraphs break up readability of the paragraph and move all over as screen and window sizes change.

should indicate that they are email links

Correct

Email

Contact Terrence Bogie at

Incorrect

Email Bogie

Terrence Bogie

when printed, the email address is lost

I can develop a technique for you to provide email links on your website that look like the real email address and launch a new email when clicked, but don’t appear as email links to bots. For example, .

Read more about how to avoid spam emails

links to PDFs

PDFs are so 1990s. Add the content to a web page rather than upload a PDF file. The website is accessible by default, where the process of making a PDF accessible is time consuming and/or expensive. If you have to link to one, you should make it accessible, indicate the link is to a PDF, and tell how large the file is.

Correct

Inver Grove Brewing Menu January 2026 PDF, 514 KB

Incorrect

Inver Grove Brewing Menu January 2026

Minneapolis-St. Paul vs. Twin Cities

For brevity and search engine purposes, use “Twin Cities” interspersed with “Minneapolis-St. Paul” on the web.

people in headlines

When writing a headline about someone’s accomplishment, use the person’s name in the headline. We want people searching for those names to find our pages. News sources love to obscure the subject of their articles to get you to click to find out who it was. That’s not what you want for your people. You want their names out there as much as possible.

Correct

Kirill Kaprizov receives Pavel Datsyuk Award for Excellence in Suprise Wristshots

Minnesota North Star Dino Ciccarelli received the Jim Mahon Memorial Trophy as highest scoring right winger in the OMJHL

Incorrect

Minnesota Wild wing receives Pavel Datsyuk Award for Excellence in Suprise Wristshots

Legendary North Star received the Jim Mahon Memorial Trophy as highest scoring right winger in the OMJHL

websites SSO + UX + anti-spam + bootstrap + formatting + headings + semantic web + writing headlines

More Bogie thoughts

« » back to top