EverWeb Widgets HTML5

HTML5 Article

HTML5 Article Text Widget

Article <h1> Heading

An article element contains information that will still make sense if it is removed from the rest of the page content. The obvious use would be for news updates, blog posts and comments.
The article has many other uses including product descriptions and specifications, sales flyers, special offers and any other content which could be used elsewhere or on another web page.
Time sensitive information can be enclosed in an article element so that it can be easily switched and/or distributed. Note that this example has minimal styling and the footer has not been emplyed.
The styled example below has information that could be included in any page where information about using fonts is required and has the © notice in the footer so that we know who authored it and when.

Non Web Safe Fonts

When using non web safe fonts it is essential to provide a web safe font as a fallback in case the vistor's computer doesn't have that particular font installed.
The fallback font should be of the same generic group as the first choice one. The fallback should be tested in the browser to make sure that it maintains the integrity of the the page layout.
This example of the Article Text Widget uses a Google hosted font "Dosis". The font is loaded from the Google server by referencing it in the page head code like this…

<link href='http://fonts.googleapis.com/css?family=Dosis:400,600' rel='stylesheet' type='text/css'>

There are lots of fonts installed on a Mac but the majority of them are totally unsuited for the web. Think carefully before using any non web safe fonts. Most visitors don't care about fancy fonts as long as they can read the content easily.

© Roddy McKay - 2014

Using Hyperlinks

As can be seen from the widget settings, there is an option for styling hyperlinks.
The links can be styled for color, hover color and text decoration. The options are "none", "underline" and "line-through".
Links are inserted into the text box using HTML like this...

<a href="page-name.html">Link Text</a>

If the linked page is to open in a new window, use this...

<a href="page-name.html" target="_blank">Link Text</a>

Get The Widget

Widget Settings

HTML5 Article Heading Text Content Footer
HTML5 Article Text