Main Concepts
Header Tags
From Search Engine Genie.com -- http://www.searchenginegenie.com/forum/about84.html
"Heading tags are one of the most important tags appearing on the page not only to the users but they are also very important to the search engines, so if they are very closely related to the content of the page that they appear on they can really boost up your rankings. Heading tags should contain your specific keywords along with any other descriptive text relevant to the content of the page. Search engines consider Heading tags as valuable source to find out what a web page is all about. The Google ranking algorithm dictates that if you're using a <h1> tag, then the text in between this tag must be more important than the content on the rest of the page. So try to include your most important keyword phrases in heading tags on your page. Try to place the same keywords that you have used in your Title tag and also in your web copy in the heading tags.
Tips on Optimizing Header Tags
- "Use 2-3 header tags <h1>, <h2>, <h3>, <h4>, <h5> on each page of your website. If you can't use all of them make sure that you use AT LEAST the most important one the <h1> tag.
- These tags should contain your specific keywords along with any other descriptive text relevant to the content of the page.
- Try to include your most important keyword phrases in header tags on your page.
- <h1> is considered most important and <h6> least important by search engines. So place your keywords accordingly. Most important keyword in <h1> tag, less important keyword in <h2> tag , a little less important keyword in <h3> tag and so on.
- <h1> should be placed as close as possible to the <body> tag in your webpage. The closer the better. "
Hyperlinks
Usability
The default blue color for hyperlinks is universally recognised. If you use any other color there is a risk your visitors may not recognise your links. Links in a navigation bar can be just about any color. The fact that they're grouped together will help your visitor recognise them as links. Keeping them underlined also helps.
Target
Using target="_blank" in an html page will mean that it will not validate to W3C strict standards. But here is a solution that will validate as XHTML Strict:
<a href="http://yahoo.com" onclick="window.open(this.href); return false;">Go to Yahoo!</a>
Lists
Lists are important for the obvious things like shopping lists, to do lists etc. However, it is also important to use lists in navigation for semantics, accessibility, aesthetics and flexibility. Not using lists for navigation can lead to confusion, inaccessibility and unclear markup.
Undordered Shopping List
- Milk
- Eggs
- Cheese
- Bread
Ordered List of Presidents
- George Washington
- John Adams
- Thomas Jefferson
- James Madison
Navigation List (styled with CSS)
Defintion List- Not accessible from the Property Inspector
- JPEG
- Short for Joint Photographic Experts Group, and pronounced jay-peg. JPEG is a lossy compression technique for color images. Although it can reduce files sizes to about 5% of their normal size, some detail is lost in the compression.
- GIF
- (pronounced jif) a file formatted in Graphics Interchange Format, a data compression format used initially by CompuServe to compress and transfer graphic images for screen display. The format is commonly used for transferring graphics files on the Internet. Bitmapped files compressed in this format are known by the three-digit .gif extension at the end of the filename.
- PNG
- PNG (pronounced ping as in ping-pong; for Portable Network Graphics) is a file format for image compression that, in time, is expected to replace the Graphics Interchange Format (GIF) that is widely used on today's Internet. With a PNG you can control the degree of transparency (this is also called "opacity"), supports Gamma correction (allows you to "tune" the image in terms of color brightness required by specific display manufacturers), and can support 24-bit color (16.7 million colors) vs. 256 colors for GIF files.
Images
The two most common image types on the web are JPG and GIF files. Then comes PNG files.
It is best to use an image editing program to change the size of images but you can use Dreamweaver's built-in tools for some editing. NEVER adjust the width and height of an image from the Property Inspector width and height settings.