<html lang="cs">
<head>
<meta charset="utf-8" />
<meta name="description" content="Stručný popis stránky (SEO)" />
<meta name="keywords" content="Klíčová slova stránky (SEO)" />
<meta name="author" content="all: jméno; e-mail" />
<meta name="robots" content="index, follow" />
<meta name="googlebot" content="index, follow, snippet, archive" />
<!-- <meta name="viewport" content="width=device-width, initial-scale=1" /> <!-- pro responzivní web, viz např. www.vzhurudolu.cz/prirucka/viewport-mobily -->
<title>Název stránky v titulkovém pruhu prohlížeče (SEO)</title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<link rel="stylesheet" type="text/css" href="styly_display.css" media="screen" />
<link rel="stylesheet" type="text/css" href="styly_print.css" media="print" /> <!-- odlišné zobrazení na tiskárně -->
<!--
<link rel="stylesheet" type="text/css" href="styly_mobile.css" media="handheld" />
klasická varianta pro mobil, kterou ale mnoho mobilů s Android a iOS již nepodporuje, vhodné řešit tzv. responzivním webem
-->
<!-- CSS deklarace pro responzivní web, který se automaticky přizpůsobí rozdílným velikostem displeje (počítač, notebook, tablet, mobil)
(nutné ale vyhodit <link media="screen" a doplnit <meta name="viewport, viz výše">
<link rel="stylesheet" type="text/css" media="screen and (min-width: 1321px)" href="full.css" />
<link rel="stylesheet" type="text/css" media="screen and (max-width: 1320px)" href="large.css" />
<link rel="stylesheet" type="text/css" media="screen and (max-width: 900px)" href="medium.css" />
<link rel="stylesheet" type="text/css" media="screen and (max-width: 560px)" href="small.css" />
jednodušší varianta responzivního webdesignu pro smartphone s rozlišením do 1024px a displeje s vyšším rozlišením
(nutné ale vyhodit <link media="screen" a doplnit <meta name="viewport, viz výše">
<link rel="stylesheet" type="text/css" media="screen and (min-width: 1025px)" href="styly_display.css" />
<link rel="stylesheet" type="text/css" media="screen and (max-width: 1024px)" href="styly_mobile.css" />
-->
</head>
<body>
<main>
<header>
</header>
<nav>
</nav>
<section>
<article>
</article>
<article>
</article>
</section>
<!-- 3. sloupec
<aside>
</aside>
-->
<footer>
</footer>
</main>
</body>
</html>
3 sloupce v HTML5
:: Základní CSS deklarace pro výše uvedený příklad (web s 2 sloupci)
:: Základní CSS deklarace pro mobilní zařízení (bez sloupců)
:: Základní CSS deklarace pro tiskárnu
:: Ukázka výše uvedeného kódu (se základním obsahem, odlišným zobrazením pro tisk a především pro smartphone s max. šířkou displeje 1024px