Przykładowa strona w HTML5/CSS3

Wyniki testu zgodności przeglądarek z HTML5 i CSS3

Test wykonywany na stronie http://html5test.com/ w dniu 15.02.11 dał następujące wyniki: Chrome 9.0 - 242 pkt, Opera 11.01 - 177 pkt, Firefox 3.6.13 - 139 pkt, IE 8 - 27 pkt.

Strony w HTML 4 lub w XHTML 1.1 zawierają zazwyczaj strukturę (m.in. nagłówki, stopki i kolumny), którą dotychczas budowano za pomocą znaczników blokowych div wraz z nadanymi identyfikatorami (id) lub klasami (class). Nowe znaczniki pozwalają budować strukturę dokumentu w sposób bardziej zrozumiały i przejrzysty. Znacznie uproszczono strukturę części head dokumentu.

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>HTML5 i CSS3</title>
  </head>
  <body>
  <header>...</header>  	            
  <nav>...</nav>	          
  <article>	          
    <section>	           
      ...
    </section>
      ...
    </section>
  </article>	
  <aside>...</aside>	
  <footer>...</footer>	  
  </body>
</html>

Wykorzystano nowe znaczniki: Znacznik <section> jest ogólnym kontenerem powiązanych treści, <article> to wyspecjalizowany rodzaj elementu <section>, natomiast znaczniki <header>, <footer>, <nav>, <aside> itp. są kawałkami określonego, specyficznego rodzaju treści. HTML5 nie deprecjonuje elementu <div>, który nadal jest używany w charakterze kontenera dla niekoniecznie powiązanych ze sobą semantycznie treści.

Nowe znaczniki semantyczne nie wprowadzają żadnego formatowania - od tego są arkusze stylów.

Najwięcej zainteresowania wśród internautów wywołała możliwość dołączania na własnej stronie plików wideo i audio dzięki nowym znacznikom <video> i <audio>. Plik z filmem to tzw. kontener zawierający w sobie zarówno dane audio jak i wideo. Niestety jak na razie nie ma takiego kontenera, który byłby obsługiwany na pewno przez wszystkie przeglądarki.

Aby uprościć walidację danych z formularzy wprowadzono nowe natywne kontrolki wyspecjalizowane do wprowadzania danych odpowiedniego typu - przeglądarka nie pozwala wprowadzić błędnej wartości lub protestuje przy zatwierdzaniu całego formularza. Jeśli jakaś przeglądarka nie obsługuje jeszcze nowej kontrolki, wówczas użytkownik otrzymuje zwykłą kontrolkę typu text (łagodna degradacja).