EverWeb Widgets HTML5

HTML5 <h2> Heading

HTML5 Heading Widget

Using HTML Headings With HTML5

When using HTML5 elements, h1 to h6 headings are mostly redundant since the elements themselves contain the headings that are related to the content.
Of course, its still necessary to use an h1 heading for the website name in the header and an h2 heading for the page name.
As can be seen from the screenshot of the widget settings to the right, headings can be inserted correctly using the chosen font, a web safe fallback font and the generic group.
Using a web safe fallback font and a generic group is essential if a non web safe font - and even a Google hosted font - are used.
Web safe fonts are those that are available on every computer - not just Macs - so, if a chosen font fails to download, the browser will substitute the fallback font rather than the browser default.
A fallback font should be chosen so that the web page layout is not compromised when it is substituted. Get more information about choosing and using fonts and info about fallbacks and generic groups.

Widget Settings

Enter the heading text and the desired font family.
If the font is Google hosted, check the box to add the link to the font in head of the page HTML doc.
Set the font size, color and text align.
Choose the heading type. Note that, although h1 to h4 are available, only h1 and h2 are used in practice as mentioned above.
Set the font style and weight.
Adjust the letter spacing as required but do not overuse this control as too much spacing can cause readability issues.
Choose the web safe fallback font and the generic group. In general, the generic group will be san-serif since the use of serif or monospace fonts is not recommended for websites.

HTML Headings & Page Layout

With HTML4, headings need to be added to the page in the correct order so that the HTML document makes sense to the search engine spiders. There's no point in adding them as an afterthought and then dragging them into position. This is just a waste of time.
Using HTML5 elements to layout the page content simplifies this since each one can have its own h1, h2 and, if necessary, h3 heading.
The exception is the website name in the header <h1> and the page name <h2>. The h1 should be added to the header in the master page or page template and the h2 before any other content is added to the content section.

Get The Widget

Widget Settings

HTML5 Heading Widget
HTML5 Headings Widget