top

HTML 5 Specification

Published 2014-10-28 |

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