There is a lot of buzz about HTML5 being a breakthrough which will improve websites from a design view point and SEO. Even though HTML5 won't be completely supported until 2022, there is no reason not to become familiar with some of the basics.
HTML5 uses new semantically rich elements that convey the purpose of the element to both developers and browsers. Tags like <header>, <footer>, <aside>, <nav> make it easier to structure pages and enables browsers to have more control regarding how the web pages are displayed. The hope is that once big named browsers are compatible with HTML5 loading times will be faster, sites will be easier to navigate and there will be richer content.
Here list a list of some the basic elements:
<header> - The header element is intended as a container for introductory information about a section or the entire webpage. It could contain the website name, a tag line or slogan and/or the company logo.<nav> " This element is rather self-explanatory. It creates the navigation or menu bar. Keep in mind that not all the links in a web page have to be inside a <nav> element; only those that are part of the main navigation should be container here.
<section> - Represents a thematic grouping of content, typically with its own heading. Ideal for grouping content that share a specific theme like news articles and to break up a document into topical sections. It is not intended to contain the main body of a document since this is what the article element is for (see below).
<aside> - This element represents content that is related to the main content but is not really part of it. Quotations, a sidebar of related links, advertising, etc. would be contained within the aside element.
<footer> - This element contains additional information related to its parent element. A footer placed at the end of the body will provide additional information about the document. Some examples could be an authors bio, links to related articles or copyright information. This element can also be used inside different sections within the body, giving additional information about specific sections.
<article> - This element represents a self-contained section of relevant information. This can be in the form of newspaper articles or blog entries. The <article> element can be nested to show a list within a list of related items; for example, users comments in a blog entry.
<hgroup> - This element is used to group headings. Its ideal for when the heading of a section or document has multiple levels of sub-heading. It should only contain a group of <h1>"<h6> element(s), and be used for subtitles, tag lines, or alternative titles.
HTML5 can be an amazing design tool. With the addition of new elements unique to HTML5 the mark-up of a document easier and more intuitive. The page is effectively divided into sections and as websites get more and more complex, these tags make it easier to identify, style, and shape the layout of a website.
(If you liked this, you might also enjoy What SEOs Ought to Know About HTML 5 )
About the Author: Laura Peragallo
