Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: inserted WebAIM contrast checker; minor grammatical edits

...

If you have questions about headings (<h1>, <h2>, <h3>, <h4>,<h5>, and <h6>) we will talk about how they work and provide structure a little later.

Code Example

<head><title>Example Title</title></head>

...

This is the most important practice.   The purpose of the page title is to succinctly identify the purpose of a page.

Keep an eye on your title length

...

Focus on embedding SEO keywords in content instead.   It is fine to add one or two keywords in a title, but be sure it still identifies the topic or purpose of a page.

Put the unique information first

...

If you want to include your site's brand in each page title, put it last, after the unique information (with the possible exception of the home page).

...

In web circles, there is a lot of debate about which fonts are better than others, but one thing is clear.  Fonts : fonts with cursive, unusual shapes, or artistic features may look pretty, but they are harder to read than standard fonts like Times New Roman or Arial. Avoid them.

...

Serif stands for a stroke or line, and typically these fonts have an embellishment at the top and/or bottom of the letters.   Common Serif fonts include Times New Roman, Garamond, Baskerville, Georgia, and Courier New.

...

Sans means without, and typically these fonts are plainer and without any embellishments. Common sans-serif fonts include Arial, Verdana, and Helvetica.

  • This sentence uses Arial
  • This sentence uses Verdana

Which of these two is better for the web is up for debate. These days, it is more common to see sans-serif fonts on the web than serifSerif. One of the caveats when using sans-serif is that it is the possibility of confusion between upper-case I (as in Idaho) and lower-case L (as in linger). Usually, the context prevents this, but if you are mixing letters and numbers it might be better to use a serif font.

...

Choosing a color theme can be challenging sometimes, especially when you realize that some of your visitors can not distinguish between some color combinations.   This is color-blindness.

What follows are guidelines to keep in mind as you choose your color elements for your web pages.

  • Red/green color blindness is the most common.   There is also blue/yellow and complete color blindness.
  • Avoid putting red or green text on black backgrounds, or black text on red or green backgrounds.
  • Color contrast should meet a 7:1 standard in order to be easily seen by anyone. Use this WebAIM contrast checker to assist.

References for additional information

...