HTML 5 Specification
HTML 5 Specification
HTML5 is the next major revision of the HTML standard, currently under development. Like its immediate predecessors, HTML 4.01 and XHTML 1.1, HTML5 is a standard for structuring and presenting Internet content.
HTML and XHTML comprise a mixture of features introduced by various specifications, including those introduced by software products such as web browsers and those established by common practice. HTML5 is a single markup language that can be written in either HTML or XHTML syntax. It includes detailed processing models to encourage more interoperable implementations. It extends and improves the markup available for documents and introduces markup and APIs for complex web applications.
Most of the new features of HTML5 are supported by common browsers such as Mozilla Firefox, Google Chrome, Internet Explorer, Opera and mobile browsers.
HTML5 supports:
- All the form controls from HTML 4. All applications working on HTML4 work on HTML5.
- New input controls such as:
- Sliders and date pickers.
- Email, which looks just like a text box, but can be customized. For example, but mobile browsers can customize their onscreen keyboard to make it easier to type e-mail addresses. In older browsers that do not support the email, the input type is treated as a regular text field and the form works without requiring markup changes or scripting hacks.
HTML5 Markup and APIs
HTML5 introduces a number of new elements and attributes. Some of them are semantic replacements for common uses of generic blocks (<div>) and inline (<span>) elements, for example:
- <nav>
- A website navigation block
- <footer>
- Usually referring to the bottom of a web page or to the last lines of HTML code.
- <audio>
- Embeds an audio file on a web page. Replaces <object> used in previous HTML versions. More information: http://en.wikipedia.org/wiki/HTML5_audio
- <video>
- Embeds a video file on a web page. Replaces <object> used in previous HTML versions. More information: http://en.wikipedia.org/wiki/HTML5_video
In addition to specifying markup, HTML5 specifies scripting application programming interfaces (APIs). Existing document object model (DOM) interfaces are extended and defacto features documented.
HTML5 and Samsung Smart TV SDK
Samsung Smart TV SDK supports HTML5, including the canvas, audio and video tags.
Canvas Tag
The <canvas> tag allows for dynamic, scriptable rendering of 2D shapes and bitmap images. It is a low-level, procedural model that updates a bit map and doesn’t have a built-in scene graph.
The following code creates a canvas element in an HTML page:
<canvas id="example" width="200" height="200">
This text is displayed if your browser does NOT support HTML5 canvas.
</canvas>
You can write text inside the <canvas> tag to show older browsers that the <canvas> tag is not supported.
For example, use JavaScript to draw on the canvas:
var example = document.getElementById('example');
var context = example.getContext('2d');
context.fillStyle = "rgb(255,0,0)";
context.fillRect(30, 30, 50, 50);
Audio Tag
The <audio> tag defines sound, such as music or other audio streams. For example:
<audio src="example-sound.mp4">
Your browser does NOT support the audio element.
</audio>
You can write text inside the <audio> tag to show older browsers that the <audio> tag is not supported.
New Attributes of <audio> tag in HTML5
Attribute | Value | Description |
---|---|---|
Autoplay | autoplay | If present, the audio starts playing as soon as it is ready. |
Loop | loop | If present, the audio starts over again, every time it is finished. |
Preload | auto\metadata\none | Specifies if the audio should be loaded when the page loads. Ignored if autoplay is present. |
Src | url | Defines the URL of the audio to play |
Video Tag
Before HTML5, there was no standard for showing video on a web page or in an application. In most applications videos are shown through a plugin (like Flash). Now, the <video> tag provides a standard way to include video.
Currently the SDK supports the following video formats for use with the <video> tag:
Format | IE 8 | Firefox 3.5 | Opera 10.5 | Chrome 3.0 | Safari 3.0 |
---|---|---|---|---|---|
Ogg | No | Yes | Yes | Yes | No |
MPEG 4 | No | No | No | Yes | Yes |
- Ogg
- Ogg files with Thedora video codec and Vorbis audio codec
- MPEG4
- MPEG 4 files with H.264 video codec and AAC audio codec
In the following example the control attribute is for adding play, pause and volume controls.
Note that it is recommended that you specify the width and height attributes and that you insert appropriate text between the <video> and </video> tags for browsers that do not support the video element:
<video src="movie.mp4" width="320" height="240">
Your browser does not support the video tag.
</video>
The following table lists the <video> attributes.
Attribute | Value | Description |
---|---|---|
autoplay | autoplay | Specifies that the video will start playing as soon as it is ready. |
controls | controls | Specifies that controls will be displayed, such as a play button. |
Height | pixels | Specifies the height of the video player. |
Loop | loop | Specifies that the media file will start over again, every time it is finished. |
Preload | preload | Specifies that the video will be loaded at page load and ready to run. Ignored if “autoplay” is present. |
Src | url | Specifies the URL of the video to be played. |
Width | pixels | Specifies the width of the video player. |
Specification table
The following table illustrates the specifications for HTML5. Test site: http://html5test.com/
Doctype | <!DOCTYPE html> triggers standards mode | Yes |
Canvas | canvas element | Yes |
2D context | Yes | |
Text | Yes | |
Video | video element | Yes |
H.264 codec support | Yes | |
Ogg Theora codec support | No | |
Audio | audio element | Yes |
MP3 codec support | Yes | |
Ogg Vorbis codec support | No | |
AAC codec support | Yes | |
WAV codec support | Yes | |
Geolocation | Geolocation | Yes |
Storage | Session Storage | Yes |
Local Storage | Yes | |
Offline Web Applications | Application Cache | Yes |
Web SQL Database | Yes | |
Workers | Web Workers | Yes |
Section elements | section element | Yes |
nav element | Yes | |
article element | Yes | |
aside element | Yes | |
hgroup element | Yes | |
header element | Yes | |
footer element | Yes | |
Grouping content elements | figure element | Yes |
figcaption element | Yes | |
Text-level semantic element | mark element | Yes |
ruby element | Yes | |
rt element | Yes | |
rp element | Yes | |
time element | No | |
Forms | search input type | Yes |
tel input type | Yes | |
url input type | Yes | |
email input type | Yes | |
datetime input type | Yes | |
date input type | Yes | |
month input type | Yes | |
week input type | Yes | |
time input type | Yes | |
datetime-local input type | Yes | |
number input type | Yes | |
range input type | Yes | |
color input type | Yes | |
autocomplete input attribute | Yes | |
autofocus input attribute | Yes | |
list input attribute | Yes | |
placeholder input attribute | Yes | |
max input attribute | Yes | |
min input attribute | Yes | |
multiple input attribute | Yes | |
pattern input attribute | Yes | |
required input attribute | Yes | |
step input attribute | Yes | |
keygen element | Yes | |
output element | Yes | |
progress element | Yes | |
meter element | Yes | |
User interaction | hidden attribute | Yes |
Scroll into view | Yes | |
contenteditable attribute | Yes | |
Drag and drop | No | |
Undo manager | No |