1

Introduction to Web Programming (BPLCK205A)

MODULE-2

HTML5
2.1. Hello HTML5
 The syntax of HTML5 should be mostly familiar.
 A simple HTML5 document looks like this:

 For all practical purposes, all that is different from standard HTML in this example is
the statement.
 As indicated by its atypical statement, HTML5 is not defined as an SGML or XML
application.
 As an example, consider the following flawed markup:

Latha Yadav T R, Asst. Prof., Dept. Of CSE( Data Science) VIT,

Bengaluru
 2
Introduction to Web Programming (BPLCK205A)

 When checked with an HTML5 conformance checker, such as the W3C Markup
Validation Service used in this chapter (available at [Link] you see
the expected result:

 Later, with errors corrected, a clean check is possible:

Latha Yadav T R, Asst. Prof., Dept. Of CSE( Data Science) VIT,

Bengaluru
 3
Introduction to Web Programming (BPLCK205A)

2.2. Loose Syntax Returns

 An interesting aspect of HTML5 is the degree of syntax variability that it allows.
 Unlike its stricter markup XHTML, the traditional looseness of HTML is allowed.
 To demonstrate, in the following example, quotes are not always employed, major
elements like html, head, and body are simply not included self-identifying close
syntax is used as below:

 The example conforms to the HTML5 specification:

Latha Yadav T R, Asst. Prof., Dept. Of CSE( Data Science) VIT,

Bengaluru
 4
Introduction to Web Programming (BPLCK205A)

 These “mistakes” are actually allowed under traditional HTML and thus are allowed
under HTML5.
 To ensure that conform to the HTML5 specification, should be concerned primarily
about the following:
 Make sure to nest elements, not cross them; so
<b><i> is in error as tags cross </b></i>

whereas
<b><i> is in error as tags cross </i></b>

 Quote attribute values when they are not ordinal values, particularly if they contain
special characters, particularly spaces; so

<p id=p1> Fine with no quotes </p>

because it is a simple attribute value, whereas

<p title=trouble here with no quotes> Not ok without quotes </p>

is clearly messed up.

 Understand and follow the content model. Just because one browser may let you use a
list item anywhere you like,
Latha Yadav T R, Asst. Prof., Dept. Of CSE( Data Science) VIT,
Bengaluru
 5
Introduction to Web Programming (BPLCK205A)

<li> I should be in a list! </li>

it isn’t correct. Elements must respect their content model, so the example should read
instead as because it follows HTML5’s content model.

<ul><li> All is well I am in a list! </li></ul>

 Do not use invented tags unless they are included via some other markup language:

<p> I <danger>shouldn't</danger> conform unless I am defined in another specification

and use a name space </p>

 Encode special characters, particularly those used in tags (< >), either as an entity of a
named form, such as <, or as a numeric value, such as <.

2.3. XHTML5
 HTML5 neither makes the clean markup you write non-conforming nor suggests that
you shouldn’t author markup this way.
 If you want to pursue an “XMLish” approach to your document, HTML5 allows it.
Consider, for example, a strict XHTML example that is now HTML5:

 XHTML5 usage clearly indicates that an HTML5 document written to XML syntax
must be served with the MIME type application/xhtml+xml or application/xml.

Latha Yadav T R, Asst. Prof., Dept. Of CSE( Data Science) VIT,

Bengaluru
 6
Introduction to Web Programming (BPLCK205A)

2.4. HTML5: Embracing the Reality of Web Markup

 HTML5 makes one very major contribution: it defines what to do in the presence of
markup syntax problems.
 The permissive nature of browsers is required for browsers to fix markup mistakes.
 HTML5 directly acknowledges this situation and aims to define how browsers should
parse both well formed and malformed markup, as indicated by this brief excerpt from
the specification:
o This specification defines the parsing rules for HTML documents, whether
they are syntactically correct or not.
 Certain points in the parsing algorithm are said to be parse errors. The error handling
for parse errors is well-defined:
o user agents must either act as described below when encountering such
problems, or must abort processing at the first error that they encounter for
which they do not wish to apply the rules.
 HTML5’s aim to bring order to the chaos of sloppy markup is but one of the grand
aims of the specification.
 It also aims to replace traditional HTML, XHTML, and DOM specifications, and to
do so in a backward-compatible fashion.

Latha Yadav T R, Asst. Prof., Dept. Of CSE( Data Science) VIT,

Bengaluru
 7
Introduction to Web Programming (BPLCK205A)

 In its attempt to do this, the specification is sprawling, addressing not just what
elements exist but how they are used and scripted.
 HTML5 embraces the fact that the Web not only is composed of documents but also
supports applications, thus markup must acknowledge and facilitate the building of
such applications.

2.5. Presentational Markup Removed and Redefined

 HTML5 removes a number of elements and attributes.
 Many of the elements are removed because they are more presentational than
semantic.
 Table 2-1 presents the elements currently scheduled for removal from HTML5.

 Looking at Table 2-1, notice that some elements that apparently should be eliminated
somehow live on.
 For example, continues to be allowed, but is obsolete.
 The idea here is to preserve elements but shift meaning. For example, is no longer
intended to correspond to text that is just reduced in size, similar to or , but instead is
intended to represent the use of small text, such as appears in fine print or legal
information.
 Table 2-2 presents the meaning-changed elements that stay put in HTML5 and their
new meaning.

Latha Yadav T R, Asst. Prof., Dept. Of CSE( Data Science) VIT,

Bengaluru
 8
Introduction to Web Programming (BPLCK205A)

 Table 2-3 summarizes these values and presents CSS alternatives.

Latha Yadav T R, Asst. Prof., Dept. Of CSE( Data Science) VIT,

Bengaluru
 9
Introduction to Web Programming (BPLCK205A)

 Out with the Old Elements

 A few elements are removed from the HTML5 specification simply because they are
archaic, misunderstood, have usability concerns, or have a function that is equivalent
to the function of other elements.
 Table 2-4 summarizes some of the elements that have been removed from the
HTML5 specification.
 Table 2-4 is not a complete list of non-conforming elements, just the ones that are
supported by recent HTML 4 and XHTML 1.x specifications.

Latha Yadav T R, Asst. Prof., Dept. Of CSE( Data Science) VIT,

Bengaluru
 10
Introduction to Web Programming (BPLCK205A)

 In with the New Elements

 For most Web page authors, the inclusion of new elements is the most interesting
aspect of HTML5.
 Some of these elements are not yet supported, but already many browsers are
implementing a few of the more interesting ones, such as audio and video, and others
can easily be simulated even if they are not directly understood yet, as you will see
later in the chapter.
 Table 2-5 summarizes the elements added by HTML5 at the time of this edition’s
writing, and the sections that follow illustrate their use.

Latha Yadav T R, Asst. Prof., Dept. Of CSE( Data Science) VIT,

Bengaluru
 11
Introduction to Web Programming (BPLCK205A)

 Sample of New Attributes for HTML5

 One quite important aspect of HTML5 is the introduction of new attributes.
 There are quite a few attributes that are global and thus found on all elements.

Latha Yadav T R, Asst. Prof., Dept. Of CSE( Data Science) VIT,

Bengaluru
 12
Introduction to Web Programming (BPLCK205A)

 Table 2-6 provides a brief overview of these attributes. We’ll take a look at many of
these in upcoming sections and a complete reference for all is found in the next
chapter.
 Some of them, such as reversed for use on ordered lists ( ), are a long time in coming,
while others simply add polish, or address details that few page authors may notice.

2.6. HTML5 Document Structure Changes

 HTML5 documents may contain a header element, which is used to set the header
section of a document and thus often contains the standard h1 to h6 heading elements:

Latha Yadav T R, Asst. Prof., Dept. Of CSE( Data Science) VIT,

Bengaluru
 13
Introduction to Web Programming (BPLCK205A)

 Similarly, a footer element is provided for document authors to define the footer
content of a document, which often contains navigation, legal, and contact
information:

 The actual content to be placed in a tag may be enclosed in div, p, or other block
elements, as illustrated by this simple example:

 The HTML5 structural element with the most possible uses is the section element.
 A particular tag can be used to group arbitrary content together and may contain
further tags to create the idea of subsections.
 The example illustrates the basic use of HTML5 sections:

Latha Yadav T R, Asst. Prof., Dept. Of CSE( Data Science) VIT,

Bengaluru
 14
Introduction to Web Programming (BPLCK205A)

 But a section element may contain header and footer elements of its own:

 For example, the expanded example here shows a number of sections with headers,
footers, headlines, and content:

Latha Yadav T R, Asst. Prof., Dept. Of CSE( Data Science) VIT,

Bengaluru
 15
Introduction to Web Programming (BPLCK205A)

 HTML5–compliant browsers should take this markup and define an outline based
upon the use of headers, like so:

Latha Yadav T R, Asst. Prof., Dept. Of CSE( Data Science) VIT,

Bengaluru
 16
Introduction to Web Programming (BPLCK205A)

 For example, the first header really was not two levels of sectioning but simply one
with a subhead. To address this outlining, you would take this markup:

 Given these semantics, it is clear that HTML5 sectioning elements are not just a
formalization of tags with appropriate class values. For example,

 Beyond sectioning, HTML5 introduces a number of other structural elements.

Latha Yadav T R, Asst. Prof., Dept. Of CSE( Data Science) VIT,

Bengaluru
 17
Introduction to Web Programming (BPLCK205A)

 For example, the article element is used to define a discrete unit of content such as a
blog post, comment, article, and so on. For example, the following defines a few
individual blog posts in a document:

 The idea of defining these discrete content units specially is that to extract them
automatically, so again, having defined elements as opposed to some ad hoc use of
class names on tags is preferred.
 HTML5 also introduces an aside element, which may be used within content to
represent material that is tangential or, as the element name suggests, an aside:

Latha Yadav T R, Asst. Prof., Dept. Of CSE( Data Science) VIT,

Bengaluru
 18
Introduction to Web Programming (BPLCK205A)

 Noted that an tag was used in the aside. While not required, it is useful as a reminder
to readers that aside elements serve as outline sectioning elements, as shown here

2.7. ADDING SEMANTICS

 Many of the elements that HTML5 adds that can be used right away are semantic in
nature.
2.7.1. Marking Text
 The new HTML5 element mark was introduced for highlighting content similarly to
how a highlighter pen might be used on important text. The following example wraps
a few important words:

Latha Yadav T R, Asst. Prof., Dept. Of CSE( Data Science) VIT,

Bengaluru
 19
Introduction to Web Programming (BPLCK205A)

2.7.2. Indicating Dates and Time

Another semantic inline element, time, was introduced by HTML5 to indicate content that is
a date, time, or both. For example,

 The element should contain a date/time value that is in the format YYYY-MM-
DDThh:mm:ss TZD, where the letters correspond to years, months, days, hours,
minutes, and seconds, T is the actual letter ‘T,’ and ZD represents a time zone
designator of either Z or a value like +hh:mm to indicate a time zone offset.

 To provide both human- and machine-friendly date/time content, the element supports
a datetime attribute, which should be set to the previously mentioned date format of
YYYY-MM-DDThh:mm:ssTZD.

2.7.3. Inserting Figures

 It is often necessary to include images, graphs, compound objects that contain text
and images, and so on in our Web documents, all of which usually are called figures.
 Long ago, HTML 3 tried to introduce the fig element to represent such constructs;
HTML5 reintroduces the idea with the more appropriately named figure element.

Latha Yadav T R, Asst. Prof., Dept. Of CSE( Data Science) VIT,

Bengaluru
 20
Introduction to Web Programming (BPLCK205A)

 Acting as a semantic element, figure simply groups items within an enclosed tag,
though it may associate them with a caption defined by a tag as shown in the example.
 Specifying Navigation One new HTML5 element that is long overdue is the nav
element.
 The purpose of this element is to encapsulate a group of links that serves as a
collection of offsite links, document navigation, or site navigation:

 Many Web developers have used and tags to encapsulate navigation and then styled
the elements appropriately as menu items.

2.8. HTML5’s Open Media Effort

 Traditionally, multimedia has been inserted with the embed and object elements,
particularly when inserting Adobe Flash, Apple QuickTime, Windows Media, and
other formats.
 HTML5 brings this concept of tag-based multimedia.
 <video>

Latha Yadav T R, Asst. Prof., Dept. Of CSE( Data Science) VIT,

Bengaluru
 21
Introduction to Web Programming (BPLCK205A)

 To insert video, use a tag and set its src attribute to a local or remote URL
containing a playable movie.
 Also display playblack controls by including the controls attribute, as well as set
the dimensions of the movie to its natural size.
 This simple demo shows the use of the new element:

 HTML5 open video has, as it currently stands, brought back the madness of media
codec support that Flash solved, albeit in a less than stellar way.
 To address the media support problem, you need to add in alternative formats to
use by including a number of <source> tags:

 Also note in the preceding snippet the use of the poster attribute, which is set to
display an image in place of the linked object in case it takes a few moments to load.
Latha Yadav T R, Asst. Prof., Dept. Of CSE( Data Science) VIT,
Bengaluru
 22
Introduction to Web Programming (BPLCK205A)

 Other video element specific attributes like autobuffer can be used to advise the
browser to download media content in the background to improve playback, and
autoplay, which when set, will start the media as soon as it can.
 A complete example of the video element in action is shown here:

 <audio>
 HTML5’s audio element is quite similar to the video element. The element should
support common sound formats such as WAV files:

 In this manner, the audio element looks pretty much the same as Internet Explorer’s
proprietary bgsound element. Having the fallback content rely on that proprietary tag
might not be a bad idea:

 To allow the user to control sound play, unless you have utilized JavaScript to control
this, you may opt to show controls with the same named attribute.
Latha Yadav T R, Asst. Prof., Dept. Of CSE( Data Science) VIT,
Bengaluru
 23
Introduction to Web Programming (BPLCK205A)

 Depending on the browser, these controls may look quite different, as shown next.

 As with the video element, also have autobuffer and autoplay attributes for the
audio element.
 Unfortunately, just like video, there are also audio format support issues, so may want
to specify different formats using <source> tags:

Latha Yadav T R, Asst. Prof., Dept. Of CSE( Data Science) VIT,

Bengaluru
 24
Introduction to Web Programming (BPLCK205A)

2.9. Client-Side Graphics with <canvas>

 The canvas element is used to render simple graphics such as line art, graphs, and
other custom graphical elements on the client side.
 The element in the page, name it with an id attribute, and define its dimensions with
height and width attributes:

 Note the alternative content placed within the element for browsers that don’t support
the element.
 After place a <canvas> tag in a document, the next step is to use JavaScript to access
and draw on the element.
 For example, the following fetches the object by its id value and creates a two-
dimensional drawing context:

 The strokeRect (x, y, width, height) method takes x and y coordinates and height and
width, all specified as numbers representing pixels. For example,

context. strokeRect(10,10,150,50);
 Draw a simple rectangle of 150 pixels by 50 pixels starting at the coordinate 10,10
from the origin of the placed <canvas> tag.
 To set a particular color for the stroke, you might set it with the strokeStyle() method,
like so:

 By default, the fill color will be black, but you can define a different fill color by
using the fillColor() method. As a demonstration this example sets a light red color:
[Link] = "rgb(218,0,0)";

 CSS color functions, which may include opacity; for example, here the opacity of the
reddish fill is set to 40 percent:
[Link] = "rgba(218,112,214,0.4)";

Latha Yadav T R, Asst. Prof., Dept. Of CSE( Data Science) VIT,

Bengaluru
 25
Introduction to Web Programming (BPLCK205A)

 A full example using the canvas element:

2.9.1. Drawing and Styling Lines and Shapes

 HTML5 defines a complete API for drawing on a canvas element, which is composed
of many individual sub-APIs for common tasks.
 The path API stores a collection of subpaths formed by various shape functions and
connects the subpaths via a fill() or stroke() call.
 To begin a path, [Link]() is called to reset the path collection. Then, any
variety of shape calls can occur to add a subpath to the collection.
 Once all subpaths are properly added, [Link]() can optionally be called to
close the loop.
 Then fill() or stroke() will also display the path as a newly created shape.
 This simple example draws a V shape using lineTo():

Latha Yadav T R, Asst. Prof., Dept. Of CSE( Data Science) VIT,

Bengaluru
 26
Introduction to Web Programming (BPLCK205A)

 If add [Link]() before [Link](), the V shape would turn into a

triangle, because closePath() would connect the last point and the first point.
 Also, by calling fill() instead of stroke(), the triangle will be filled in with whatever
the fill color is, or black if none is specified.
 Of course, call both fill() and stroke() on any drawn shape to have a stroke around a
filled region.
 Thus, style the drawing, you can specify the fillStyle and strokeStyle and maybe even
define the width of the line using lineWidth, as shown in this example:

 In addition to the CSS color values, you can also set the fillColor to a gradient object.
 A gradient object can be created by using createLinearGradient() or
createRadialGradient(). The following example creates a simple linear gradient that
will be applied to a rectangle using the createLinearGradient(x1,y1,x2,y2) method.
 The gradient is positioned at 10,150 and is set to go 200 pixels in both directions.

var lg = [Link](10,150,200,200);
 The gradient colors are added using the addColorStop() method.
 This specifies a color and the offset position in the gradient where the color should
occur.
 The offset must be between 0 and 1.

 Finally, the fillColor is set to the gradient. Here is the complete code snippet,
followed by a visual example:

Latha Yadav T R, Asst. Prof., Dept. Of CSE( Data Science) VIT,

Bengaluru
 27
Introduction to Web Programming (BPLCK205A)

 To create a radial gradient using createRadialGradient(x1,y1,r1,x2,y2,r2), you must

set the position and radius of two circles to serve as the gradient.
 Add color stops in the same manner as the linear gradient, so the code looks quite
similar otherwise:

 The complete example, drawing a few different shapes with fills and styles, is
presented here:

Latha Yadav T R, Asst. Prof., Dept. Of CSE( Data Science) VIT,

Bengaluru
 28
Introduction to Web Programming (BPLCK205A)

2.9.2. Applying Some Perspective

 It is possible to add some perspective by choosing proper points and shades.
 The 3D cube shown in Figure 2-3 is created using nothing more than several
moveTo() and lineTo() calls.

Latha Yadav T R, Asst. Prof., Dept. Of CSE( Data Science) VIT,

Bengaluru
 29
Introduction to Web Programming (BPLCK205A)

 The lineTo() call is used to create three sides of the cube, but the points set are not
straight horizontal and vertical lines as we see when we make 2D squares.
 Shading is applied to give the illusion of dimensionality because of the application of
a light source.
 While the code here is pretty simple, you can see that using canvas properly is often a
function:

2.9.3. Drawing Arcs and Curves

Latha Yadav T R, Asst. Prof., Dept. Of CSE( Data Science) VIT,

Bengaluru
 30
Introduction to Web Programming (BPLCK205A)

 Drawing on canvas isn’t limited to simple lines; it is also possible to create curved
lines using arc(), arcTo(), quadraticCurveTo(), and bezierCurveTo().
 To illustrate these methods, this section shows how to draw a simple face.
 Use the arc(x,y,radius, startAngle, endAngle, counterclockwise) method to draw
circles and parts of circles. Its location is defined by the point of its center (x,y) as
well as the circle’s radius.
 How much of the circle is drawn is defined by startAngle and endAngle, in radians.
 The direction of the curve is set by a Boolean value, which is the final parameter
specified by counterclockwise.
 To start face drawing, use arc() to draw the head as a circle:

Latha Yadav T R, Asst. Prof., Dept. Of CSE( Data Science) VIT,

Bengaluru
 31
Introduction to Web Programming (BPLCK205A)

2.9.4. Scaling, Rotating, and Translating

 The canvas API provides a number of useful methods that accomplish the common
tasks you will likely want to perform.
 First let’s explore the scale(x,y) function, which can be used to scale objects.

Latha Yadav T R, Asst. Prof., Dept. Of CSE( Data Science) VIT,

Bengaluru
 32
Introduction to Web Programming (BPLCK205A)

 The x parameter shows how much to scale in the horizontal direction and the y
parameter indicates how much to scale vertically.

 The rotate(angle) method, which can be used to rotate a drawing in a clockwise

direction by an angle defined in radians:

 The translate(x,y) function is a handy function to use to change the origin from (0,0)
to another location in the drawing.
 The following example moves the origin to (100,100).
 Then, when the start coordinates of the rectangle are specified at (0,0), it really starts
at (100,100).

Latha Yadav T R, Asst. Prof., Dept. Of CSE( Data Science) VIT,

Bengaluru
 33
Introduction to Web Programming (BPLCK205A)

2.9.4. Using Bitmaps in Drawings

 A very interesting feature of canvas is the ability to insert images into the drawing.
 There are several ways to do this, but let’s start with the most basic,
drawImage(img,x,y), which takes an image object and the coordinates for where the
image should be placed.
 The image will be its natural size when called in this manner.

Latha Yadav T R, Asst. Prof., Dept. Of CSE( Data Science) VIT,

Bengaluru
 34
Introduction to Web Programming (BPLCK205A)

 Use drawImage(img,x,y,w,h) if you need to modify the image size and set the width
and height.
 The actual image passed in to the drawImage() method can come from a few places. It
can be
• An image already loaded on the page
• Dynamically created through the DOM
• Another canvas object
• An image created by setting its src to a data: URL
 The important thing to remember is that the image must be loaded by the time canvas
is ready to access it.
 This may require use of the onload function for the image:

 The following example loads an image and draws a region in preparation for
eventually adding a caption:

2.10. HTML5 Form Changes

 The specification added a number of form widgets, validation facilities, and some
accessibility improvements.
Latha Yadav T R, Asst. Prof., Dept. Of CSE( Data Science) VIT,
Bengaluru
 35
Introduction to Web Programming (BPLCK205A)

2.10.1. New Form Field Types

 Traditionally, the HTML input element is used to define most form fields.
 The particular type of form field of interest is defined with the type attribute, which is
set to text, password, hidden, checkbox, radio, submit, reset, image, or button.
 HTML5 adds quite a number of other values, which we will briefly explore here.
 First, setting the type equal to color should create a color picker:

 A variety of date controls can now be directly created by setting the type attribute to
date, datetime, datetime-local, month, week, or time.
 Several of these controls are demonstrated here:

 Setting type to number gives you a numeric spin box in conforming browsers:

Latha Yadav T R, Asst. Prof., Dept. Of CSE( Data Science) VIT,

Bengaluru
 36
Introduction to Web Programming (BPLCK205A)

 The max attribute can be set to limit the maximum value, min to limit the smallest
value, and even step to indicate how values may be modified. For example,

 A similar form of control can be created using a range control:

<input>
 It is also possible to further define semantic restrictions by setting an tag’s
type attribute to tel, email, or url:

2.10.2. Validating Data Entry

 It is also possible to force the user to enter data, without resorting to JavaScript, in an
HTML5–compliant browser by setting the required attribute for a form control:

 The pattern attribute also can be employed to force the entered data to conform to a
supplied regular expression:

2.10.3. Autocomplete Lists

Latha Yadav T R, Asst. Prof., Dept. Of CSE( Data Science) VIT,
Bengaluru
 37
Introduction to Web Programming (BPLCK205A)

 Under HTML5, the input element’s list attribute is used to set the DOM id of a
datalist element used to provide a predefined list of options suggested to the user for
entry:

[Link] Usability Improvements

Commonly, Web page authors use the value attribute to populate some text in a form field:

 HTML5 also introduces the autofocus attribute, which when placed on a field should
cause a supporting browser to immediately focus this field once the page is loaded:

 To display the autocomplete suggestions provided for fields if similar field names
have been used in the past:

2.11. Emerging Elements and Attributes to Support Web Applications

 A key theme of the HTML5 specification is the emphasis on supporting Web
applications.
 A number of elements and attributes have been introduced in the specification to
continue the migration from Web pages to Web applications.
 menu Element
Latha Yadav T R, Asst. Prof., Dept. Of CSE( Data Science) VIT,
Bengaluru
 38
Introduction to Web Programming (BPLCK205A)

 Repurposed One element that will be implemented in browsers but might not
perform the actions defined in HTML5 is the menu element.
 Traditionally, this element was supposed to be used to create a simple menu for
choices, but most browsers simply rendered it as an unordered list:

 A new attribute, type, is introduced that takes a value of toolbar, context, or list
(the default).
 This example sets up a simple File menu for a Web application:

 With menu, it would also be possible to define a context menu, usually invoked by
a right-click:

Latha Yadav T R, Asst. Prof., Dept. Of CSE( Data Science) VIT,

Bengaluru
 39
Introduction to Web Programming (BPLCK205A)

 command Element
 The menu element may contain not just links but also other interactive items,
including the newly introduced command element.
 This empty element takes a label and may have an icon decoration as well.
 The command element has a type attribute, which may be set to command, radio,
or checkbox, though when radio is employed there needs to be a radiogroup
indication.
 A simple example here with the repurposed menu element should illustrate the
possible use of this element:

 meter and progress Elements

 Two fairly similar elements have been introduced in HTML5 to show current
status.
 First, the meter element defines a scalar measurement within a known range,
similar to what might be represented by a gauge.
 The following example is a reading of velocity for some fantastically fast space
vessel:

 details Element
 The new details element is supposed to represent some form of extra details, such
as a tooltip or revealed region that may be shown to a user.

Latha Yadav T R, Asst. Prof., Dept. Of CSE( Data Science) VIT,

Bengaluru
 40
Introduction to Web Programming (BPLCK205A)

 The details element can contain one dt element to specify the summary of the
details as well as one dd element to supply the actual details.
 The attribute open can be set to reveal the details or can be changed dynamically,
as shown in this example:

 output Element
 The final stop on this speculative tour is the output element, which is used to
define a region that will be used as output from some calculation or form control.
 Here using the calendar picker and having the eventual release date of HTML5
being revealed in an output element:

 The Uncertain Future of Frames

 The HTML5 specification drops , , and because “their usage affected usability and
accessibility for the end user in a negative way.

 The draggable Attribute and the Drag and Drop API

 In order to drag an item, the element must have the draggable attribute set to true:

 The following events are attached to the item that will be dragged:

 contenteditable Attribute
 HTML5 standardizes the use of this attribute globally on all elements.
 The basic sense of the attribute is to set true, to modify the text directly when it click
the element:

Latha Yadav T R, Asst. Prof., Dept. Of CSE( Data Science) VIT,

Bengaluru
 41
Introduction to Web Programming (BPLCK205A)

 spellcheck Attribute
 HTML5 defines a spellcheck attribute globally for elements.
 Interestingly, some browsers such as Firefox have supported spell checking of form
fields and elements in content editing mode using the contenteditable attribute for
some time.
 HTML5 makes this attribute standard. Enabling the spell checking of element content
is a matter of setting the spellcheck attribute to true:

Latha Yadav T R, Asst. Prof., Dept. Of CSE( Data Science) VIT,

Bengaluru