Basically HTML5 has it’s many new syntactical features, which include
the <video>, <audio>, and <canvas> elements, as well
as the integration of SVG content. Due to these new elements, it will be
very easy to integrate multimedia and graphical content to web without
using flash and third party plugins. There are also another new elements
like <section>, <article>, <header> and <nav>
which enrich the semantic value of the document.
<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 (e.g., 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.
<header> – The page header. This is not the same as the <head> element.
<footer> – The footer of the page. Typically where all the legal crap 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> – This 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:
<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 time or date 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.
<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 (e.g., 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.
New structural elements:
<section> -A section, or section of a chapter of a 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 crap 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> – This 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:
<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 time or date 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.
No comments:
Post a Comment