Add HTML5 Element 'Main'

I thought it would be a good idea to add the html5 element `main` instead of just an ordinary div. The [W3C specification](http://www.w3.org/html/wg/drafts/html/master/grouping-content.html#the-main-element) originally written in December 2012 states:

> The main element represents the main content of the body of a document or application. The main content area consists of content that is directly related to or expands upon the central topic of a document or central functionality of an application.

> The main content area of a document includes content that is unique to that document and excludes content that is repeated across a set of documents such as site navigation links, copyright information, site logos and banners and search forms (unless the document or applications main function is that of a search form).

Which is why it only surrounds the `#content` div and not the sidebar.

> User agents that support keyboard navigation of content are strongly encouraged to provide a method to navigate to the main element and once navigated to, ensure the next element in the focus order is the first focusable element within the main element. This will provide a simple method for keyboard users to bypass blocks of content such as navigation links.

So it sounds like an element that by default assumes the same responsibility of the ['main' ARIA role](http://www.w3.org/TR/wai-aria/roles#main).

I thought we should add this because it makes this starter theme even more semantic and the element still functions as a div.

FYI I've broken this pull request into two commits. The first commit just adds the `main` element. The second commit updates the id's and classes because I thought having a `div#main` would be confusing so I tentatively renamed it to `div#page-body` with a class `div.site-body`. Feel free to rename those if you want I just wanted to get rid of the confusion of having two different mains.