Before you can start optimizing your site for search engines, you need to determine what terms users would type into a search engine in order to find your site; these are known as keywords and key phrases.

You then need to include these keywords and phrases in the copy for your site. There are four places where it is important for these words and phrases to appear:

It is important to remember that search engines rely on text; they cannot see what is in images (other than in the alt text that you provide on images and in filenames). Therefore, if you can incorporate the keywords and phrases that you have identified into these four parts of your pages, your site is more likely to get picked up by search engines.

You can further help the search engines by carefully structuring your documents, and using semantic markup. A good way to add structure to your pages is to organize the sections of pages using headings that describe what will be found in the following paragraphs, lists, images, and forms. Furthermore, elements such as the <address>, <cite>, <code>, and <em> elements help describe the information that will be found inside those elements.

I hope that all of the preceding information seems straightforward and easy to implement. For many people, the biggest problem regarding SEO is in identifying the keywords and phrases that they should be using in the first place, and that is what we will be focusing on in this checklist.

When choosing keywords and phrases, it is very important to remember that in most cases, it is important to focus not just on attracting volumes of users, but also on attracting the right kind of visitors. For example, if you are creating a site for a service that is offered locally, such as slate roofing, then you probably are not interested in people who:

Therefore, getting 10,000 people to visit you by searching for "new roof" is not likely to be as valuable to you as getting 100 people who are looking for "slate roof Chicago."

It is also important that the page people find in the search engine has a title and description that relates to the keywords people are using when they search, because the titles and descriptions are commonly displayed in search engine results. If users do not think the page looks relevant (by looking at the information the search engine returns), they are less likely to click on the link to your page.

So, in order to come up with the search terms you are going to use on your site, use the steps in the following sections.

When search engines calculate where to position your site on a list of search results, the major search engines will consider the number of sites that link to you.

The search engines are not just looking for any site that links to you, but rather for sites that contain terms similar to those that people are entering into search engines in order to find your site. For example, a search engine would not consider a link from an acupuncture site to a site about slate roofing as having the importance of a link between a building projects site and a site about slate roofing.

Search engines also look at the words that appear between the opening <a> tag and the closing </a> tag. If the text in the link contains keywords, the search engines will consider that link more relevant than one that just says something like "Click here."

If you use analytics software on your site, then you will be able to see which sites are linking to you. You can then use this information to find more sites that cover similar topics and see if they would like to cover you, too.

When creating any new document, you should:

In Chapter 1, you met lots of elements that are used to mark up text. You should always try to use these elements to add structure and semantic information to the words on the page. Where possible:

As you saw in Chapter 2, links are one of the key things that differentiate the Web from other media. Your links need to be as accessible as possible so that people can navigate your site. When you are creating links:

Images, audio, and video (as you saw in Chapter 3) can really bring a page to life. But assistive technologies used by those who have vision impairments are unable to describe the content of an image, audio file, or video. Therefore, there is one key rule for all kinds of multimedia content: Always provide a text description for non-text content. To achieve this:

Color is an important part of any web site, but color blindness is far more prevalent than most web designers realize. When creating a page, color can help add information and organize the page. However:

We looked at creating tables in Chapter 4. When you create a table you should:

Chapter 5 introduced forms, which you will need to use if you want to collect information from visitors to your site. I then discussed them again in the chapters that covered JavaScript. Some instructions for their use follow:

You looked at CSS in Chapters 7 and Chapter 8. Using CSS to control the presentation of a document will automatically help improve accessibility of the page (because style sheets can be overruled by a user when necessary). But you should still:

JavaScript was covered in Chapters 11 and 12. It is important that your pages work even if the user does not have JavaScript enabled. Here are some instructions that help ensure your scripts do not compromise the accessibility of pages:

One topic not covered in the main part of the book is the creation of skip links. These are links that allow people who use screen readers (rather than visual browsers) to skip over the common content that appears on every page, such as the header and main navigation. Imagine that you are browsing the Web using technology that reads every single page to you; you can see that on sites where you viewed many pages, it would not take long to get tired of hearing the same header repeatedly every time you moved to a new page.

The solution to this problem is a technique generally known as skip links or skip navigation. It simply involves creating links to specific parts of the page, such as the main content, and then hiding those links from users who are browsing visually using CSS. For example, take a look at the following links after the opening body element:

<body>
  <div class="skip-links">
    <a href="#content">skip to main content</a>
    <a href="#search">skip to search</a>
    <a href="#footer">skip to footer</a>
  </div>

These links correspond to id attributes of <a> elements in the relevant sections of the page. For example, the first <h1> element might look like this:

<h1><a id="#content">Introduction to Accessibility</h1>

The links at the top of the page are hidden using a CSS rule like this so that visitors using a normal visual browser do not see the skip links:

.skip-links {display:none;}

This makes browsing a site much more pleasant for those who are having the site read to them.

In HTML you could use a mix of uppercase and lowercase characters:

<P>Here is a <b>bold</b> word in a paragraph</P>.

In XHTML, all tag names and attribute names must be written in lowercase:

<p>Here is a <b>bold</b> word in a paragraph</p>.

In HTML, you could have attributes that did not have a value, and the values did not need to be in quotation marks:

<form method=post>

In XHTML, all attributes must have a value (the value can just be the name of the attribute if no other is given), and they must be given in double quotation marks:

<form method="post">

In HTML, you may find that some elements are not placed entirely within one element; the opening tag may sit inside one element and be closed outside that element:

<p>Here is a paragraph, the second half <b>will be in bold.</b></p>

In XHTML, if an opening tag sits inside another element, the closing tag must also sit within the same element:

<p>Here is a paragraph, the second half <b>will be in bold.</b></p>

In HTML, you might see an empty element written like this:

<img src="images/test.gif" alt="Test image">

In XHTML, there should be a forward slash character before the closing angled bracket to indicate that the element is empty:

<img src="images/test.gif" alt="Test image" />

In HTML, scripts and style elements could be included in a document, even if they included characters such as & or <:

<script type="text/javascript">
test(value1, value2) {
  if ((value1 < value2) && (value1.length > 5)) {
    x = true;
  }
}
</script>

In XHTML, scripts should live inside a CDATA section like so:

<script type="text/javascript">
<![CDATA[
test(value1, value2) {
  if ((value1 < value2) && (value1.length > 5)) {
    x = true;
  }
}
]]>
</script>

In order to be backwards compatible with earlier versions of HTML, the markup of HTML 5 will not be as strict as that of XHTML.

Authors can used mixed case in tags and attributes (rather than all lowercase), closing elements may be missed, and not all attributes need to have values or be given in quotes.

There will be a new doctype declaration:

<!DOCTYPE html>

Certain deprecated elements are being removed, including <big>, <center>, <font>, <s>, <strike>, <tt>, and <u> because these effects should be achieved by CSS. Frames and their associated markup are also being removed (although the <iframe> element is likely to remain part of the specification).

Presentational attributes such as align, background, bgcolor, border, cellpadding, cellspacing, char, compact, height, marginheight, nowrap, size, type, and width are all being removed.

Having said this, in practice browsers are still likely to support these older elements so that they can render older pages, which means that these elements may still work.

There are several new elements and attributes that reflect the typical use of modern sites. Several of these are semantic replacements for the generic <div> and <span> elements that are used to group parts of pages. Here are a few examples:

To see how this new markup might be used in practice, let's look at an example of how you might create a page today using <div> elements to group together parts of the page, and then we can look at how these new elements in HTML 5 would be used to recreate the same page:

<div id="header">
  <div id="navigation"></div>
</div>
<div class="article">
  <div class="section"</div>
  <div class="section"</div>
  <div class="section"</div>
</div>
<div class="side_widget"></div>
<div id="footer"></div>

Now, if we look at how the same structure might be represented in HTML 5 you can see that the new elements add semantic information that explains what will be found in that section of the markup, rather than just grouping elements using a generic <div> element:

<header>
  <nav></nav>
</header>
<article>
  <section></section>
  <section></section>
  <section></section>
</article>
<footer></footer>

The <input> element can take new values for the type attribute, including:

Other new elements provide ways to integrate specific types of content, such as the <audio> and <video> element, without relying on plug-ins. The <audio> element will allow MP3s to be embedded into the page; the <video> element is more controversial at the time of this writing, as browser manufacturers are struggling to agree on one common format that all browsers will support.

HTML 5 will also be able to use SVG and MathML inline.

In addition to the Document Object Model (which you learned about in Chapter 11, which introduced JavaScript), new interfaces are being developed that cover the following:

All the information in this section is still subject to change over the next few years until those working on the HTML 5 specification have finished it. Once the specification has become final, it is likely that many visitors to sites you develop will still be using older browsers, so you may not be able to use these new features for another few years. Having said this, many browsers are starting to implement some of the features discussed in this section, and you should be able to experiment with them over the next few years as they develop.