EverWeb Codebox

(h2) HTML Headings

(h3) The Importance of HTML Headings in SEO

(h4) Paragraph Heading

Website headings are really important for SEO (Search Engine Optimization). The spiders place greater importance on h1 than h2 and so on. The text content of any heading needs to be chosen carefully and contain keywords that are relevant to the page content. This holds true for your human visitors as well as the crawlers.

To create these in EasyWeb requires some HTML in an HTML Widget and some CSS styles - either in the site wide head code box or the one for the page if the styles only apply to that page. Individual styles can be achieved by using inline CSS in the Widget.

<h1>EverWeb Codebox</h1>

<h2>HTML Headings</h2>

<h3>The Importance of HTML Headings in SEO</h3>

<h4>Paragraph Heading</h4>

<style type="text/css">


h1, h2, h3, h4 {

     margin: 0;

     padding: 0;

}

h1 {

     font: 32px 'Trebuchet MS', verdana, sans-serif;

     color: #157FFF;

     padding: 5px 0 0 5px;

     text-align:left;

}

h2 {

     font: 22px 'Verdana', Helvetica, sans-serif;

     text-align: center;

     color: #000;

}

h3 {

     font: 20px 'Verdana', Helvetica, sans-serif;

     color:#000;

     text-align:center;

}

h4 {

     font: 17px 'Verdana', Helvetica, sans-serif;

     padding-left: 10px;

     text-align: left;

     color:#000;

}

</style>

The CSS for the headings on this page shown to the right.

Both the margin and padding are set to zero for all four to situate them correctly in the HTML Snippet. Then individual margin/padding settings are entered for each one as necessary.

Since these styles are actually used throughout the site, these styles are pasted into the Head Code box in the Site Publishing Settings page of EverWeb along with a link to the Google hosted version of the font used for the <h1> in the header.

Notice how each font has the desired font name in single quotes followed by a fallback font and then a generic group to allow for situations when the browser cannot load the selected font. These fallback fonts should be as near to the first choice one as possible in terms of size and style so that the page layout is not compromised when a substitution is made by the browser.

The HTML for each heading type is show below and each one is inserted via an HTML Snippet.

Inline Styles

In general the fonts for the headings should be kept constant throughout the site. Occasionally, the need for a special style may arise and this can be implemented in individual HTML Snippets using an inline style.

<h4 style="font: 16px Helvetica, Arial, sans-serif;color:#0000FF;font-style:italic;font-weight:bold;">Heading</h4>

This will result in a heading using size 16px Helvetica, blue, italic, bold.

Inline styles should be used sparingly since they reduce the efficiency of the code.

If all this sounds like too much work, check out the HTML Headings Widget. Click the easy button to get there...

Google Hosted Fonts can also be used for HTML headings and these are dealt with on the NEXT page.

Easy