HTML5 Layout

Base HTML5 layout.

Installation

You can clone the repository

$ https://github.com/ahtohbi4/html5-layout.git

or just copy content of the source file.

Components

Charset (required)

Charset of page content.

<meta charset="utf-8">

Page title (required)

Title which is showing in browser's tab.

<title>%title%</title>

SEO page description

Google will sometimes use the meta description of a page in search results snippets. Lern more...

<meta name="description" content="%description%">

SEO page keywords

May be taken into account when the Yandex robot determines if a page matches a search query. But Google does not use it in web ranking.

<meta name="keywords" content="%keywords%">

Open Graph

See http://ogp.me/ for more information.

Base meta:

<meta property="og:type" content="website">
<meta property="og:url" content= "/path/to/target/page/">
<meta property="og:title" content="%title%">
<meta property="og:image" content="/path/to/image.jpg">

Additional meta:

<meta property="og:description" content="%description%">
<meta property="og:determiner" content="%determiner%">
<meta property="og:locale" content="en_EN">
<meta property="og:locale:alternate" content="ru_RU">
<meta property="og:site_name" content="%name%">
<meta property="og:audio" content="/path/to/audio/file.mp3">
<meta property="og:video" content="/path/to/video/file.avi">

Twitter Cards

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@username">
<meta name="twitter:title" content="%title%">
<meta name="twitter:description" content="%description%">
<meta name="twitter:image" content="/path/to/image.jpg">

Google instructions

<meta name="google" content="notranslate">

Mobile viewport scale

<meta name="viewport" content="width=device-width, initial-scale=1">

Phone number detection by device

<meta name="format-detection" content="telephone=no">

Cononical link

<link rel="canonical" href="/cannonical/link/to/current/page/">

Alternate link

<link rel="alternate" hreflang="ru" href="/path/to/alternate/ru/language/of/current/page/">
<link rel="alternate" hreflang="ar" href="/path/to/alternate/ar/language/of/current/page/">
...

Prefetch DNS

Identifies a DNS query to resolve the background, so that requests can occur more quickly. Lern more...

<link rel="dns-prefetch" href="//example.com">

Pre connect

Initiating an early connection, which includes the DNS lookup, TCP handshake, and optional TLS negotiation, allows the user agent to mask the high latency costs of establishing a connection. Lern more...

<link rel="preconnect" href="//example.com" crossorigin="use-credentials">

Prefetch of resources

Identifies a resource file, such as an image or a CSS stylesheet, to be downloaded into the cache. Lern more...

<link rel="prefetch" href="//example.com/path/to/next/page/or/single/resource/" crossorigin="use-credentials">

Pre render of next page

Identifies a webpage to load in the background, in case the user wants to navigate to it next. Lern more...

<link rel="prerender" href="//example.com/path/to/next/page/">

Browser MS configuration

<meta name="msapplication-config" content="/browserconfig.xml">

Other meta by Microsoft

<meta name="application-name" content="%name%">
<meta name="msapplication-badge" content="frequency=60; polling-uri=http://example.com/path/to/polling.xml">

CSS for layout

Use a some number of subdomains to parallel downloads.

<link rel="stylesheet" href="//st1.example.com/path/to/first-view-style.css">

Google Analytics code

<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create','%id%','auto');ga('send','pageview');</script>

Tests

Always check your pages with official W3C validator.

License

MIT © Alexander Antonov alexandr-post@yandex.ru