HTML5 differences from HTML4 study notes
1. Introduction
a. Language can be written in HTML and XML.
b. define processing detail for implementation.
c. Improve markup for document.
d. Introduced markup and API for merging idioms.
The HTML5 specification will not be considered finished before there are at least two complete implementations of the specification. The goal is to ensure the specification is implementable.
2. Syntax
HTML5 can be written by HTML with "txt/html" media type or by XML with "application/xhtml+xml or application/xml" media type.
2.1 Character Encoding
HTML5 has three means of setting the character encoding
a. At the transport level, using http's "content-type" header.
b.Using a Unicode Byte Order Mark (BOM) character at the start of the file.
c. Using meta element in the HTML, within the first 1024 bytes of the document.
2.2 Document Type
The doctype declaration is <!DOCTYPE html> and is case-insensitive in the HTML syntax.
Since no longer SGML-based HTML, doytype is only need to eanble standard mode for documents using the HTML syntax.
2.3 MathML and SVG
The HTML syntax of HTML5 allows for MathML and SVG elements to be used inside a document.
ex:
- <!doctype html>
- <title>SVG in text/html</title>
- <p>
- A green circle:
- <svg> <circle r="50" cx="50" cy="50" fill="green"/> </svg>
- </p>
3. Language
3.1 new element
structue element
section article aside hgroup header footer nav figure fiacaption
other new element
video audio trace embed mark progress meter time ruby bid wbr canvas command detail datalist keygen output
input's new attribute
tel search url email datetime date month week time datetime-local number range color
3.2 new attributes
3.3 changed element
3.4 changed attributes
3.5 obsolete element
3.6 obsolete attributes
4.Content Model Changes
4.1 HTML4
Content Model is what defines how elements are nested. (How to define an element as other element's child)
There two major category of element in HTML4, "inline level" and "block level".
An element is one kind, and it also allow children of one kind. And the two kinds may be different.
in HTML4 CSS use "inline level element" and "block level element" which has nothing to do the HTML4's Content Model.
"P" allows "inline level"
"body" allows "block level"
"div" allows both
"P" is a "block-level" element and only allows "inline level"
4.2 HTML5 new content Model
Metadata content e.g.link,script
Flow content e.g.span,div (roughly like HTML4's block-level and inline together)
Sectioning content e.g.aside,section
Head content e.g.h1,hgroup
Phrasing content e.g. span,img,text (roughly like HTML4's inline)
Embedded content e.g. img,iframe,svg
Intractive content e.g. a,button,label
5. New API
HTML5 introduces a number of APIs that help in creating Web applications.
Video/Audio's new APIs for controlling playback and so on.