home | homework | links | glossary | sitemap | contact
Homework Page
What´s all the hype about?
HTML5 is a language for structuring and presenting content for the World Wide Web, a core technology of the Internet. It is the latest revision of the HTML standard (originally created in 1990) and currently remains under development. Its core aims have been to improve the language with support for the latest multimedia while keeping it easily readable by humans and consistently understood by computers and devices (web browsers, parsers etc.).
What´s new in HTML5?
<canvas> tag is a 2D (at the moment - other dimensions may be forthcoming) drawing area controlled by Javascript. You can use it for a wide variety of things - graphs, games, presentations etc. Because it's controlled by Javascript you can interact with it very easily.
The <video> tag makes it easier to embed video clips into your web pages. It has attributes like src (naturally), autoplay and loop. The <video> tag has implications on usability (eg blind access), and so can contain additional markup describing the video. Ideally, the full transcript of the video.
The <audio> tag is much like the <video>, but for audio files.
Context menus: HTML5 provides a method of defining context menus, making it easier to use these in web applications. Perhaps not so useful for websites, but certainly for applications where context menus could provide a raft of options without taking up space in the UI.
New structural elements: Since HTML is largely unstructured, a few new elements have been provided to try and rectify this. These elements include:
<section> -A section, or section of a chapter of text, or a book.
<header> - The page header. This is not the same as the <head> element.
<footer> - The footer of the page. Typically where all the legal crapola goes.
<nav> - Navigation links to other pages. You could put your websites navigation in this for example.
<article> - A blog article could be encapsulated by this for example.
<aside> - The aside tag can be used to provide extra information for a block of text. Much like sidebar material in books etc.
<figure> - The <figure> element can be used to annotate your main text with diagrams, which aren't necessarily imperative to the text.
New inline elements: HTML5 introduces new elements to help indicate basic elements such as times or numbers.
<mark> - This denotes that a bit of text is marked in some way. You could for example, use this to mark search terms in a list of results.
<time> - You can use this to represent times, or dates in your block of text.
<meter> - This can be used to indicate a figure of some sort. It can have multiple attributes including: value, min, max, low, high and optimum.
<progress> - This can be used to show a progress bar of some sort. It has a couple of attributes: value and max. The max attribute can be omitted.
New form input types: The input element can now have a new set of types, including:
- datetime
- datetime-local
- date
- month
- week
- time
- number
- range
- url
Some of these are already common in desktop UIs, so shouldn't be difficult to implement, and will be more familiar to users when filling out your form.
Dropped elements: The folling elements have been dropped or replaced:
- acronym
- applet
- basefont
- big
- center
- dir
- font
- frame
- frameset
- isindex
- noframes
- noscript
- s
- strike
- tt
- u
Character encoding syntax The character encoding syntax for a HTML5 document is now: <meta charset="UTF-8">
New interactive elements: Some nice things that will make building websites and, perhaps more pointedly, web applications, easier.
<details> - This can be used to provide further information about something specific. For example it could be implemented by browsers as tooltips. This tag can have an open attribute which dictates whether the content is initially shown to the user or not.
<datagrid> - Unlike traditional tables (which are designed to be static), this can be used to provide a set of data with some degree of interactivity. For example selecting rows or columns, editing data, sorting and generally interacting with the data in the client.
<menu> - Previously a deprecated element, <menu> is back in HTML5 with a new meaning. It can, for example, contain <command> elements which cause a particular action to happen. For example you could use this element to provide a toolbar of sorts, or a context menu. It can have label and icon attributes. They can be nested to provide multiple levels of menus.
New DTD: HTML5 has a new, much simpler DTD: <!doctype html>
Optional href on links: This is now optional as links can be used in conjunction with scripting. Perhaps more useful in web applications as opposed to web sites.
The async attribute: This stipulates that a block of script can be executed asynchronously, instead of blocking the rest of the page until it's finished.
What are some of the key differences between HTML4 and HML5?
HTML 5 is compatible with HTML 4 and XHTML although some tags become obsolete. It can take two forms, a traditional one with HTML tags, the other in XML. It comprises new forms, support new media, and adds a support for drawing and images. The new format will integrate another specification in progress: Web Forms 2.0.
New elements
Canvas
It is a background on which one can draw and thus new graphic elements may be added to the interface. It is inspired by the syntax and functions from Java. One can put several canvas in a Web page.
On the canvas one can perform transformations as scaling, rotating, translating. Varied figures are available: rectangles, Bezier's curves, arc, with functions of filling and stroke. And also clipping on the edges of the canvas.
Audio and video
The video tag allows to embed a video in the document. It is accompanied by a src attribute to indicate the file, but also by attributes like start, stop, autoplay etc. which define the behavior of the video. The audio tag is the equivalent for sound files.
Section
The section tag makes it possible to divide (or subdivide) a document into semantic parts. They are used to create an outline, table of contents. The sections can be chapters. They differ from div tag which has a role of presentation.
A section is completed with a header and a footer.
Changed elements
a, optional href
Removing href makes it possible to use the attributes of a on a dynamic link, in conjunction with onclick but without providing URL (the URL could be defined in a script).
script, the async attribute
A script is by default executed at loading, while it will be executed at the end of parsing of the HTML page when the defer modifier is added. But if it is the async modifier that is present, then it is executed in an asynchronous way, therefore independently of the display of the page and according to the availability of resources, as Ajax.
Removed elements
The frames disappear. Consequently the tags frame, frameset, noframe are not any more part of the format.
A detailed list of the changes is provided on a document from the W3C, HTML 5 differences from HTML 4.
What DOCTYPE declaration is needed for HTML5 documents?
HTML5 uses a DOCTYPE declaration which is very short, due to its lack of references to a Document Type Definition in the form of a URL and/or FPI. All it contains is the tag name of the root element of the document, HTML. In the words of the specification draft itself:
In other words, <!DOCTYPE html>, case-insensitively.
With the exception of the lack of a URI or the FPI string (the FPI string is treated case sensitively by validators), this format (a case-insensitive match of the string !DOCTYPE HTML) is the same as found in the syntax of the SGML based HTML 4.01 DOCTYPE. Both in HTML4 and in HTML5, the formal syntax is defined in upper case letter, even if both lower case and mixes of lower case upper case are also treated as valid.
In XHTML5 the DOCTYPE has to be a case-sensitive match of the string "<!DOCTYPE html>". This is due to the fact that in XHTML syntax all HTML elements are required to be in lower case, including the root element referenced inside the HTML5 DOCTYPE. As well, XHTML only accepts the upper case inside the DOCTYPE string. These rules are not defined by the HTML5 specification itself but by XML and the syntax rules for XHTML DTDs. For the XHTML5 syntax, then Document Type Definitions are permitted as well.
The DOCTYPE is optional in XHTML5 and may simply be omitted, though it is not fully compatible with text/html parsers, as these parsers will go into Quirks mode whenever the HTML5 doctype is lacking. This would be a problem whenever the document is supposed to be consumed by text/html parser as well as by XHTML (application/xhtml+xml) parsers. Given, however, that the HTML5 specification forbids XML-serialized HTML5 (XHTML5) from being served with any MIME type other than application/xhtml+xml, this is unlikely to be a situation encountered in the real-world. Unlike with the previous versions of XHTML, it is impossible to serve an XHTML5 (that is, HTML5 serialized as XML) document as text/html in any conceivable situation; any situation involving XHTML5 will be served as application/xhtml+xml and parsed as XML in a standards-compliant system.