As its name indicates, HTML 5 is the successor to HTML 4. Work on HTML 5 started in 2003 by a group of independent work which advocated a pragmatic approach, the WhatWG, unlike the W3C that focused all its efforts on XHTML 2. The design principles are clear: simplify the use of HTML, formalize current practices and ensure maximum backwards compatibility.

The Web evolves very quickly. If you’re not careful, you’ll quickly be exceeded. The official draft (working draft) of HTML5 was officially released on April 23, 2009 and, since, many advances have been completed, the browsers still supports more features and news. HTML has had a troubled past but features of HTML5 can surpass it.

Here is a list of 20 tips for coding your pages properly in HTML5. All of these tips, put together, will improve your SEO, meet certain standards W3C or improve compatibility …

1. Respect the HTML5 Doctype

The Doctype underwent a rejuvenation with the arrival of HTML5. The line of code has become concise, identical for all and without url to add. A simple and effective way to meet the standards.

<! DOCTYPE html>

2. Think Always to Close Your Tags

You have already heard, but always remember to properly close your tags. Some display errors are sometimes due to this lack. For example a layer – symbolized by the DIV – does not float to the right because it is contained in another layer that would have previously be close. Some tags close by supervision – most tags are of this type such as the P tag for instance – and others close alone, as META tags or IMG image tags. In this case, we can add backslash in the tag immediately after his name, as below:

<meta description = "..." />

3. Indicate the Canonical URL to Prevent Duplicate content

There are many reasons why a page is accessible to different addresses at a time. This is a problem for dynamic sites that can sometimes display the same contained in distinct situations (session, category …). To avoid the problem of duplicate content and be sanctioned by Google, you should indicate the canonical URL of your page.

<link rel="canonical" href="http://my-website.fr/index.html" />

4. Set the Cache for Faster Navigation

Although there are other more complete solutions, you can still adjust some aspect of cache browsers of your visitors. Browser cache, what is it? when you view a web page, your browser downloads the page (HTML), but not only. It also downloads the stylesheet , the related files (eg JavaScript) and images to display. Depending on your case, it may be preferable to define the cache. There is no need for a static site to re-download everything between the different pages of the site. The header or top and the footer and maybe even the menu and the lateral column are identical. Browsing speed of your visitors will be tenfold. However, if, for example, your site has regular access to databases that keep it update, the cache will not work. Use the meta tag below:

<META HTTP-EQUIV="personal" CONTENT="NO-CACHE">

5. Define the Location for JavaScript

Often, but sometimes wrongly, the script themselves or the links pointing are placed between the HEAD tags. However, the browser displays your site as and when downloading and interpreting its files in which they have been placed. To understand, let’s take the example of the script in JavaScript of Google Analytics.

If we put this script at the beginning of the page, between the HEAD tags, for example, when a visitor comes to your site, the browser will start downloading and interpret related files. And before display the content of your site flanked by BODY tag, it will interact with Google Analytics.

However, if you place it at the end of your page, just before the closing BODY tag, the browser will first display the content and at the end of it, it will send a request to Google Analytics. Your site will appear more quickly in this way for your visitor. Attention, because this technique does not apply to all script. According to their function and action, it will be up to you to define their best location.

6. Respect the Semantic

Respect of the semantic is essential for a good SEO. It is suitable to use tags according to the situation. To clarify this point, understand that if a tag exists it is that it has a purpose.

The choice of an HTML tag must never be done depending on the layout. It must correspond to those it described. For example if you write an abbreviation, preferred ABBR tags instead of layout italics tags such as I or EM. Your SEO will benefit from it.

7. Respect the Hierarchy of Titles

For SEO, tags titles are more prominent. The H1 tag has the highest importance rate for logic as for indexing in search engines. The keywords of the page should at all costs be included then be classified by importance for declination. H2, H3 …

There is no need to use all the six. H1 and H2 are the most important.

8. Influence SEO by Enclosing with Tag Certain Keyword

As it was previously mentioned, the HTML tags play an essential role in your SEO. The main keywords or phrases of your page will be mentored by some very specific guidelines. A bold word is more visible to a reader, this is the same for search engines. The words bracketed by STRONG tags for example, will be highlighted by a higher coefficient in indexing your page.

Although the STRONG tag is probably a little more compared to some, others will fill the same spot. A keyword placed between the HEADER tag of an item is more important than that between the tags FOOTER.

9. Choose the Text Link

The importance of a link is in the transmission of PageRank. It therefore transmits a score divide between the number of links to all pages to which the links point. It is important to connect the pages of your site. But in addition to PageRank, link also transmits a value for the keywords contained therein.

If your link is in the form: click it, then it will share only the PageRank of its page. But if you anchored keywords, it will affect your ranking in the search engines on these specific keywords.

A good back-link is not limit only at PageRank of a page, but also to the number of outgoing links and the quality of keywords include in this link. You can also add the title attribute, yet a little more for SEO ….

10. ALT Attributes to Each Image Tag

The ALT attribute of the IMG tag – image – did not have only the goal to facilitate the understanding in case of non display of this image. We advise you to double this attribute because, as mentioned earlier, it allows access by all, but it also improves your SEO.

The ALT attribute will replace Google’s eyes when the robot will index your site and take into account the different keywords that this attribute has. The search engine Google may also have a component “image search”, it will be important for you to be included, even if the traffic is sometimes given less. Consider incorporating keywords in the ALT attribute of the IMG tag.

<img src= "img/arena.png" alt="our father" />

11. No Follow Attribute to Avoid Diluting the PageRank

PageRank is an index, among other determining your position in a query on a search engine. There is natural to redistribute the PageRank of your best pages to others. But knowing that the transmission of this index is divided by the number of outgoing links on this page, rather than limiting the links, places an attribute so that their engines understand that it should not be followed, and therefore the PageRank will not be refunded.

<a href="#" rel="nofollow">Do Not Re-distribute PageRank</a>

12. Specify the Size of Images

When a visitor visits your site, it browser download multiple files and images to display. To reduce the time between its query and display on your site, we recommend that you specify the size of each image. Thus, the browser will not download an image of 1500 × 1500 pixels for a display of 120 × 120 px on the final – Size defined in CSS. Add WIDTH and HEIGHT attributes to each IMG tag:

<img src="img/pag.jpg" width="81" height="61" alt="trombister"/>

13. The Importance of <time> Tag for SEO in Real Time

Information does not wait and Google indexes even faster… If you publish a blog or site and you date your articles, you will probably noticed that, following its indexing in Google, under the title of your page, just before the beginning of its description, in the results page, appears the date of publication (not indexing) of your article.

Simplify indexing the date of publication by framing it TIME tag:

Posted <time pubdate datetime="2013-01-19">3 days ago</time>.

14. Limit the Number of <div>

We recommend that you avoid as far as possible, the creation of a multitude of layers symbolized by the DIV tags. For sake of clarity and respect of the semantic, please use the new HTML5 tags facilitating the architecture of your site. You will find among them, tags such as HEADER, FOOTER or ASIDE defining certain area and the tags such as NAV or ARTICLE that will be nested in the previous. Everything was done in order to reduce the unnecessary use of DIV tags.

15. Prefer CSS Stylesheets Instead of STYLE Attribute

So that Google robots or other search engines understand and index your page at the best, it is advisable to use the least possible STYLE attribute for a tag. It is better and more convenient to define the style elements from the CSS. So your HTML page will be clearer and easier indexing.

16. Use the ID Attribute as a Selector for Your Stylesheet

If the layout via CSS seems too general and you want to add a valid style for a single item, we recommend that you use the ID attribute for the tag on. So you can select precisely this element from your style sheet without altering the style of the other elements.

HTML:

<ul id="listone">
 <li>Item 01</li>
 <li>Item 02</li>
 <li>Item 03</li>
 <li id="component1">Item 04</li>
</ul>

CSS:

ul#listone li#component1 {
   font-size:26px;color:#333;
}

17. Limit and Combine Files of the Same Type

Wherever possible, it is preferable to attach in a single file all files of the same type. If each page has its own style sheet, it does not pose a problem. But imagine that you have created your site two years ago with its stylesheet. Last year, you added different elements,which, to be implemented, need a new style sheet. Rather than downloading these two sheets, group them into one. You will save time for your display page.

The case of many stylesheets CSS is common when using a CMS (wordpress …). Each plug-in usually has its style sheet, which greatly aggravated the display time especially if we have several, which are installed.

It is the same for the JavaScript files too.

18. Limit the Number of Connections to Other Areas

Just as it is important to limit and combine files of the same type, we advise you to limit the addresses of external connections. For example, when you install on your site a button ‘like’ box-like or Facebook, you create one or more external connections according to the widget. Indeed, when a visitor arrives at your site, in addition to downloading the files to your domain needed to display on your site, the browser should connect to other areas. It must connect to Facebook in our example.

This is often the case when installing a widget (Twitter Button, Like Button, ShareThis …). Limit the number of connections to other areas offers a gain of display time (especially if their server is saturated at certain times).

19. Internet Explorer and HTML5

If all browsers do not understand now all the new HTML5 tags, they will display the type InLine or “online.” We could compare this display to a simple SPAN tag. To use it properly, it will apply a CSS style correspondent. Eg for Header tags:

header {
   display: block;
}

The problem, as so often, come from Internet Explorer. Unfamiliar with these new tags, it will not display it . Nevertheless it is possible, using a little JavaScript to make compatibility possible. You will begin to connect this script to your page between the HEAD tag. It will incorporate a hack or workaround to make the script readable only for IE:

<! - [if IE]> <script src="js/index.js"> </script> <! [endif] ->

The script itself that creates the tags for IE:
document.createElement ("header");
document.createElement ("footer");
document.createElement ("section");
document.createElement ("aside");
document.createElement ("nav");
document.createElement ("item");
document.createElement ("figure");
document.createElement ("figcaption");
document.createElement ("hgroup");
document.createElement ("time");

20. Always Test the Final Rendering on Different Browsers

Take the time to always test the final rendering on different browsers. Online solutions are allowing you to view different versions and platforms.

Always remember to put the style of tag to “zero” so that all the browser go on display more similar. For example, the inner margin or padding is not the same for some element according to the browser which displays.