HTML5
T. Pitner, L. Bártek, A. Rambousek, L. Grolig
Lecture outline
● ● ● ● ● HTML5 as a Web Standard Basic Elements, Semantic and Visual Markup, MathML, SVG, … Differences between HTML5 and XHTML HTML5 DOM Relation to CSS and ECMAScript (JavaScript)
HTML5 - The Web Standard
HTML5
● Defines HTML5 language
○ Can be instance of either SGML (HTML) or XML (XHTML). ○ Both syntaxes are allowed.
● Defines detailed processing model supporting interoperable implementations. ● Improves documents markup. ● Introduces web application markup and API.
HTML5
● Objectives:
○ HTML 4 and older - too vague structure. ○ XHTML 1.x - too strict structure. ○ To create standard that combines positive from both specifications.
● Latest version HTML 5.2 [HTML 5.2]
○ Commonly used HTML5
HTML5 Syntaxes
● HTML
○ Backward compatible with HTML 4 and XHTML 1 ○ Not fully compatible with SGML HTML 4 specification: ■ Do not support processing instructions. ■ Short markup notation ● Empty start tag (<>) ● Empty end tag () ● … ■ mimetype text/html
HTML5 Syntaxes
● HTML sandboxed
○ Uses HTML Syntax ○ Suitable for pages from untrusted sources ■ mimetype text/html-sandboxed
● XML
○ XHTML 1 compatible ○ Namespace http://www.w3.org/1999/xhtml must be defined ○ Mimetype: ■ application/xhtml+xml ■ application/xml
Document Type Declaration
● ● ● ● ● ● Used by browser to select correct web page rendering mode. No other purpose. For XML syntax is optional. DOCTYPE: Case insensitive at HTML syntax. No reference to DTD. ○ Used by browser to select correct web page rendering mode.
What’s new
● SVG and MathML markup can be placed directly. ● HTML document with SVG figure:
SVG in text/html
Blue ellipse
Language Changes
● Many new elements added.
○ Structure description: ■ section, article, aside, header, footer, figure,
● Multimedia support:
○ video, audio. Ukázkové video
Language changes
● Many new elements and attributes introduced
○ New HTML forms input types ■ Element input attribute type values ○ Omitted some elements: ■ frame ■ frameset ■ noframes ■ ... ○ Omitted some attributes. ○ See specification HTML5 Differences from HTML4 for more.
Language changes
●
New attributes:
● ● ● ● ●
Attribute media on elements a and area Global attribute contenteditable Attribute draggable Element input types values has changed. ... frame, frameset, noframes ● Frames not allowed to display pages. ● Reduces accessibility. Font Applet
●
Omitted elements
●
● ●
Language changes
● Omitted some attributes:
○ ○ ○ ○ ○ ○ rev, charset (link, a) longdesc (img, iframe) target (link) align background bgcolor
Language changes
● Added RIA accessibility improving attributes (see WAI ARIA).
○ ARIA roles attributes - values: ■ link ■ button ■ checkbox ■ menuitem ■ ... ○ States and properties attributes (attributes aria-*): ■ aria-atomic ■ aria-busy ■ ...
Language changes
● API
○ ○ ○ ○ ○ ○ Multimedia (video/audio) playback Web application off-line work. Content type processing application registration. Content editing in cooperation with contenteditable cooperation. Using Drag&Drop in cooperation with attribute draggable. ...
Generating HTML5 using XSLT
●
HTML 5 document declaration does not contain DTD reference. Document declaration is used only to select proper HTML5 rendering mode. The document type declaration
●
●
●
When using saxon 9.4+
●
Should not be used if the short version can be generated.
HTML5 Resources
●
HTML5 specification. XHTML 1.0, HTML 4 and HTML5 differences HTML5 devoted pages
– – –
●
●
html5tutorial Canvas tutorial HTML 5 tag reference na w3schools
●
GUG Brno meating presentation of HTML5
–
Fully operational in Google Chrome and Safari, viewable in Opera.
●
HTML5 support testing On-line tool. ...
●
HTML5 DOM
HTML DOM
●
What is HTML DOM?
–
Object oriented representation of web page.
●
Defines document logical structure. Based on W3C DOM General API for XML processing. A set of interfaces and objects designed for managing HTML and XML documents.
●
●
●
–
API for HTML processing.
●
Closely tied to Java and JavaScript. Allows programmer to create, navigate and modify document content.
●
●
DOM originated as a specification to allow JavaScript script and Java programs to be portable among web browsers.
–
Also influenced by SGML.
HTML DOM
●
What the HTML DOM is not?
–
Although DOM is influenced by Dynamic HTML, in Level 1 does not implement all Dynamic HTML. It’s not binary specification – it’s source code in particular language compatible across platforms. It’s not way to persist objects into XML or HTML. It’s not set of data structures. DOM does not define “the true inner semantics” of XML or HTML.
–
– – –
DOM Interfaces and Objects
●
Many objects are based on several interfaces:
– – – – – – – –
Node Document Element Entity EntityReference Event Text … (see DOM Documentation)
DOM and CSS
●
Cascading Style Sheets
– – –
Used to visualize (X)HTML and XML Data Describe various visual properties of document elements. CSS Selector corresponds to the path in DOM