An example of responsible HTML development
<header role="banner"></header> <nav role="navigation"><nav> <main role="main"></main> <footer role="contentinfo"></footer>
The doctype is a critical for communicating which standard to use when rendering your website. Wee uses HTML5, the modern, semantic format for structuring data which includes a number of new elements.
Whether someone is on a mobile device, legacy browser, or Windows tablet your brand should stay consistent. In addition to the iOS and Safari icons the
favicon.ico files serve most environments.
<link rel="apple-touch-icon" href="/assets/img/icons/touch.png"> <link rel="mask-icon" href="/assets/img/icons/pin.svg" color="#349bb9">
To read more about the Safari 9 mask icon requirements check out the Apple docs.
Wee maintains compatibility with IE9 which requires conditionally serving specific rules and polyfills. If you aren’t supporting legacy browsers feel free to remove this.
<!--[if lte IE 9]> <script src="/assets/js/ie9.min.js"></script> <![endif]-->
<meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Front-End Framework | Wee</title> <meta name="description" content="Blueprint for modern web development.">
It’s best to serve the meta charset and http-equiv values through HTTP headers. There are commented lines in the sample .htaccess file for that purpose. If uncommented, you should remove the two tags from your HTML.
The Open Graph protocol enables any web page to become a rich object in a social graph. Both Facebook and Twitter leverage the tags for extracting page context when sharing.
<meta property="og:type" content="website"> <meta property="og:site_name" content="Wee"> <meta property="og:title" content="Front-End Framework" itemprop="name"> <meta property="og:description" content="Blueprint for modern web development." itemprop="description"> <meta property="og:url" content="https://www.weepower.com" itemprop="url"> <meta property="og:image" content="https://www.weepower.com/assets/img/share.png" itemprop="image">
In the sample HTML Wee dual-purposes the Open Graph tags as Schema properties for the WebPage scope defined on the document root.
While authorship is officially dead the publisher link is still being put to use according to Google.
<link rel="publisher" href="https://plus.google.com/+weecss">
Schema enables search engines to better understand the information on web pages and provide richer search results. It can also enable new tools and applications that make use of the tags.
<html lang="en" itemscopeitemtype="http://schema.org/WebPage">
With Twitter Cards, you can attach photos and other media to Tweets that drive traffic to your website.
Twitter cards can work in conjunction with Open Graph to eliminate duplicate tag content.