PB138 — HTML5

(C) 2019 Masaryk University -- Tomáš Pitner, Luděk Bártek, Adam Rambousek

HTML 5

  • 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í.

  • Aktuální verze HTML 5.2, rozšířená HTML 5

Různé syntaxe HTML 5 (1)

  • 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

Různé syntaxe HTML 5 (2)

  • 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

  • atributy pro zlepšení přístupnosti bohatých webových aplikaci (doporučení WAI-ARIA)

    • atributy pro ARIA role (hodnoty link, button, checkbox, menuitem, …​)

    • atributy pro stavy a vlastnosti (atributy aria-* např. aria-atomic, aria-busy, …​)

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í