QuickSmart Web DesignerWebsite Designer Optimizer

Positions in underlying code

 

56Should a tag be in a particular position?

 

 

The header tags inside any code view of the website designer page indicate to the browser the size of font, any broad spacing requirement and bold function of the font.

Overall, the header tags (h1, h2, h3, h4, h5 and h6) have been traditionally used to size and classify the important line of text - thus becoming a 'headline' as the 'h' suggests.
 

Always use headings in order - why

a) Readers can pick up on the headline quickly
b) Indexing and retrieval relies on several factors including H1 down to H6. Use the header one tag high up in your code view pages.

Place the headline as close to the top as practical

Html is for markup, not presentation so you can also control the visual look of a tag using a CSS code.

HTML

<div class=normal><h1> Headline Here</h1></div>
<div class=small><h2>Headline two here</h2></div>
 

CSS:

#normal h2 {
font-size:90%;
}

#small h2 {
font-size: 80%
}

CSS this Site quicksmart-design:

h1 {font-size: 1.0em;margin: 0 0 0px 0;padding: 0px 0px 25px 20px;color: #FFFFFF;}
h2 {font-size: 1.3em;margin: 0 0 5px 0;padding: 2px 0px 100px 0px;color: #808080;}
h3 {font-size: 1.0em;margin: 0 0 5px 0;padding: 2px 0px 0px 0px;}

In general

 

Heading tags are one of the most important on-page elements when it comes to SEO. They let both users and SE's know what your page is about.

You should use one <H1> tag per page and it should contain and relate to your main page subject.

You can use the <H2> <H3> as required (but they should look and read well). For other size fonts you want to enlarge, use a CSS method like either shown above. For this site, we only apply the heading one and two tag, all others are controlled via CSS.

Other Tags Bold, Italic, Defined Term and Bulleted List are used by this site to reinforce the importance or 'stand out' of a particular section.

IF pictures make up your headlines

This is a great tip if you picture is your headline. If you have a picture that is clearly your title on a page, try this code:

HTML

Turn a picture into a headline:
<h1><a href="http://www.quicksmart-design.com"><span></span>
Headline One Here</a></h1>
The image will be overlaying the text.
Notes: If you notice the 'span' div contains no info. If you place text here, it may be considered as spamdexing by some engines. This simple code suggestion makes the html/pic a title that is spidered. See the article entitled Hidden Text for more info.

CSS

h1{  background-image: your-url/title.gif;}

to apply positioning   h1 span{ margin-left: -3000em;}

Dont overdo the headlines of your pages, write them for your readers and audience. Include a shortened 'relationship' keyword or add a sentence/paragraph immediately beneath the tag with your priority keyword 3rd word in.

More Reading

There is also an extended article highlighting other reasons why titles and headlines should be carefully considered on each page.

Learn more Each Page and a Unique Title

Even faster storing and location because of the headline

 

Some modern search engines, and some available in php or asp format that you can embed into your own site allow for a 'false hyperlink' that stores the words used inside your headlines. So, the term searched is quickly scanned across the headlines for priority, returning a match that is then further examined and retrieved. All in a millisecond, headlines do influence a searched term.

 

Dont over spam your headlines, keep them punchy and powerful so that your audience picks up on the article and reads it.

 

Next > Underlying Code and The Alt Text Functions

The heading <h> is not a meta tag.

Title, description and keyword are the only validated meta tags. Others such as author, location, copyright etc are all webmaster preference tags and dont relate to examination of the page and it's structure.

We recommend that only (1) headline <h1> tag be used per page

Copyright 2006 All rights Reserved. www.quicksmart-design.com