The advent of HTML5 has created a new set of opportunities for web developers and site architects. The new system has also forced those unfamiliar with its origins to reassess how they view their site design, especially when it comes to questions of search engine optimization. How will HTML5 interact with the current search engine spiders, such as Googlebot and Bing, and how will those crawlers evolve in this dynamic environment?
New Content Tags
One of the biggest new features in HTML5 is the new set of markup tags. These tags have been designed to reflect the new state of web content, such as articles, sidebars, headers and footers. Many of these tags replace or supplement the <div> tags from HTML4 with additional functionality
Page Function: Similar to <h1>, <h2>, etc., but can also contain a logo and navigation data.
SEO Function: Just as with the <h1> tags, the <header> tags inform the crawlers that the contents are highly relevant to the page content.
<header> <img src = “images/company_logo.jpg”> <h1>Main Header</h1> <h2>Subheadline</h2> </header>
Page Function: The <nav> tag allows designers to separate the major navigation functions from the page content. The <nav> tags typically nest inside the <header> tags at the top of a page.
SEO Function: Links enclosed in a <nav> tag inform the spiders about the major sections of a site’s content.
<nav> <ul> <li><a href=”/dccomics”>DC Comics</a></li> <li><a href=”/marvelcomics”>Marvel Comics</a></li> <li><a href=”/imagecomics”>Image Comics</a></li> <li><a href=”/darkhorsecomics”>Dark Horse Comics</a></li> </ul> </nav>
Page Function: The <article> tag contains independent, self-contained content. Although the content in the <article> tags can relate to the other content on the page, it can also stand alone.
SEO Function: Since “content is king” for search engines, the primary target for crawlers will be within the <article> tags.
<article> <h1>Superman</h1> <h2>Origin of Superman</h2> <p>Rocketed as a baby from the doomed planet Krypton, Kal-El was adopted by Jonathan and Martha Kent, a childless couple from Smallville, Kansas, and named “Clark Kent”. </p> </article>
Page Function: The <aside> tag functions as a “sidebar”, a space to place content relevant to an article, but not as part of the main content.
SEO Function: Content within the <aside> tag gives the spiders another source from which to draw search results.
<aside> <p>As teenagers, Jerry Siegel and Joe Shuster, the creators of Superman, were both in love with a girl named Lois, who provided the inspiration for Lois Lane.</p> </aside>
Page Function: The <section> tag separates long streams of content. Each section contains content relevant to the overall theme, but also with its own internal theme.
SEO Function: Users with more specific search criteria can locate their relevant content within a section.
<section> <h2>Origin of Superman</h2> <p>Clark Kent grew up in Smallville, Kansas, where he first exhibited his powers as Superboy.</p> </section> <section> <h2>Enemies of Superman</h2> <p>Among Superman's enemies are the alien intelligence Brainiac, the kryptonite-powered cyborg Metallo, and the ruthless CEO of Lexcorp, Lex Luthor.</p> </section> <section> <h2>Allies of Superman</h2> <p>Batman, Wonder Woman, Green Lantern and other members of the Justice League aid Superman in his never-ending battle.</p> </section>
Each of these tags helps to differentiate content and allow search engines an easier method of discerning the relevant items. In future articles, we will explore other facets of HTML5 and how they tie into search engine optimization.