HTML5 Line & Theme Break

HTML Line

In HTML4 the <hr> element created a horizontal rule.
In HTML5 it is now a semantic element and defines a thematic break such as a change in topic.
Browsers will display an <hr> tag as a 1px horizontal line.


To the website visitor, this indicates the end of section and the start of something different.
In HTML5, this also indicates a change in topic to the search engines so the <hr> now has a dual purpose.
Styles
The <hr> is pretty much useless as a visual indicator on anything other than a black on white page. To give it more power, the widget adds the ability to style it as a line with controls for height, color and style - dashed, dotted, double or solid.
Note that the line height should be at least 3px if "double" is selected.
Arrows
To add more functiomality, the line can be given left and right arrows. These are added using the CSS3 pseudo elements ::before and ::after.
The font size of the arrows can be adjusted as well as their position in relation to the ends of the line and their vertical position.
To illustrate this, the third line above has a larger font size and the arrows are moved away from the line.
Responsive
When used on a responsive width page, the widget can be set to 100% width with a maximum width.
If the ends of the line need to be short of the browser/device screen edge, reduce the percentage width.
If viewing this page on a computer, reduce the browser width to see the effect of setting a percentage width of less than 100.


EverWeb Widgets