EverWeb Widgets HTML5

HTML5 - Better Web Design & SEO

HTML5 in EverWeb
EverWeb HTML5

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.

SEO Crawler
Not So Spider Friendly

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

SEO friendly
Spider Friendly

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.

[1] Sections indicate principal content
[2] Article is a self contained block of info
[3] Aside is secondary but related
[4] Figure is an illustration with related description

For more info about these containers see the Elements section of this site.

HTML5 Shiv

Out of date browsers are not compatible with HTML5 since they don’t know what the new elements are. To overcome this problem, and to support browsers such as Internet Explore V 6 to 8, it is necessary to add the html5shiv.js which is a javascript that will fool these ancient browsers into thinking that they understand HTML5.
Use the button to find out how to download and easily install this usefull script.

Go To Elements
HTML5 Shiv