HTML and CSS books
 

Website Source Code

In case you came to this page first, notes below relate to this HTML example page. The two combine to offer details on using website source code to help visitors and search engines. As an incidental point, the example page is XHTML, with HTML5 the latest development but core principles are much the same.

  • Doctype Declaration
  • The first two lines in the example are the Doctype declaration. A missing, or incorrect Doctype puts browser software in quirks mode and can cause interpretation problems. There are various Doctypes, the point is to work accurately to the one you choose.
  • The Head Section
  • Between <head> and </head>, containing information for browsers or search engines but not visible to website users. You may see more lines similar to those between the <meta> and </meta> tags, although most are not needed. A number have not been officially adopted, or just restate the default.
  • Keywords Tag
  • Beginning <meta name="keywords"http://www.websitereport.org.uk. Meant to provide search engines with an indication of page content. Unfortunately abused and the tag is not now used by major search engines. For minority engines only, or a reference when you come back to the page.
  • The Title Tag
  • Between <title> and </title> forms the phrase seen on screen in browser tabs and in most cases, the top line displayed in search results. Useful in catching the eye of searchers and a well chosen title tag is a factor in search engine indexing:
  1. 1. Each tag should accurately describe each page. Using the same one from page to page, or throughout a website is little use to visitors and poor practice for search engines.
  2. 2. Entries such as "<title>Page 5</title> are unhelpful, <title>About Us</title> little more so. Choose a page specific title, which helps search engines offer the page to visitors you want to see.
  3. 3. <title>CSS Navigation</title> is at least descriptive but <title>CSS Navigation - Drop Down Menus</title> could help indexing and those searching choose the page.
  4. 4. Whether to use a shorter or extended title depends on each situation but going over the top is not good. Avoid repetitive wording, or too many "useful" words in title tags, as likely to hinder search progress as help.
  • Description Tag
  • Starting <meta name="description"http://www.websitereport.org.uk.. A source for the wording under the title in search results, with page relevance again valuable. Otherwise the search snippet may be drawn from other on page sources, or as with the title, from the Open Directory Project (DMOZ). Whilst the description tag has no effect on rankings, this can make potential visitors take more interest.
  • Structural Header Tags
  • Within <body> and </body> you see text between <h1> and </h1> or <h2> and </h2>. This is a website's headline text, displayed by browsers in larger fonts but you can use your own styling. Our example is a short page, they could run to <h3> or further and more than one of each tag is fine. Ideally but not essentially in proportion to the tags number, two h2, three h3. They help users pick prime areas and search engines to a minor degree.
  • Images Alt Tags & File Names
  • <img src="images/code_editor.jpg" alt="Screenshot of HTML editor" title="" is used to insert an image in the page, which a search robot can not see. The words within alt="" (alternative text) help them understand, along with visitors who can't see images. For their sake and search keep tags short, descriptive, no harm including words reflecting search terms. Same for the page, surrounding text and file names, code_editor.jpg better than img_045.jpg. Alt tags, context and image names help search engines index images and these draw traffic.
  • Using Title Tags
  • You will also see a title="" tag in the image line, the content shows on screen when a visitor hovers their mouse on the image. A design decision in terms of desirability and having content in title="" is not relevant to search indexing. The reason an empty tag exists is to stop Internet Explorer displaying alt text in place of a title. Title tags can also be used on links, perhaps on navigation to explain the purpose. Again, a design issue more than optimisation. The best contribution in that area is applying an alt tag when an image is used as a link.
  • Links & Anchor Text
  • Links are important to search optimisation and will be dealt with separately. Just be aware that whilst external links from relevant sites are of value, so are internal links. The visible part of a link is known as anchor text, using this well helps visitors and search engines understand a website. As an example, if linking to our Home page, you might choose "read our introduction to Website Dispute Mediation" rather than "read our Home Page"

The same thought on relevance applies to other sections, although do not be tempted to try too hard. Abuse and the developing web have seen search engines become more subtle in the way they analyse websites.

They are essentially on side, good search returns help their business. Work with them fairly and optimise a website to reflect the content. Then you can focus on content, please visitors and turn them into customers. If you wish to read more on this theme, try our list of current website help articles.