HTML5 - Better Web Design & SEO
Out With The Old HTML4...
One of the biggest problem with software that allows the user to drag and drop items is that the document may look good but its structure is completely meaningless.
Since most drag and drop web design apps are derived from DTP (Desktop Publishing) software, a lot of users seem to think that they can treat a web page just like a printed document.
The first step to understanding web design is to recognize that a web browser is not made of paper like a book, newspaper or magazine and an HTML document consists of code that the human visitors never see.
The search engine spiders do not see a “piece of paper” - they read a bunch of code and try to make sense of it.
Although we may see a nice layout with separate pieces of info arranged neatly in blocks with colored backgrounds and pseudo headings, all the spiders see is a bunch of jumbled and unrelated information.
Under HTML4 we only had HTML headings to add any kind of structure to a web page and to apply some order to the info enclosed in meaningless divs.
HTML4 relied on us placing the information in a logical order in the flow of the markup of the HTML document and interspersed with h1 to h6 headings to denote hierarchy.
The website “designer” can easily and quickly destroy the sense of the document by dragging the items around to produce a meaningless jumble of unrelated parts in an attempt to create a pretty layout. Visual web designers tend to place emphasis on the eye candy aspect of a page and ignore the fact that the content should actually have some meaning to both the humans and the search engine spiders.
A good designer will produce a visually pleasing page with semantic meaning. To do this requires a knowledge of both graphic design and correct layout.
… In With The New HTML5
While old school designers grimly hang onto boring and ridged table layouts, middle school designers are heading the same way by showing a great reluctance to give up their generic divs.
It's time for the rest of us to embraced the semantic markup offered by HTML5 to create better, more meaningful layouts.
HTML5 gives us the tools to not only create visually attractive layouts but to organize the information in containers that give meaning and sense to the layout from the point of view of the search engines.
EverWeb is steering us in the right direction by using the new <header> and <footer> elements which denote the beginning and end of the main document but what about all the stuff in the middle? With HTML5, we now have some descriptive containers like section, article, figure and aside but why are they better?
These elements can have their own header, heading, content and footer and, in the case of the figure, some media content with a related description. Although we can design the same elements using divs and headings - and they may look the same to our website visitors - they represent a whole new concept as far as the search engine spiders are concerned.
Instead of trying to make sense of a collection of seemingly unrelated pieces of information, the spiders can crawl the content of these containers and index it appropriately.
 Sections indicate principal content
 Article is a self contained block of info
 Aside is secondary but related
 Figure is an illustration with related description
For more info about these containers see the Elements section of this site.