Separating Structure from Content and Presentation
The structure of a document is how it is organized logically using structural elements. Structural elements are the various HTML syntactic tags that define the structure of the document and, more specifically, define its content type — video or sound — or its logical construct — header (<h1>), paragraph(<p>) or list(<li>).
Example:
<h1>Header text</h1>
<h2>sub-header text</h2>
<p>Body text</p>
The content of a webpage refers to what it says to the user/viewer through text writeup, natural language, images, sounds, movies, animations, etc. The presentation is the manner, color or style by which the content is presented to the viewer. This should be done with the use of CSS (cascading style sheet) using style elements internally or externally. Such practices as separating style from content, minimizing obtrusive JavaScript, and streamlining code allow search engines to more easily spider, index, and rank web pages.
Providing Text Equivalent for Non-text Elements
Provide a text equivalent for every non-text element (ie. via “alt”, “longdesc”, or in element content). This includes: images, graphical representations of text (including symbols), image map regions, animations (ie. animated GIFs), applets and programmatic objects, flash, etc Abiding by this standard would result in the creation of a webpage that works for all, even the visually impaired. Also, it would be made available to those who do not rely on just one type of hardware, platform or browser. Pages should be usable by people without mice, with small screens, low resolution screens, black and white screens, and even with no screens, using only voice or text output.
As we are providing text equivalent, we must also be cognizant of site navigation.
Navigability
It is imperative to design and develop understandable mechanisms and methods for navigating within and between pages.
Make it as easy as possible for human and search engine bots to navigate and crawl your site and all its content.
Avoid the use of JavaScript when building your navigational bar. Instead, use CSS to structure, display and control the look and feel of the navigational bar. Search engines cannot read or access JavaScript or flash, but they can read and access a CSS-based text navigation bar. Text links are very important to search engines…
If using AJAX for rich interface design, make sure to implement properly with text equivalent provided for all non-text elements.
Within the header tag exist other types of tags called Meta Tags. These are not as relevant as they were in the early ’90s, but they can be of value, for if used properly, they may be of some SEO help
(Next week we will begin with an explanation of Meta Tags)