Web Programming Module 2 : HTML5

--------------------------------------------------------------------------------------------------------
L9:

HTML5
Hello HTML5
The syntax of HTML5 should be mostly familiar

As indicated by its atypical <!DOCTYPE> statement, HTML5 is not defined as an SGML or

XML application. Because of the non-SGML/XML basis for HTML, there is no concept of
validation in HTML5; instead, an HTML5 document is checked for conformance to the
specification, which provides the same practical value as validation.
When checked with an HTML5 conformance checker, such as the W3C Markup Validation
Service used in this chapter (available at http://validator.w3.org), you see the expected result:

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

--------------------------------------------------------------------------------------------------------
Ramesh E pg. 1
 Web Programming Module 2 : HTML5
--------------------------------------------------------------------------------------------------------

Review questions:
1. Explain the difference between XHTML and HTML
2. Write a program for HTML
3. What is the importance of meta element.
L10:

Loose Syntax Returns

An interesting aspect of HTML5 is the degree of syntax variability that it allows. Unlike its stricter
markup cousin, 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, the inference of close of tags like </p> and </li> is allowed, case is used
variably, and even XML-style self-identifying close syntax is used at will:

To ensure that you conform to the HTML5 specification, you 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 not since tags nest</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,
<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
<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:

--------------------------------------------------------------------------------------------------------
Ramesh E pg. 2
 Web Programming Module 2 : HTML5
--------------------------------------------------------------------------------------------------------
<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 &lt;, or as a numeric value, such as &#60;

Review questions:
1. Write a simple program to exhibit loose syntax return.
2. What do you mean by unorder list?
3. What do you mean by character entity?

L11:
XHTML5
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. Unfortunately, although
HTML5 supports XML, the real value of XHTML—the true strictness of XML—has not been
realized, at least so far, because of a lack of browser support. You can write XMLish markup and
serve it as text/html but it won’t provide the benefit of strict syntax conformance. In short, HTML5
certainly allows you to try to continue applying the intent of XHTML in the hopes that someday
it becomes viable.

HTML5: Embracing the Reality of Web Markup

The harsh reality is that, indeed, valid markup is more the exception than the rule online. Numerous
surveys have shown that in the grand scheme of things, few Web sites validate. For example

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:
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.

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.
Looking at Table 2-1, you might notice that some elements that apparently should be
eliminated somehow live on. For example, <small> continues to be allowed, but <big> is obsolete.
The idea here is to preserve elements but shift meaning.

--------------------------------------------------------------------------------------------------------
Ramesh E pg. 3
 Web Programming Module 2 : HTML5
--------------------------------------------------------------------------------------------------------

TABLE 2-1 HTML 4 Elements Removed from HTML5

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.

--------------------------------------------------------------------------------------------------------
Ramesh E pg. 4
 Web Programming Module 2 : HTML5
--------------------------------------------------------------------------------------------------------

--------------------------------------------------------------------------------------------------------
Ramesh E pg. 5
 Web Programming Module 2 : HTML5
--------------------------------------------------------------------------------------------------------

Review questions:
1. What are the tags were removed from HTML4?
2. What are the tags were added in HTML5?
3. Explain the following tag <a> <footer> <header>

L12:
In with the New Elements
For most Web page authors, the inclusion of new elements is the most interesting aspect of
HTML5. many browsers are implementing a few of the more interesting ones, such as audio and
video, and others can easily be simulated.

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. Table 2-6 provides a brief overview of
these attributes.

--------------------------------------------------------------------------------------------------------
Ramesh E pg. 6
 Web Programming Module 2 : HTML5
--------------------------------------------------------------------------------------------------------

--------------------------------------------------------------------------------------------------------
Ramesh E pg. 7
 Web Programming Module 2 : HTML5
--------------------------------------------------------------------------------------------------------

Review questions:
1. What are the key attributes were added in HTML5.
2. Explain Nav tag
3. What is the importance of spell check.
4. Define article.
5. Define section and explain

--------------------------------------------------------------------------------------------------------
Ramesh E pg. 8
 Web Programming Module 2 : HTML5
--------------------------------------------------------------------------------------------------------
L13:
HTML5 Document Structure Changes
HTML5 document structure seems pretty much the same as in HTML 4 save a slightly different
<!DOCTYPE> statement.
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:

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 HTML5 structural element with the most possible uses is the section element. A particular
<section> tag can be used to group arbitrary content together and may contain further <section>
tags to create the idea of subsections.

It may not be obvious but a section element may contain header and footer elements of
its own:
HTML5 uses headings and newly introduced elements like the section element for
outlining purposes.
join the subhead to the headline with an hgroup element like so:

--------------------------------------------------------------------------------------------------------
Ramesh E pg. 9
 Web Programming Module 2 : HTML5
--------------------------------------------------------------------------------------------------------

Beyond sectioning, HTML5 introduces a number of other structural elements. For example, the
article element is used to define a discrete unit of content such as a blog post, comment, article,
and so on.

The idea of defining these discrete content units specially is that you might wish to extract them
automatically, so again, having defined elements as opposed to some ad hoc use of class names on
<div> 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:

--------------------------------------------------------------------------------------------------------
Ramesh E pg. 10
 Web Programming Module 2 : HTML5
--------------------------------------------------------------------------------------------------------

Review questions:
1. HTML5 Document Structure Changes
2. What do you mean by aside? Explain with example
3. Define footer and explain the same

L14:
Adding Semantics
Many of the elements that HTML5 adds that can be used right away are semantic in nature. In this sense,
HTML5 continues the appropriate goal of separating structure from style.

Marking Text
The new HTML5 element mark was introduced for highlighting content similarly to how a
highlighter pen might be used on important text in a book. The following example wraps a few
important words:

Unfortunately, you won’t necessarily see anything with such an example:

You would need to apply a style. Here, inline styles are used just to show the idea:

Indicating Dates and Time

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

as well as

--------------------------------------------------------------------------------------------------------
Ramesh E pg. 11
 Web Programming Module 2 : HTML5
--------------------------------------------------------------------------------------------------------
would both be valid. The element should contain a date/time value that is in the format YYYY-
MM-DDThh:mm:ssTZD, 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.

If you try something like

it may be meaningful to you but it does not conform to HTML5.

The following example is meaningful because it provides both a readable form and a
machine-understood value:

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. HTML5 reintroduces the
idea with the more appropriately named figure element. A simple example illustrates this new
element’s usage:

Acting as a semantic element, figure simply groups items within an enclosed <dd> tag, though
it may associate them with a caption defined by a <dt> 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:

The semantics defined by HTML5 for a <nav> tag eliminate this confusion. Interestingly, there
is no requirement to avoid using <ul> and <li> tags within navigation, so if you are a CSS
aficionado who is comfortable with that approach, it is fine to use markup like this:

--------------------------------------------------------------------------------------------------------
Ramesh E pg. 12
 Web Programming Module 2 : HTML5
--------------------------------------------------------------------------------------------------------

HTML5’s Open Media Effort

<video>
To insert video, use a <video> tag and set its src attribute to a local or remote URL containing a
playable movie. You should 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:

To address the media support problem, you need to add in alternative formats to use by includina
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. 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.

--------------------------------------------------------------------------------------------------------
Ramesh E pg. 13
 Web Programming Module 2 : HTML5
--------------------------------------------------------------------------------------------------------
<audio>
HTML5’s audio element is quite similar to the video element. The element should support
common sound formats such as WAV files:

If you want 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. Depending on the browser, these
controls may look quite different, as shown next.

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

Media Considerations
An interesting concern about “open” media formats is whether or not they really are open. As the
HTML5 specification emerges, fissures are already forming in terms of how these elements are
implemented, what codecs will be supported by what browser vendors, and whether HTML5 will
require a particular codec to be supported by all HTML5–compliant browsers.
The following adds in a fallback within the previous video example for Flash:

Review question:
1. How to insert a image in web page explain with example.
2. How to insert audio file in web page explain with example.
3. How to insert video in web page explain with example.

L15:
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. From a markup point of view, there is little that you can do
with a <canvas> tag. You simply put the element in the page, name it with an id attribute, and
define its dimensions with height and width attributes:

--------------------------------------------------------------------------------------------------------
Ramesh E pg. 14
 Web Programming Module 2 : HTML5
--------------------------------------------------------------------------------------------------------

After you place a <canvas> tag in a document, your 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:
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
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. For example, to do some more complex shapes, the path
API must be used. 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, context.beginPath() 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, context.closePath() 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():

Now, if you were to add context.closePath()before context.stroke(), 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. 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:

HTML5 Form Changes

However, most of the Web Forms specification has been incorporated into HTML5 and more and
more of its features are now being implemented in browsers.

--------------------------------------------------------------------------------------------------------
Ramesh E pg. 15
 Web Programming Module 2 : HTML5
--------------------------------------------------------------------------------------------------------
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:

--------------------------------------------------------------------------------------------------------
Ramesh E pg. 16
 Web Programming Module 2 : HTML5
--------------------------------------------------------------------------------------------------------
For example, 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:

This control presents itself as a slider, which so far has a varied appearance in browsers:

Like the number picker, the min, max, and step attributes all can be set to limit values:

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

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:

A browser may then set an error style on the field and present a message if there is a problem:

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

If a title is specified when patterns are applied, the browser may display this advisory information:

--------------------------------------------------------------------------------------------------------
Ramesh E pg. 17
 Web Programming Module 2 : HTML5
--------------------------------------------------------------------------------------------------------

However, in some cases, you can not only apply a pattern but also employ the appropriate
semantic type value like email, though it isn’t clear if these elements will apply their own implied
validation pattern matches simply by setting them as required:

Autocomplete Lists
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:

Miscellaneous Usability Improvements

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

Quite often, people put placeholder or advisory text here, like so:

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:

Also under HTML5, it should be possible to advise the browser to display the autocomplete
suggestions provided for fields if similar field names have been used in the past:

Review Questions:
1. Define canvas
2. How to draw a V shape using canva
3. What is the importance of autofill in canva.
4. How to convert V shape to triangle in canva.
5. What is the se of type attribute?
6. What is the use of placeholder?

--------------------------------------------------------------------------------------------------------
Ramesh E pg. 18
 Web Programming Module 2 : HTML5
--------------------------------------------------------------------------------------------------------

L16:

Emerging Elements and Attributes to Support Web Applications

HTML5 tends to encourage and that some of them may be changed or removed. As of yet, no
native
implementation of these elements exists, so we simulated their possible renderings using a
JavaScript library.

Menu Element 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:
<menu type="list" id="oldStyle">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</menu>

Under HTML5 the menu element has been returned to its original purpose. 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:

Using CSS and JavaScript, this menu might render like so:

The global contextmenu attribute is used to define an element’s context menu, which is generally
the menu invoked upon a right-click. The attribute’s value should hold a string that references the
id of a <menu> tag found in the DOM. For example,

--------------------------------------------------------------------------------------------------------
Ramesh E pg. 19
 Web Programming Module 2 : HTML5
--------------------------------------------------------------------------------------------------------
would reference the previously defined menu via a right-click. If there is no element found or no
value, then the element has no special context menu and the user agent should show its default
menu.
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.

Such a menu might look like the following:

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:

A potential rendering could look like

Slightly different from meter is the progress element, which defines completion progress for some
task. Commonly, this element might represent the percentage from 0 percent to 100 percent of a
task, such as loading to be completed:
--------------------------------------------------------------------------------------------------------
Ramesh E pg. 20
 Web Programming Module 2 : HTML5
--------------------------------------------------------------------------------------------------------

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. 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:

Here is an example of how the details element might appear:

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 I imagine using the calendar
picker and having the eventual release date of HTML5 being revealed in an output element:

Script could certainly be used to perform this action:

Review Questions:
1. What are emerging elements and attributes in web application?
2. How to mention script in web pages.
3. How to mention the command element in html.

L17:
The Uncertain Future of Frames
HTML5 continues to support <iframe>; in fact, it not only supports it but extends the tag. The
inline frame has plenty of life left if the HTML5 vision comes true because it will be used to
include new content and functionality in pages from remote sources and may evenbe used in intra-
document communication. So, the future of frames as far as HTML5 is concerned isn’t set.
HTML5 proposes two new attributes for the iframe element: seamless and sandbox. The
seamless attribute effectively renders the iframe as an inline include, which allows the parent
document’s CSS to affect the contents of the iframe:

--------------------------------------------------------------------------------------------------------
Ramesh E pg. 21
 Web Programming Module 2 : HTML5
--------------------------------------------------------------------------------------------------------

Here is the same example using XHTML style syntax:

The sandbox attribute “sandboxes” the iframe, essentially preventing it from pulling in content
from any source other than the iframe itself.

These prohibitions can be “turned off” using a number of attributes:

• allow-same-origin allows the iframe to pull in content from elsewhere in the same domain.
• allow-forms permits the submission of forms in the sandboxed iframe.
• allow-scripts allows the sandboxed iframe to run scripts from the same domain.

The order of the attributes does not affect any functionality.

Under HTML5, the <iframe> tag can also be written XHTML style, with a closing slash:

<iframe src="content.htm" height="200" width="200"

sandbox="allow-same-origin" />

The draggable Attribute and the Drag and Drop API

HTML5 introduces drag and drop natively to the browser. Drag and drop has long been
implemented with JavaScript code that was not designed specifically for that purpose. Now the
logic is made much easier and cleaner as the HTML5 specification includes an attribute and events
that are intended exclusively for drag and drop.
In order to drag an item, the element must have the draggable attribute set to true:
<div id="dragme" class="box" draggable="true">I am a draggable div</div>

Everything else must be configured through JavaScript. There are several new events for
drag and drop. These are attached to HTML elements just as any other event using
addEventListener() or attachEvent().
The following events are attached to the item that will be dragged:
• dragstart The drag has begun.
• drag The element is being moved.
• dragend The drag has completed.
The rest of the events are attached to the drop area:
• dragenter The element is dragged into the drop area.
• dragover The element is dragged into the drop area. The default behavior here is to cancel the
drop, so it is necessary to hook up this event and then return false or call preventDefault() to cancel
the default behavior.
• dragleave The element is dragged out of the drop area.
• drop The element is dropped in the drop area.
Here we use JavaScript to hook up some of these events on a draggable box and a drop area:

var drag = document.getElementById("dragbox");

--------------------------------------------------------------------------------------------------------
Ramesh E pg. 22
 Web Programming Module 2 : HTML5
--------------------------------------------------------------------------------------------------------
drag.addEventListener("dragstart",dragstart,false);
drag.addEventListener("dragend",dragend,false);
var drop = document.getElementById("dropzone");
drop.addEventListener("dragenter",dragenter,false);
drop.addEventListener("dragleave",dragleave,false);
drop.addEventListener("dragover",dragover,false);
drop.addEventListener("drop",drops,false);

Content editable Attribute

First introduced by Internet Explorer, the proprietary contenteditable attribute is supported by
most browsers today. HTML5 standardizes the use of this attribute globally on all elements. The
basic sense of the attribute is that if you set it to true, the browser should allow you to modify the
text directly when you click the element:

The browser may or may not present a style change to show you are in “edit mode.”

It is possible to use JavaScript to enable content editing by changing the corresponding

contentEditable property for the element. For example, the following changes this property and
updates the class name to reflect a style change when in edit mode.

Spellcheck Attribute
HTML5 defines a spellcheck attribute globally for elements. Enabling the spell checking of
element content is a matter of setting the spellcheck attribute to true:

--------------------------------------------------------------------------------------------------------
Ramesh E pg. 23
 Web Programming Module 2 : HTML5
--------------------------------------------------------------------------------------------------------

Commonly, this attribute is a bit more useful on form fields, given their interactive nature:

Given the application of single-line text fields, it is far more useful to set this attribute on
multiline text fields defined by a <textarea> tag, like so:

Internationalization Improvements
While there are not many internationalization-supporting changes in the HTML5 specification, it
does make standard the ruby, rp, and rt elements, which were initially supported by the Internet
Explorer browsers to associate a reading text with a base text for certain East Asian languages like
Japanese. The base text that the annotation is associated with should be enclosed in a <ruby> tag;
the annotation, enclosed in a <rt> tag, will appear as smaller text above the base text, and
optionally an <rp> tag can be used to wrap content to delimit ruby text for browsers that do not
support this formatting:

Difference between Programming language, Scripting Language and Markup Languages

Programming language: In simple terms, programming languages are set of instructions or
code which tells a computer what it needs to do. So basically, we provide a logic or instruction
to the computer to perform some task to get the desired output from it. When we need to write a
CD or burn a CD or when we need to paste something in pen drive these all instruction is given
through some software which involves some instructions or set of code and this software
communicate to the hardware. Programming languages are high-level languages that need to be
converted into machine level language because a computer can only understand machine level
language or binary language (0 and 1). So we write the instructions in human-readable form and
then we hit the compile button to convert this into machine level language which a computer can
understand and then the computer performs the task. This conversion is done by the compiler
which scans the complete code in one go and if it finds any error it immediately throws all errors.

--------------------------------------------------------------------------------------------------------
Ramesh E pg. 24
 Web Programming Module 2 : HTML5
--------------------------------------------------------------------------------------------------------
Examples are Java, C, C++, C#. Programming languages are most widely used to make software
or drivers.
Scripting Language: As the name suggest, it’s all about giving the script to perform some
certain task. Scripting languages are basically the subcategory of programming languages which
is used to give guidance to another program or we can say to control another program, so it also
involves instructions. It basically connects one language to one another languages and doesn’t
work standalone. Javascript, PHP, Perl, Python, VBScript these all are the examples of scripting
language. Scripting languages need to be interpreted (Scanning the code line by line, not like
compiler in one go) instead of compiled. There is no scope of compiler in scripting languages.
Scripting languages are most widely used to create a website.
Markup Languages: Markup languages are completely different from programming languages
and scripting languages. Markup languages prepare a structure for the data or prepare the look
or design of a page. These are presentational languages and it doesn’t include any kind of logic
or algorithm, for example, HTML. HTML is not asking any kind of question to the computer or
it’s not comparing things and it’s not asking any logical question. It’s just used to represent a
view inside a web browser. It tells the browser how to structure data for a specific page, layout,
headings, title, table and all or styling a page in a particular way. So basically it involves
formatting data or it controls the presentation of data. Examples of Markup languages
are HTML or XML. These languages are most widely used to design a website.

Review Questions:
1. What is the use of spellcheck elements
2. What is the difference between programming and scripting language.
3. Is HTML is programming language.
4. Can you mention some scripting languages.

Questions bank:
1. Explain the role of the following semantic elements of HTML5 with syntax and script
segments i) <nav> ii) <section> iii) <aside> iv) <div>
2. List and explain the HTML4 elements removed from HTML5 and removed HTML4
attributes in HTML5.
3. Explain the client side graphics with <Canvas>
4. Explain different semantics elements in HTML5 with example
5. Explain the following tags i)audio ii)video
6. Create an HTML5 form for the following output

--------------------------------------------------------------------------------------------------------
Ramesh E pg. 25
 Web Programming Module 2 : HTML5
--------------------------------------------------------------------------------------------------------

7. Explain Emerging elements & attributes to support web applications.

8. Write a note on iframe element in HTML5.
9. Why few HTML4 Elements Removed from HTML5? Give the Removed HTML Elements
list and also CSS alternatives
10. Write the snippet of code to demonstrate the following semantic inline element (i)
Indicating Dates and Time (ii) Inserting
11. Comment on the internationalization supporting changes in the HTML5 specification.
12. How HTML5 perform the Drawing and Styling Lines and Shapes? Explain with an
example to draw few different shapes with fills and styles.
13. What is the use of command Element and its attributes in HTML5? Explain with the help
of code snippet.
14. Mention the rules to remember while mappings between markup and script.

--------------------------------------------------------------------------------------------------------
Ramesh E pg. 26