HTML goes back a long way. It was first published as an Internet draft in 1993. The ’90s the HTML version 2.0, versions 3.2, and 4.0 (in the same year!), and finally, in 1999, version 4.01 were released.Since then the focus of web standards shifted to XML and XHTML, and HTML was put on the back burner. But looks like HTML was quite stubborn and thus refused to die, it saw its rebirth as HTML 5. It was a result of work of a few people who started the Web Hypertext Application Working Group (WHATWG) in 2004 and created the HTML5 specification. W3C published the first working draft for HTML5 in 2008. While HTML5 is still under development it is quite essential to understand its basics to get the most out if it.
HTML gives search engines the needed context they need to understand what’s contained in a web page. A search Engine won’t look at how beautiful your site looks, it won’t make a difference to the crawlers whether it’s having all the glitter and sparks or not, though it may affect your visitors. To understand the way a Search Engine Crawler works you may Download Lynx a web browser that displays only text and attributes, you may be able to view your website from the eyes of a Search Engine.
So What’s New in HTML 5?
Well if you look at the HTML5 websites and applications you may feel that it is more of a programming language, but the truth is that it’s the same old HTML with some new markup tags and attributes, which make web designing easier than ever before. It’s backward compatible with HTML4 and thus you need not learn it from scratch. The new semantic tags, web page segmentation, the new link types, improved Media Handling with and tags are just a few important new features that we will discuss in this article, that are sure to affect your SEO strategies.
And what are the features that affect My SEO and How?
HTML5 is based on various design principles,
- Compatibility
- Utility
- Interoperability
- Universal access
With these four principles around HTML5 has made sure that it is coded in an intelligent way to move a step closer towards semantic web.
Well anyone who has been in the game of SEO will be surely aware of its basic pillars:
- Search Engine crawlers indexing your pages in their databases
- Speed , faster loading WebPages are ranked high
- Quality (not quantity) of links, pingbacks.
HTML5 promises to deliver all of it to you, but in a bit more intelligent yet simple way.
Web Page Segmentation for enhanced Search Engine Indexing
Remember HTML5 is all about evolution and not more of a revolution. Thus it has introduced simple yet effective way to arrange our code so as to make it more semantic and express it better. For example, Google when analyzed, found out that many a people were using common ID names for DIV tags ,like DIV id=”header” to mark up header content. The problem here is that DIV tags don’t add semantic value or give context to what’s inside it.
Here comes the evolution with HTML5, with the new elements such as,< header>, <article>, <aside> and <footer>, the segmentation of the web page becomes more meaningful. Once HTML5 becomes widely accepted search engines will surely look for these tags for better understanding.
Presentation and Content
Although Content is often considered as the King in a Blog or website, nowadays it’s the way of presentation (read: SEO) that matters a lot. With the new Tags to separate various sections of your page HTML5 gives you a way to affect your SEO. Those of you who have designed websites in the past must have tried to divide your pages into various sections like Headers, footers navigation, sidebars etc. for better classification so as to make it easier to understand which part contains what information, the same is now very smoothly done with the help of HTML5 tags like <header>, <article>, <aside> and <footer>, etc.
<article>
Article tag is just the perfect way to define the main contents of your page. With so many different information on the same page, the <article> tag offers you to indicate the content of a web page, blog post, comment, article . It would help directing the search engines to pay more emphasis to the article (i.e. the main content) via this tag. For further reading read http://dev.w3.org/html5/spec/Overview.html#the-article-element
<section>
The new <section> tag can be used to identify separate sections on a page. A<section> tag can be used to group content together and may contain further<section> tags to create the subsections. This is quite similar to sections and subsections that we see in a book. This allows
each section to have its own heading, giving search engines a clear hint of what the content in the section is all about. Thus search engines can get a better understanding of how the web page is segmented and structured.
<header>
A header element is used to set the header section of a document and represents a group of introductory or navigational aids. Often they contain the standard h1 to h6 heading elements, i.e. the hgroup elements though not necessary always. Header should not be confused with hgroup elements (standard h1 to h6 heading elements) actually headers may contain may contain all sorts of content, from the company logo to the search box. So now instead of using <div id=”header”> for header section you can directly use <header>,as it offers better semantics.
<footer>
Traditionally footers of two types, 1st those of text type, which basically carry a copyright info, email, and the second one is the Web2.0 Footers with larger area and which carry Categories , links and content in them. In a Web page footer is located at the bottom and usually contains the copyright information, links to pages etc. etc. about the page, although, it isn’t necessary to be that way. A Footer element represents the footer content of its nearest sectioning element.
Footers have been described as the most abused part of a website which is often given the least care. Thus while search engines might not pay much interest to them as header, they do have their own role in SEO. For example a good footer with adequate links extremely helpful to search engines, especially if your navigation appears as graphic elements. At the same time, it’s helpful to users, who can navigate to another section without scrolling back to the top.
The <header> and <footer> tags can be used many times on one page, thus providing a very flexible layout.
<nav>
The purpose of this element is to summarize a group of links that serves as a collection of offsite links, document or site navigation. It’s a common practice by many developers to use <ul> and <li> tags for navigation and then style these elements as menu items. But this practice often leads to confusion between a list that has links in it and a list that is simply navigation. However you can also use<ul> and <li> tags with <nav> .
<aside>
It is used for related content or pull quotes. It usually contains the content which could be considered separate from that content. Such sections are often represented as sidebars
All these elements and sectioning elements can be styled with CSS. They may not have an effect on Search engine ranking now but in future search engines will definitely be taking advantage of these elements as they crawl and index pages.
Different Link Types for improved links
Other Major improvements are Link Types. Anyone with even the most basic knowledge of SEO is aware of the importance of hyperlinks in and out of a web page. It is not a hidden fact that search engines study links in a web page to see what web pages it points to as well as to see what web pages point to it, and many bookmarking sites have grown along this concept of linking. HTML5 gives a better way of managing these links with new Link Types. It helps the crawlers know that what type of hyperlink the link actually is. Attribute values likerel=”author” and rel=”license” essentially allow us to describe our links better.
A full list of link types can be found over here.
A Plugin Free Environment for enhanced Webpage speed
HTML5 provides native support for many features that used to be possible only with plugins. Very often plugins present problems like them being not installed, disabled, blocked and more over they are difficult to integrate with the rest of an HTML. This is where HTML5 introduces its native functionality. The native elements such as and can mean increased interoperability with search engines. Thus search Engines will easily index our audio and video content as well. Various websites are already gearing up to adopt HTML5.
For example to insert video, use a <video> tag and set its src attribute to URL containing a movie. You can also display playback controls by including thecontrols attribute, thus removing the need of a flash player. However using this codec can also put you in trouble if the user is using a browser that doesn’t support <video> tag or the media codec is not supported.
I want to know more about HTML5
Well after reading this post if you wish to learn more about HTML5 we have a few recommended sources that may help you learn more about this wonderful technology:
If you found this post interesting consider leaving a piece of comment.
(JSP
