Archive

Posts Tagged ‘HTML5.0’

The New HTML 5.0

September 14th, 2010 No comments

So what about this new HTML 5.0? I’ve been ask many times about this new release from W3 although still a draft, the new specifications are very promising, especially to Web Developers.

HTML5 is defined in a way that it is backwards compatible with the way user agents handle deployed content. To keep the authoring language relatively simple for authors several elements and attributes are not included as outlined in the other sections of this document, such as presentational elements that are better dealt with using CSS. W3

Development Model

The HTML5 specification will not be considered finished before there are at least two complete implementations of the specification. A test suite will be used to measure completeness of the implementations. This approach differs from previous versions of HTML, where the final specification would typically be approved by a committee before being actually implemented. The goal of this change is to ensure that the specification is implementable, and usable by authors once it is finished.

Syntax

HTML5 defines an HTML syntax that is compatible with HTML4 and XHTML1 documents published on the Web, but is not compatible with the more esoteric SGML features of HTML4, such as processing instructions and shorthand markup as these are not supported by most user agents. Documents using the HTML syntax are almost always served with the text/html media type.

HTML5 also defines detailed parsing rules (including “error handling”) for this syntax which are largely compatible with popular implementations. User agents must use these rules for resources that have the text/html media type. Here is an example document that conforms to the HTML syntax:

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Example document</title>
  </head>
  <body>
    <p>Example paragraph</p>
  </body>
</html>

HTML5 also defines a text/html-sandboxed media type for documents using the HTML syntax. This can be used when hosting untrusted content.

The other syntax that can be used for HTML5 is XML. This syntax is compatible with XHTML1 documents and implementations. Documents using this syntax need to be served with an XML media type and elements need to be put in the http://www.w3.org/1999/xhtml namespace following the rules set forth by the XML specifications. [XML]

Below is an example document that conforms to the XML syntax of HTML5. Note that XML documents must be served with an XML media type such as application/xhtml+xml or application/xml.

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Example document</title>
  </head>
  <body>
    <p>Example paragraph</p>
  </body>
</html>

Here are a run down of the new features taken from PHP Guru’s site

  • <canvas><canvas> 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. An example is the tooltips feature I’ve added to RGraph. In short, click on a bar and you get a tooltip that can contain a wide variety of HTML – images videos etc. I’ve written a short primer to the <canvas> tag here.
  • <video>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.
  • <audio>The <audio> tag is much like the <video>, but for audio files. Surprisingly.
  • Context menusHTML5 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 elementsSince 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 elementsHTML5 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 typesThe input element can now have a new set of types, including:
    • datetime
    • datetime-local
    • date
    • month
    • week
    • time
    • number
    • range
    • email
    • 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 elementsThe 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 syntaxThe character encoding syntax for a HTML5 document is now: <meta charset=”UTF-8″>
  • New interactive elementsSome 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 (see above). It can have label and icon attributes. They can be nested to provide multiple levels of menus.
Categories: Programming Tags: , ,