HTML4SEO Blog

HTML optimization : H1, …, H6 tags (1st part)

HTML4SEO Team — Mon, 28 Jan 2008 16:28:00 +0000

We start today with our first phase on optimizing Meta tags. If you are new to HTML, you will find a short introduction (the basics) in our previous article “HTML basics in the Search Engine Optimization (SEO) scope”.

What are H1 to H6 tags ?

If you look at the HTML code of the HTML4SEO Faq (right click + View source in Internet Explorer), you will find this part of code,

This code allows to display several title in the page. Below is the result.

The tag number (from 1 to 6) increases with the title level of detail. The H1 titles are the most important, so the most visible (usually with a bigger font and eventually a color which is different from the rest of the text), whereas H6 tags are the least important.

H1 to H6 tags, according to the HTML 4.01 standard

The HTML 4.01 standard stands that :

each HTML document can (not mandatory) have 1 or more H1 to H6 titles,
each H1 to H6 tag must have an opening tag and a closing tag ,
there are 6 title levels, the H1 element is the most important and H6 is the least important.

Here is an example of H1, H2 and H3 elements well-formed :



... Head elements ...


	... introduction of the document ...
	Freshwater fishes
	... a short introduction about freewater fishes here ...
	In Europ
	… a text dealing with the specificities of these fishes in Europ here …
	In northern Europ 
	… details about northern Europ fishes …
	In western Europ 
	… details about western Europ fishes …
	...
	In Asia
	… a text dealing with the specificities of these fishes in Asia here …
	...
	Seawater fishes
	...

According to the standard, respecting the hierarchy of the H1 to H6 tags is not mandatory but it is highly recommended. In the previous example, titles are properly set.

Avoid,

Africa elephants
...
In southern Africa
...
Asian elephants
...
In southeast Asia
...

Notice that the title level of the opening tag must be the same as the one of the closing tag.

Here is an example of a valid title :

Bicycle Repairman

The following title is not valid and can even damage the formatting of the document

Bicycle Repairman

What is the importance of H1 to H6 tags ?

H1 to H6 tags in the body of a web page

H1 to H6 tags are probably the most important from the whole text of a web page. After the TITLE tag, the H1 tag seems to be the most SEO decisive tag. When correctly chosen, the titles introduce the content that follows (in some ways, they are representative). Therefore they provide the most relevant words to identify the document.

H1 to H6 tags between them

For search engines, H1 to H6 tags do not have the same weight. The H1 tags, the most important among titles, are as important for the SEO. The more you increase the title level (H2, H3, H4, H5 and H6), the least its content will be taken in account by search engines. Therefore the inner content of a H1 tag will be more important than the one of a H2 tag, this one will be more important than the one of a H3 tag and so on until H6. Focus your optimization efforts on H1 title first, then on H2, etc…

HTML Optimization : the Description Meta tag (2nd part)

HTML4SEO Team — Mon, 28 Jan 2008 16:12:41 +0000

In our previous article “HTML Optimization : the Description Meta tag (1st part)”, we tried to precisely define the Description Meta tag. In this part, you will learn how to calibrate the Description Meta tag for an optimal SEO.

A different Description Meta tag for each web page.

Each page has its own description. This description must reflect the real content of the page. Otherwise, the deceived user will soon leave your page. Remember, converted users worth far more than a great amount of traffic. In other words, choose quality to quantity (meaning the audience you target). Therefore it is highly recommended not to repeat the same description on every page of the website. Because this description would be too generic. In theory, you should not have two pages of your website with the same Description Meta tag.

An understandable description rather than keyword jam

It is highly recommended not to make your Description Meta tag a silly succession of keywords. Spamming with many keywords is definitely out of the fashion, relevant content is now king. One or two sentences properly built are more valuable than a “serial keyword” ;-).

In fact, as mentionned in “HTML Optimization : the Description Meta tag (1st part)”, the Description Meta tag is not directly taken in account in the SEO. However, it enables you to enlight your page among the search engine results (SERP) and then to make your page more attractive than your competitors. You should catch users, pushing them to click on your web page.

If you look at the Google results for the keyword “mp3 player”, you will see that it is the Description Meta tag of the web pages (circled in red in the following screenshot) which is used by Google in the result list.

Try to build your Description Meta tag with your best slogans, without beeing too catchy.

For example,

Avoid,

Not so important Keywords

You do not need to include your major keywords in the Meta Description tag. We insist, the Description Meta tag is not directly taken in account in your web page ranking among the SERP (Search Engine Result Pages). They just “help” search engine presenting your web pages in the SERP.

For example, .

Avoid, .

The size

The optimal size of the Description Meta tag changes from a search engine to another. However, SEO professionals generally agree to set it to 250 characters, which is about 60 words.

The accented characters

If you use accented characters in your Description Meta tags, you must specify the charset thanks to the CHARSET Meta tag.

The following example set the charset of the document to “ISO-8859-1” (which allows the use of accented characters).

charset=ISO-8859-1“>

Here is a complete example with Description and Charset Meta well-formed tags,



   
   ...
   
... other head elements ...


... body of the document ...

At last, the HTML entities solution is another possibility on which the Meta/Charset has no impact.

Here is a complete example of a Description Meta tag without Meta/Charset but with HTML encoded and well-formed.


   ...
   
... other head elements ...


... body of the document ...

The “ñ” is now encoded in HTML with the special character ñ

Applying these tips should improve your click-trough rate in the SERP.

HTML Optimization : the Description Meta tag (1st part)

HTML4SEO Team — Mon, 28 Jan 2008 15:57:10 +0000

We start today with our first phase on optimizing Meta tags. The Description Meta tag comes first in the list. If you are new to HTML, you will find a short introduction (the basics) in our previous article “HTML for Search Engine Optimization (SEO)”.

What is the Description Meta tag ?

If you look at the HTML code of the following web page, (right click + View source in Internet Explorer), you can find the following part of code at the beginning of the file,

The Description Meta tag defines a property named Description to which a content is assigned.

In the following example,

The Description property is set to “Portable MP3 Players - MP3.com offers MP3 player reviews of the best MP3 players available.”

The Description property allows you to describe the content of a web page. It is not user but search engine oriented.

The Description Meta tag, according to the HTML 4.01 standard

The HTML 4.01 specifications allows to specify metadata (data about the document rather than its content). However, this specification does not define a single set of allowed metadata properties. There is a usual way to use metadata. The Meta/Description is part of this set dedicated to metadata definitions.

This metadata all respect the same rules. The HTML 4.01 standard stands that :

each HTML document can (not mandatory) contain one or more META elements,
these META elements must be inserted in the HEAD section of the document,
the META element defines a property to which a value is assigned,
the META element can contain accented and special characters,
the META element only needs an opening tag, there must be no closing tag.

Here is an example of well-formed META elements,


   
      ... head elements ...
      
      
      ... other head elements...
   
   
   ... body of the document ...

“name” defined the name of the property and “content” its value.

The HTML 4.01 standard enables a deeper META tag setting. To go further in this setting, look at http://www.w3.org/TR/REC-html40/struct/global.html#h-7.4.4.2.

It is strongly recommended to fit to the standard because search engine prefer well-formed documents, i.e respecting the HTML standards.

Is the Meta/Description really important ?

In theory, this HTML tag is unique. There is only one copy per page, usually at the beginning of the file. As this tag is not included in the text flow of the document body, it is invisible. It is not user but search engine oriented.

Since the early 2000, the influence of Description Meta tag on the ranking has seriously declined because of abuse (keyword spam). That is why we can wonder whether it is important for SEO and whether there are efforts to make on it.

Do not under-estimate it !

This tag is not used in the search engine ranking algorithm anymore. Still, search engines always take it for granted. They often use its content to describe a web page in the search engine results.

Filling the Description Meta tag of your web pages, you will propose a description that search engines will probably show in their search result pages. In this manner, you have a better control over your communication among the SERP (Seach Engine Result Page). So you can invite more web users to click on your link rather than those of your competitors. If you do not have any Meta/Description, you let the search engines choosing any piece of text in your web page. And they are highly likely to choose an irrelevant portion of text.

You can see in this example that some links are more catchy than others.

SEO parameters (Search Engine Optimization)

HTML4SEO Team — Mon, 28 Jan 2008 14:52:59 +0000

SEO is no exact science. Opinions change from a professionnal to another about certain criteria weights. Still, differences are generally pretty light.

The default SEO parameters proposed by HTML4SEO must be changed with caution. We recommend beginners not to change them. On the contrary, SEO experts can set them from their experience. To do so, click on My SEO parameters in the toolbar.

Then a dialog box pops up.

Current tab/Preferences

It is composed of 2 tabs : Current tab and preferences. The options are the same in both tabs. However, the parameters set in the 2 tabs do not have the same scope. In the Current parameters tab, they only last until the session is over. In the next session, they will be set to default again. Whereas in the Preferences tab, they will be saved between sessions. In the next session, they will be used as default settings.

Number of keywords and keyword density

The number and the density of keywords are both used by search engines to evaluate a web page revelancy toward a keyword. The keyword density seems more important than the number of keywords which must not be underestimated thought.

The number of keywords is the total number of times you can find a keyword in a text. The density is a percentage which measures the strength of a keyword in a text. It is the ratio between the number of keywords and the total number of words.

If a keyword appears twice among 400 words (number of keywords = 2, density = (2/400) x 100 = 0.5%), it is less important than if it appears once among 30 words (number of keywords = 1, density = (1/30) x 100 = 3.3%).

Once again, do not change the default settings if you are a beginner. Otherwise, if you are a SEO expert, feel free to modify the proposed values. To do so, move the sliding cursor to the number of keywords or density criteria you want to foster.

By default, the number of keywords is set to 4 and the density to 6, which corresponds to respective weights of 40% and 60%.

Changing this parameter, you will modify the audit results.

Tag weights

Search engines give a heavier weight to the words contained in some HTML tags. Once again, do not change the default settings if you are a beginner. Otherwise, if you are a SEO expert, feel free to modify the proposed values.

The HTML tag weights vary from 1 to 10. You can disable an HTML tag by unckecking it.

For example, the TITLE tag weight is set to 10 by default, as the text weight is set to 2. HTML4SEO will give 5 (10/2) times more importance to the words in the TITLE tag than the words in the text.

Changing this parameter, you will modify the audit results.

The tips (3rd part) : which strategy ?

HTML4SEO Team — Mon, 28 Jan 2008 14:22:24 +0000

The tip table is made to simplify the HTML code optimization job. Still, are you sure to obtain a real gain ? This is the purpose of this article.

What is incremental SEO ?

There are several ways to improve the ranking on a keyword, depending on the situation. If your website theme is poorly targeted, you need to work back your HTML code. This is what HTML4SEO is made for.

SEO is usually made by successive approximations, until reaching the goal. Take your distance with massive modifications of your HTML code, this could be unproductive or even harmful. It is often more profitable and easier to optimize by successive edits. If only few modifications are enough, no need to do more.

To do so, remember you can request the same audit (when payed) as many times as you want for 30 sliding days. And then, you won’t be charged for it. It means during 30 sliding days, this audit is free of charge for the same or any other web page of your choice.

For example, on september 12th 2007 you ask for an audit on the keyword “mp3 player”, on the US version of Google for your web page http://www.mywebsite.com/mp3-player.htm. Therefore, you are charged for one audit in your account.

Until october 11th 2007 included, you can ask for the same audit again (the keyword “mp3 player”, on Google US) for your web page http://www.mywebsite.com/mp3-player.htm but also for the web page http://www.mywebsite.com/win-your-mp3-player.htm and even your competitors web pages as many times as you want.

It has to be clear that the keyword (“mp3 player” here) and the search engine version (Google US here) have to be the same.

What is the optimal strategy ?

The tip table is composed of 6 columns : HTML tag,Tips, Number of Urls, Relative efficiency, Difficulty and ROI. You can sort each one of these with Firefox and Opera (there is a small bug with Internet Explorer that should be fixed soon). The last 4 columns are more interesting to sort, each one can give way to a different strategy.

The key tags

The Number of Urls column is very important. It tells you the number of Urls among the top 10 that contain the expression in the corresponding tag. For a tag, the higher its value is, the most decisive its optimization will be. If this value is low, its optimization will probably have a light impact on your ranking.

Focusing on the tags which have the best number of urls, the key tags are privileged for the targeted keyword. These tags are more difficult to find and vary a lot from one keyword to another.

From the most efficient to the least efficient

The Relative efficiency column tells you about the weight of a tip. The word “relative” is important. It means that the efficiency depends on the context. If your web page title is already optimized, you won’t have a tip for it, even if this tag is often decisive. The Relative efficiency value takes in account the type of the tag (Title, Meta Description, H1, A/Href, etc…), the importance of the suggested modification for the tip and the Number of Urls.

Focusing on the most efficient tags, you will reduce the number of tags to modify. However, these tags will probably be hard to edit (H1, A/Href, etc…).

Some tags (Title, H1, etc…) are often among the most efficient. This strategy is close to SEO classics.

From the easiest to the least easy

The Difficulty column tells you about the feasibility of a tip. There are tags more visible than others and so more difficult to change.

Focusing on the easiest tags often reduces the efforts to provide. This is the strategy of the least effort. However, you may have more changes to make in the future.

Maximize performance

The ROI value takes in account the Relative efficiency and the Difficulty.

Focusing on the ROI column maximizes the performance by finding the best compromise between effects (efficiency) and efforts (difficulty).

To go further

A unique SEO strategy is certainly comfortable (no personnal efforts to make) but is not necesseraly the best. The choice of strategy will depend on the context (competing keyword, niche keyword, etc…).

You also have to remind that a good optimization of your HTML code can not be reduced to only one expression. The whole theme around the expression is to optimize. The tagcloud of the Beginner tab (or the Expert tab) tells you about the main expressions found in your competitors web pages and that lack in the audited page. By clicking on the keywords that are closed to the audited expression, you will get other tips for the clicked keyword.

For example, for the keyword “rent a car”, it seems interesting to make efforts on the expressions car rental, a car and enterprise rent.

SEO must therefore be incremental in 2 levels : the first one for the main keyword (targeted on the search engine) and another one for the expressions close to the main keyword from a thematic point of view.

The tips (2nd part) : the settings

HTML4SEO Team — Mon, 28 Jan 2008 14:07:39 +0000

By default, the tip table is composed of 6 columns : HTML Tag, Tips, Number of Urls, Relative efficiency, Difficulty and ROI. You can change the layout by clicking on “My display settings” in the toolbar.

Then a dialog box pops up.

It is composed of 2 tags : Current parameters and Preferences. The options are the same in both tabs. However, the parameters set in the 2 tabs do not have the same scope. In the Current parameters tab, they only last until the session is over. In the next session, they will be set to default again. Whereas in the Preferences tab, they will be saved between sessions. In the next session, they will be used as default settings.

There are 2 kinds of possible settings.

By default, all the columns are shown, but you can choose only some of them.

By default, the tip table only includes the tags for which there are at least 2 Urls in the top 10 containing the expression. You can change this floor limit. The higher the limit will be, the fewer tips there will be, but they will be more decisive.

The tips (1st part) : signification

HTML4SEO Team — Mon, 28 Jan 2008 13:48:37 +0000

The tip table is the action part of HTML4SEO. It is the heart of the application and then, probably the most visible part of it.

The table has, by default, 6 columns : HTML tag, Tip, Number of Urls, Relative efficiency, Difficulty and ROI. You can sort each one of these with Firefox and Opera (there is a small bug with Internet Explorer that should be fixed soon).

HTML Tag

The HTML tag column only lists the HTML tags for which a tip is proposed. Therefore, all the tags are not necesseraly included.

Tips

The Tips column tells you what to do for the corresponding HTML tag. There are 2 kinds of tips : Add N times the audited expression in the corresponding tag or remove N words except the audited expression. Applying the given tip, you will have a number of keywords and a keyword density just better than the mean level for the corresponding tag.

In the following example,

HTML4SEO proposes you to add 6 times the expression “mp3 player” (very competing keyword), and to remove 47 words except the expression “mp3 player” in the anchors (visible text from hypertext links).

As this is a hard-working task (remove 47 words…), HTML4SEO provides some alternatives. Instead of Adding 6/Remove 47, you can Add 7/Remove 34 or Add 8/Remove 21 or Add 9 remove 8 or Add 10/Remove 0. The goal is to reach the keyword density and number of keywords of the best ranked pages.

Number of Urls

The Number of Urls column is very important. It tells you the number of Urls among the top 10 that contains the expression in the corresponding tag. For a tag, The higher its value is, the most decisive its optimization will be. If this value is low, its optimization will probably have a light impact on your ranking.

By default, are only included the tags for which there are at least 2 Urls in the top 10 containing the expression.

In the following example,

Only 2 of the 10 first Urls contain the expression “mp3 player” for the B tag (text in bold). Meanwhile, all of the 10 first Urls (10/10) contain the expression “mp3 player” in the TITLE tag (which is the text shown in the title bar of your browser). The TITLE tag optimization seems to be far more decisive than the B tag’s for this expression.

Relative efficiency

The Relative efficiency column tells you about the weight of a tip. The word “relative” is important. It means that the efficiency depends on the context. The Relative efficiency value takes in account the type of the tag (Title, Meta Description, H1, A/Href, etc…), the weight of the proposed modification for the tip and the Number of Urls.

Difficulty

The Difficulty column tells you about the feasibility of a tip. In fact, applying a tip is quite easy. You just need to open your HTML editor, then… that’s not that easy.

There are tags more visible than others, just like H1 for instance. The change imply a major overhaul of the web page and requires an adjustment of the speech that can have a decisive impact especially for a promotional campaign where every word count. Similarly, the A/Href tags are quite difficult to change, as the links (outbound mainly) are independent from the linking web page. On the contrary, there are painless tags to change : Img/Alt, Meta/Keywords, etc…

The Difficulty value takes in account the type of the tag (Title, Meta Description, H1, A/Href, etc…) and the importance of the proposed modification for the tip.

ROI

The ROI column is the Return On Investment, i.e the ratio between the effort and the expected benefit.

The ROI value takes in account the Relative efficiency and the Difficulty.

In the following example,

Althought the proposed changes for the Img/Alt tag are more important than the ones for the H1 tag, its efficiency is worse.

On the contrary, the difficulty is lower for the Img/Alt tag than the H1 tag despite of the need to add more occurrencies of the expression “mp3 player”.

As the Title tag is easy to modify and has a significant ranking impact, its ROI is pretty high, which is not the case of the H1 tag since, despite of a major impact, it is very visible, so difficult to change easily.

HTML optimization : the Title tag (2nd part)

HTML4SEO Team — Mon, 28 Jan 2008 12:38:31 +0000

In our previous article “HTML optimization : the Title tag (1st part)” , we focused on precisely defining the TITLE tag. In this second part, you will learn how to calibrate the TITLE tag for an optimal SEO.

How do I write the Title tag of my web pages ?

The essentials

A different TITLE tag for each page

It is strongly recommended that each page has a different TITLE tag. This title must reflect the web page content at best. You should not repeat the same title on every pages. You would miss the opportunity to vary keywords. In theory, you should not have two pages of your website with the same TITLE tag.

An understandable title

A good SEO requires to avoid a meaningless succession of keywords for the TITLE tag. Give your users the lust for click ;-). If you look at the Google results for the keyword “mp3 player”, you will find that the TITLE tag is brought by Google in the list (circled in red).

Shape your TITLE tag with your best slogan, without beeing too catchy.

For example, MP3 Player – Get yours now !

Avoid, MP3 Player, small price, buy, sell, compare, best price.

The keywords

The TITLE tag of your web pages must include your most important keywords. In general, keywords at the beginning of the title have a better impact on your web page SEO.

For example, for the keyword “MP3 Player”, this title

MP3 Player – Buy yours now

is better than,

Compare and buy your MP3 Player

The size

The right TITLE tag size changes from a search engine to another. Still, SEO professionnals generally agree around 60 characters, which is about 10 words.

Going deeper

Applying the previous tips from above should already impact your SEO significantly. You can go further thought.

Head of the file

Insert this short portion of HTML code near the beginning of the file. Place it just after the opening tag and after the CHARSET META tag. This will enable the use of accented characters in the TITLE tag.

The following example shows how to set your web page charset as “ISO-8859-5” (which allows to use accented characters).

Here is a comprehensive example of a well-formed TITLE element,



   
   España, great destination for your holidays
... other head elements ...


... body of the document ...

The shape of the title

It is generally assumed that it is better to shape your TITLE with “sentence with keyword + website name” instead of “website name + sentence with keyword”.

For example, for the keyword “MP3 Player”, the title

MP3 Player – Get your portable media player – HighTechDiscount

is better than,

HighTechDiscount – MP3 Player – Get your portable media player

Warning

Many successive modifications of a web page TITLE tag can be penalizing for young website. It is generally assumed that the TITLE can often be changed on pages that already have traffic coming from search engines, not for the new ones. As the webmaster of a young website, be full of patience.

HTML optimisation : the Title tag (1st part)

HTML4SEO Team — Mon, 28 Jan 2008 10:38:17 +0000

We start today with our first phase on HTML code optimization. This article is dedicated to the Title tag. If you are new to HTML, you will find a short introduction (the basics) in our previous article “HTML for Search Engine Optimization (SEO)”.

What is the Title tag ?

If you look at the HTML code of the following web page, mp3 player – Google search (right click + View source in Internet Explorer), you can find the following piece of code at the beginning of the file,

This part of code

mp3 player – Google search

is used to display in the title bar of the Google result page the text “mp3 player – Google search”

The Title tag, according to the HTML 4.01 standard

The HTML 4.01 standard stands that :

each HTML document must have one and only one TITLE element,
this TITLE element must be inserted in the HEAD part of the document,
the TITLE element does not belong to the text flow (it would be displayed as the title of the page or the window),
the TITLE element can contain accented or special characters,
the TITLE element must have an opening tag and a closing tag.

Here is an example of a well-formed TITLE tag,


   mp3 player catalog
... other head items ...


... body of the document ...

It is strongly recommended to fit to the standard because search engines prefer well-formed documents, i.e respecting the HTML standards.

In the common use, the TITLE element is often called the TITLE tag. To be clear, the TITLE element is composed of an opening tag (), a closing tag () and some text, “mp3 player catalog” in our previous example.

Is the Title tag really important ?

This HTML tag is unique. There is only one copy per HTML page, usually at the beginning of the file. As this tag is not included in the text flow of the document body, it is barely visible. That is why we can wonder whether it is important for SEO and whether there are efforts to make on it.

This HTML tag is probably the most important of all. It has a great impact on search engines. If you were to optimize only one, it would be this tag. It is highly recommended to work on this tag to improve your SEO. A well-targeted title is often a large part of theme and ranking job done.

2 key principles about optimization : number of keywords and keyword density

HTML4SEO Team — Mon, 28 Jan 2008 10:24:16 +0000

The number of keywords and keyword density are both used by search engines to evaluate a web page revelancy in relation to a keyword. The keyword density seems more important than the number of keywords. However, don’t underestimate the number of keywords.

Number of keywords

The number of keywords is just the total number of times you can find a keyword in a text.

Keyword density

The density is slightly more subtle, but still easy ;-)… it is the ratio between the number of keywords and the total number of words. It measures the keyword strength in the text. If a keyword appears twice among 400 words, it is less important than if it appears once among 30 words.

Detailed example

In the following text,

Association football, commonly known as football or soccer, is a team sport played between two teams of eleven players, and it is the most popular sport in the world. Football is a ball game played on a rectangular grass or artificial turf field, with a goal at each of the short ends. The object of the game is to score by manoeuvring the ball into the opposing goal.

The keyword “football” appears 3 times in 68 words. Therefore we have 3 as the number of keywords and the keyword density equals 3/68 = 4.4%, which is relatively high.

In order to improve the keyword density, you can either increase the number of keywords or decrease the total number of words.

Let’s transform the previous text as follows,

Association football, known as football or soccer, is a sport played between two teams of eleven players, and it is the most popular sport. Football is a ball game played on a rectangular grass, with a goal at each of the short ends. The object is to score by manoeuvring the ball into the opposing goal.

The keyword “football” always appears 3 times and there is now 56 words. Therefore we have 3 as the number of keywords and the keyword density equals 3/56 = 5.3%, i.e a gain of 1.1%, which is higher. The meaning is very close to the previous one but the density is better, which improves the optimization for search engines.

As a conclusion

Search engine optimization is not an exact science. Search engines keep their algorithm secret. We are in the situation of a black box from which only experimentation can seriously tell us about. Most of the advices come from experience, observations and tests.

The number of keywords and keyword density are both valid criteria for every HTML tags : title, a/href, img/alt, h1, strong, etc… as well as for URLs. In general, a good SEO needs a number of keywords and keyword density slightly superior to the top 10 mean of the chart, for the targeted keyword. Be carefull, going too heavy is considered as spamdexing, which can affect your rank negatively.

HTML for Search Engine Optimization (SEO)

HTML4SEO Team — Mon, 28 Jan 2008 09:05:36 +0000

We start today our first phase with optimizing HTML code. Before going deeper, we need to make a few reminders about HTML.

HTML, the minimum

These basics are the minimal knowledge required in HTML without which you won’t be able to optimize your web pages. If you already know HTML, you won’t learn anything new here, moreover, you could even find some volontary pedagogic approximations.

What is HTML ?

Each web page you visit over the Internet corresponds to an HTML format file that your browser (Internet Explorer, Opera, Firefox or other) receives and has to display. This file in text format (therefore human readable) describes the graphical appearance corresponding to the web page (texts, images, layout, etc…).

For example, if you go to the Amazon homepage, you can view the file your web browser received (right click + View source code in Internet Explorer). You will get the following text (HTML code) in your notepad, corresponding to the Amazon homepage.

This description is done in HTML. HTML (Hyper Text Markup Language) is a standard language based on tags (mainly for formatting). There are tags to display text, to put it in bold, to insert images, etc… Tags are always shown between rafters <name of the tag>. The formatted text is almost always framed by an opening tag and a closing tag.

For example,
In order to show the text “mp3 player” in bold, use the “b” tag (b stands for bold) as follows,

mp3 player

Another example, in order to display the text “sport car” in a first level heading, use the “h1” tag (h stands for heading) as follows,

sport car

Structure of an HTML page

An HTML page is divided into two parts : a head and a body. In the head, there are tags which provide general informations about the document to display. In the body, there is the document to display and its formatting defined by specific font tags.

This is the structure of an HTML page,


   
      ... Head tags -> general informations...
   

   
      ... Body tags -> web page an its formatting...

Going deeper

These are basic knowledges to understand before learning about HTML code optimization of web pages. Nevertheless, it is strongly recommended to know a bit more about HTML.

You will find great tutorials about HTML on HTML Dog (http://htmldog.com/guides/htmlbeginner/). You should learn quite quickly from there.

To go deeper in the matter, it could be interesting to read the HTML 4.01 and XHTML 1.1 standards.