HOME

design element
 
design element

ONLINE MARKETING > SEARCH ENGINE MARKETING > SEARCH ENGINE OPTIMIZATION pointerStructure & Style SheetspointerYOU ARE HERE!
design element design element
design element design element

EFFECTIVE ETHICAL INTEGRAL SEARCH ENGINE MARKETING & OPTIMIZATION
design element

ONLINE MARKETING
design element

SEARCH ENGINE MARKETING (SEM)
design element

SEARCH ENGINE OPTIMIZATION (SEO)
design element

design element SEO Basics
design element

design element Ethical SEO Strategies
design element

design element HTML Code Validation
design element

design element HTML Structure & Style Sheets
design element

design element META Tags Tutorial
design element

design element Basic HTML Body Tags
design element

design element Image Tag & Alt Attribute
design element

design element Hyperlinks - Anchor Tag
design element

design element Table Tags
design element

design element Off-Site SEO Factors
design element

design element Off-Site SEO Strategies
design element

design element Search Engine Spam
design element

design element PageRank Puzzle (1-4)
design element

USER ORIENTED WEBSITE INTERFACE
design element

DISTINCTIA INFO
design element
design element
design element

SEARCH ENGINE JARGON GLOSSARY
design element

SITE MAP
design element

EFFECTIVE ETHICAL INTEGRAL SEARCH ENGINE MARKETING & OPTIMIZATION
design element

At Distinctia we take an integral approach to site design and development. Successful web sites are aesthetically pleasing to visitors, comfortable to people with disabilities and favorable to the search engines. We take pride in using strictly ethical marketing methods to achieve top placement across the major search engines.
Let us show you how!
design element design element

HTML DOCUMENT STRUCTURE & STYLE SHEETS

Clean and valid HTML code, decreases the likelihood of having users experience problems when viewing your website. At the same time, optimizing and validating HTML code to the W3C standards make file sizes smaller and error free. They are more easily understood by search engine spiders, making you website easier to index.

HTML DOCUMENT STRUCTURE

An HTML 4 document is composed of three parts:

  • a line containing HTML version information,
  • a declarative header section delimited by the HEAD element,
  • a body, delimited by the BODY element, which contains the document's actual content.

All HTML elements are defined using HTML tags that tell the Web browser how to display the page. Tags can have attributes, which can provide additional information about the HTML elements. Attributes are always added to the start tag of an HTML element.

The HTML content presentation varies greatly, depending on a user agent/browser, from visual browsers, where the content appears as text, images, colors, graphics, etc. to audio user agents, where the same content is spoken.

If you want to learn how to use HTML to create your own website you should NOT miss World Wide Web Consortium The global structure of an HTML document, and extremely useful and easy to understand W3schools HTML Tutorial.

A valid HTML document must contain information on HTML version used in the document, e.g. for the HTML 4.01 Transitional DTD:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Everything except the above document type declaration must be contained by the HTML element, so the structure of a typical HTML document is:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
.<HTML>
<HEAD> ... </HEAD>
<BODY> ... </BODY>
</HTML>

The HEAD element contains information about the current document that is NOT considered document content, while the document actual visible content is specified in the BODY element.

Every HTML document must have a TITLE element in the HEAD section, which identify the contents of a document. Machine-readable information about a document are specified through META elements in the HEAD section. Note that the TITLE element also handles a kind of meta data, therefore is often discussed along with other META tags, although it's actually separate and obligatory. META Tags Tutorial >>

The purpose of the BODY element of a HTML document is to define the actual visible document's content. The most important HTML tags, according to W3schools HTML Tutorial, are tags that define headings, paragraphs and line brakes. Body Element & Basic Body Tags >>

HONE YOUR WEBSITE PRESENTATION WITH STYLE SHEETS

Variety of techniques were developed to improve the presentation of webpages and override the HTML's stylistic limitations. Unfortunately, implementation of these techniques increase overall complexity of websites, thus becoming an obstacle both for users, especially people with disabilities, and search engine indexing.

Style sheets resolve these problems easily, while further improving the presentation of webpages. For more details consult the World Wide Web Consortium section on links and style sheets. Note that the presentational attributes of BODY have been deprecated, since style sheets are now the preferred way to specify a document's presentation.

Style sheet rules could be presented directly in HTML documents:

<HTML>
<HEAD>
<TITLE>...</TITLE>
<META name="Description" content="...">
<META name="Keywords" content="...">
<STYLE type="text/css">
BODY { background: ...; color: ...;}
A:link { ...}
A:visited { ... }
A:active { ... }
</STYLE>
</HEAD>
<BODY> ... </BODY>
</HTML>

or they could be external style sheets, imported in HTML document:

<HTML>
<HEAD>
 ...
<LINK href="style.css" rel="stylesheet" type="text/css">
</HEAD>
<BODY> ... </BODY>
</HTML>

Cascading Style Sheets (CSS) allow style information from several sources to be blended together. "The cascade defines an ordered sequence of style sheets where rules in later sheets have greater precedence than earlier ones. Not all style sheet languages support cascading." (W3C Style Sheets)

The advantages of external style sheets are obvious:

  • changes that propagate through the entire site are made by changing just one file;
  • flexibility to change the presentation without the changes in the HTML document source;
  • further simplification of the HTML code;
  • smaller pages that load faster;
  • as CSS gets cached, pages load even quicker.

Note that if your HTML is not valid, or you use syntax in your CSS which is not correct, then you have a much greater chance that your style sheet based webpages won't work.

Utilizing style sheets is both user and search engine friendly technique. It results in cleaner HTML code, shorter and faster loading webpages, significantly shorter time necessary for changes, etc.

Using external Cascading Style Sheets (CSS), allows you to specify the size, color, fonts, etc. of your HTML Body tags. Body Element & Basic Body Tags >>

design element

design element		 design element
design element
design element design element
design element design element  

User Oriented Design & Ethical Website Marketing Strategies by Distinctia, 2006

Valid HTML 4.01! Valid CSS!