Chuck Conway

In The craft

Pointers for Creating Semantic Web Pages: III

November 9, 2005 · 2 minute read

  1. DocType Declaration

  2. Title

  3. Character Set Declaration

  4. Favicon

  5. Hierarchal page layout

  6. Links (anchor tag)

  7. Images

  8. Tables

  9. Styles Sheets

    Hierarchical page layout

Page structure is essential to SEO (Search Engine Optimization) and future manageability. At the center of page structure is the H tag (short for header tags).

Six levels (h1, h2…h6) exist. Each level is a sub of the level above it, with the exception of the h1 one tag.

Quoted (http://lists.evolt.org/archive/Week-of-Mon-20020617/116065.html ):

“I would say that there should only ever be one h1 tag per page, which should describe the contents of the entire page, i.e. the page title. …. If an electronic search process finds a key word in an h1 tag, it should be able to assume that the entire page is relevant to that keyword, and assign the page a high ranking. If the key word appears in an h2 tag, that should mean a major section of the page is relevant, and so on. If the key word appears in a p tag, but not in an h tag, that should imply the lowest degree of relevance.”

Example:

<h1>Graphic Design Houses</h1>

<h2>Chico</h2>

<h3>Watson Farrell Design Agency</h3>

<h4>Owners</h4>

<h5>Anna Farrell</h5>

 <p>Loves chocolates!</p>

<h6>Education</h6>

<h5>Kelly Watson</h5>

<p>Drives a VW</p>

<h6>Education</h6>

<h2>Oroville</h2>

<h3>Oroville Web Design</h3>

        …

<h1>Web Design Firms</h1>

<h2>Chico</h2>

    …

More on H tag use: http://lists.evolt.org/archive/Week-of-Mon-20020617/116065.html

Links

Links (anchor tags) make the internet, without out links the World Wide Web would not exist.

Link have four parts:

  1. href

    1. the actual link

  2. title attribute

    1. a semantic meaning, descriptor to the link

  3. Tab index

    1. Tab index allow navigation via the keyboard and increases website accessibility

  4. display name

    1. The actual name displayed to the user

Example:

<a href="http://www.watsonfarrell.com" 
title="The best graphic design / web design company in California" 
tabindex="2" >Watson Farrell Design Agency</a>