HTML 5

  • Stále se jedná o draft - nejedná se o standard (doporučení - recomendation).

    • stále se vyvíjí, může ještě doznat určité změny

    • otevřená témata:

      • de facto semantická definice některých elementů, určených původně k prezentaci

      • detaily přístupnosti a nezávislosti na médiích jako jsou atributy alt a summary.

  • Definuje jazyk HTML 5, který může být aplikací SGML (HTML) i aplikací XML (XHTML).

    • obě syntaxe jsou přípustné.

  • Definuje detailní model zpracování podporující interoperabilní implementace.

  • Vylepšuje značkování dokumentů.

  • Uvádí značkování a API pro např. Webové aplikace.

  • Cíle:

    • HTML 4 a starší - příliš volná struktura

    • XHTML 1.x - příliš pevná struktura

    • Vytvořit standard, který bude využívat to dobré z obou specifikací.

Různé syntaxe HTML 5

  • HTML

    • zpětně kompatibilní s HTML 4 a XHTML 1

    • není plně kompatibilní s SGML specifikací HTML 4:

      • nepodporuje instrukce pro zpracování

      • a zkrácený zápis značek

        • prázdnou počáteční značku (<>)

        • prázdnou koncovou značku (</>)

        • …

    • mimetype text/html

  • HTML sandboxed

    • Syntaxe je shodná se syntaxí HTML.

    • Vhodné pro použití se stránkami z nedůvěryhodných zdrojů.

      • mimetype text/html-sandboxed

  • XML

Deklarace typu dokumentu

  • Slouží pouze k tomu, aby prohlížeče správně zvolili způsob zobrazování stránky.

  • Nemá žádný jiný účel.

  • Pro XML syntaxi je volitelná.

  • DOCTYPE: 

<!DOCTYPE html>

  • Při použití HTML syntaxe není case-sensitive.

  • Jelikož se používá pouze pro zvolení správného režimu zobrazení prohlížeče, neobsahuje odkazy na DTD.

Novinky v HTML 5

  • Možnost přímo vkládat značkování SVG a MathML

  • Ukázkový dokument s vloženým SVG obrázkem: 

<!DOCTYPE html>
<title>SVG v text/html</title>
<body>
 <p>
 Modrá elipsa
 <svg>
  <ellipse cx="100" cy="100" rx="90" ry="30" fill="blue"/>
 </svg>
 </p>
</body>

Změny v jazyce

  • Přidána řada nových elementů

    • popis struktury

      • section, article, aside, header, footer, figure,

      • … 

<figure>
 <video src="sample.mp4"></video>
 <figcaption>Ukázkové video</figcaption>
</figure>

  • multimédia

    • video, audio.

  • nové typy vstupů ve formulářích (hodnoty atributu type u elementu input)

  • vynechány některé elementy (frame, frameset, noframes, …)

    • vynechány některé atributy

    • více viz specifikace a popis rozdílů oproti HTML4

Změny v jazyce (pokračování)

  • Přidány nové atributy:

    • media u elementu a a area

    • globální atribut contenteditable

    • draggable

    • změna hodnot atributy type u elementu input

    • …

  • Vynechány některé elementy

    • frame, frameset, noframes - nelze používat rámce pro zobrazení stránek - snižují přístupnost.

    • font

    • applet

    • …

  • Vynechány některé atributy

    • rev, charset (link, a)

    • longdesc (img, iframe)

    • target (link)

    • align

    • background

    • bgcolor

Změny v jazyce - API

  • Přidána nová API

    • pro přehrávání multimedií (videa/audia)

    • pro offline práci s webovými aplikacemi

    • umožňující webové aplikaci registrovat se pro zpracování určitého typu obsahu

    • pro editaci obsahu ve spolupráci s atributem contenteditable

    • pro Drag&Drop v kombinaci s atributem draggable

    • …

Generování HTML5 pomocí XSLT

  • Deklarace typu dokumentu u HTML 5 neobsahuje odkazy na DTD.

  • Deklarace typu dokumentu slouží pouze k přepnutí prohlížeče do režimu pro HTML5.

  • Řešení:

    • Možno generovat deklaraci typu dokumentu: 

<!DOCTYPE html SYSTEM 'about:legacy-compat'>
<xsl:output method="html" doctype-system="about:legacy-compat" encoding="UTF-8" indent="yes"/>

  • Při použití XSLT procesoru Saxon ve verzi 9.4+ lze použít 

<xsl:output method="html" version="5.0" encoding=UTF-8" indent="yes"/>

  • Nemělo by se používat, pokud lze generovat stručnou verzi.

Další zdroje informací

  • Specifikace HTML5

  • Rozdíly mezi XHTML 1.0, HTML 4 a HTML5

  • Stránky věnované HTML5

    • html5tutorial

    • Canvas tutorial

    • HTML 5 tag reference na w3schools

  • Prezentace z brněnského setkání GUG vytvořená pomocí HTML5

    • plně funkční v Google Chrome a Safari, projít si ji je možné v Opeře.

  • On-line nástroj pro testování podpory HTML5 v prohlížečích.

  • …