Table of Contents
Nagłówek doctype
<!DOCTYPE html>
Uruchamia tryb standardowy we wszystkich nowych przeglądarkach (no more quirks mode!). Jest niewrażliwy na wielkość liter (<!DoCtYpE hTmL> :)
Element <html>
<html lang="en">
Bez żadnych xmlns czy xml:lang. lang=“en” definiuje język strony HTML. W naszym przypadku oczywiście lang=“pl”.
Element <head>
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Lorem ipsum blog</title> <link rel="stylesheet" type="text/css" href="style-original.css" /> <link rel="alternate" type="application/atom+xml" title="Lorem ipsum feed" href="/feed/" /> <link rel="search" type="application/opensearchdescription+xml" title="Lorem ipsum search" href="opensearch.xml" /> <link rel="shortcut icon" href="/favicon.ico" /> </head>
Kodowanie znaków
Całą pierwszą linijkę możemy zapisać tak:
<meta charset="utf-8">
<link ... >
W HTML5 mamy dwa rodzaje linków: Linki do zewnętrznych zasobów to linki wykorzystane do powiększenia dokumentu i hiperlinki, które są zwykłymi odnośnikami do innych dokumentów. Z przykładów powyżej tylko jeden to link typu pierwszego (rel=“stylesheet”). Reszta to linku do innych dokumentów. Listę możliwości znaleźć można na: http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#linkTypes.
rel="stylesheet"
<link rel="stylesheet" href="style-original.css" />
Pomijamy typ, bo mamy obecnie tylko jeden język stylów.
rel="alternate"
<link rel="alternate" type="application/atom+xml" title="Lorem ipsum feed" href="/feed/" />
Służy automatycznemu wykrywaniu kanałów RSS czy Atom.
Nowe elementy semantyczne w HTML5
<section>
<nav>
<div id="nav"> <ul> <li><a href="o_mnie.php">o mnie<strong>.</strong></a></li> <li><a href="http://galeria.sqbell.pl">galeria<strong>.</strong></a></li> <li><a href="http://blog.sqbell.pl">blog<strong>.</strong></a></li> <li><a href="http://wiki.sqbell.pl">wiki<strong>.</strong></a></li> <li><a href="inne.html">inne<strong>.</strong></a></li> </ul> </div>
A po nowemu:
<nav> <ul> <li><a href="o_mnie.php">o mnie<strong>.</strong></a></li> <li><a href="http://galeria.sqbell.pl">galeria<strong>.</strong></a></li> <li><a href="http://blog.sqbell.pl">blog<strong>.</strong></a></li> <li><a href="http://wiki.sqbell.pl">wiki<strong>.</strong></a></li> <li><a href="inne.html">inne<strong>.</strong></a></li> </ul> </nav>
Po co? Uporządkowanie, ułatwienie dla słabo widzących etc.
<article>
<aside>
<hgroup>
<header>
<footer>
<time>
<time datetime="2009-10-22" pubdate>October 22, 2009</time> (1) <p class="post-date">October 22, 2009</p> (2)
Po nowemu (1). Element <time> składa się z trzech części: zrozumiała dla maszyn data, zrozumiała dla ludzi data i opcjonalna flaga pubdate.
Info: http://www.whatwg.org/specs/web-apps/current-work/multipage/common-microsyntaxes.html#valid-global-date-and-time-string.
<mark>
Info
