Here's a basic HTML template page to get you started.
The language attribute (lang
) helps screen-readers and translation software read your site (learn more). Be default, it's set to English. Change it as needed for your local language.
Sometimes newer versions of IE will use not-so-new versions of their rendering engine. We tell IE to use the latest available version of it's rendering engine, or Chrome Frame if it's installed.
Modern mobile browsers often "fake" a desktop sized viewport so that websites that aren't mobile-optimized aren't weirdly zoomed in when you load them. The viewport tag tells browsers that the viewport should be the size of the screen (because our site is mobile-optimize).
Internet Explorer 8 and lower do not recognize the new HTML5 semantic elements (like <header>
, <section>
, and so on). The HTML5 Shim is a little JavaScript snippet that we load conditionally on older IE browsers to ensure those elements render correctly.
The site favicon and touch icons for when people bookmark your site or app on the homescreen of their mobile device. This now includes support for Windows phones, too. (Icons aren't included with Kraken. Add them to img
folder.)
A friendly message encouraging visitors on older versions of IE to upgrade their browser. They can still access the site content. It will just look a bit funny.
For faster loading and better site performance, JavaScript files are included in the footer, not the header.
An optimized version of Google Analytics is preloaded for you. Just add your site's ID (or replace the code altogether if you're using another analytics platform). Adapted from HTML5 Boilerplate.