Module-2 HTML5

MODULE 2
HTML5
A group of developers at Opera and Mozilla formed the WHATWG (Web Hypertext Application
Technology Working Group) group within the W3C, and worked to enhance the features of
HTML to higher versions. The WHATWG group was very small group led by Ian Hickson. By
2009, the W3C supported the WHATWG group and the work done by them and named it as
HTML5.
HTML5 is the latest version of HTML that comes with syntax compatible with HTML4 and
XHTML. HTML5 has many flexible features, but it does not follow syntax rules similar to
XHTML. Using syntax in HTML5 is easy, and in this tutorial, we will learn about various
HTML5 syntaxes.
There are three main aims of HTML5:
1. Specify unambiguously how browsers should deal with invalid markup.
2. Provide an open, nonproprietary programming framework (via JavaScript) for creating rich
web applications.
3. Be backwards compatible with the existing web programs.

The new features that come with HTML5.

1. For tag attributes, quoting is not mandatory. Also, attribute values are not obligatory.
2. It is also not mandatory to close any empty void elements.
3. Only void elements (BR, IMG, LINK, etc.) can be self-closed using this />.
4. Upper-case tag names are also allowed.
5. The starting tags are not mandatory for every element.

Hello HTML5
The syntax of HTML5 should be mostly familiar

Dept. of CSE, DSCE Page 1

 Module-2 HTML5

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.

HTML5 New Tags

Dept. of CSE, DSCE Page 2

 Module-2 HTML5

Header and Footer

Typically the header contains the site logo and title (and perhaps additional subtitles or taglines),
horizontal navigation links, and perhaps one or two horizontal banners. The typical footer
contains less important material, such as smaller text versions of the navigation, copyright
notices, information about the site’s privacy policy, and perhaps twitter feeds or links to other
social sites.
Both the HTML5 <header> and <footer> element can be used not only for page headers and
footers, but also for header and footer elements within other HTML5 containers, such as <article>
or <section>.

<header>
<h1 style="color:green"> About Jim Corbett</h1>
</header>
<footer>
<a href = "mailto:[email protected]">Mail for more info</a><br>
<a href = "tel: 9998966896">Phone</a><br>
Give your Feedback<a href="feedback.html">here</a>
copyright &copy 2021
</footer>

Heading Groups
A header may contain multiple headings <hgroup> element is usually used in such cases. The
<hgroup> element can be used in contexts other than a header. For instance, one could also use
an <hgroup> within an <article> or a <section> element. The <hgroup> element can only contain
<h1>, <h2>, etc., elements.

Navigation

Dept. of CSE, DSCE Page 3

 Module-2 HTML5

The <nav> element represents a section of a page that contains links to other pages or to other
parts within the same page. Like the other new HTML5 semantic elements, the browser does not
apply any special presentation to the <nav> element. The <nav> element was intended to be used
for major navigation blocks. However, like all the new HTML5 semantic elements, from the
browser’s perspective, there is no definite right or wrong way to use the <nav> element. Its sole
purpose is to make the document easier to understand.

<nav>
More information <a href = "https://www.corbettnationalpark.in/"> visit here</a>
For Packages <a href="https://www. corbett-tour-packages.htm"> Click here </a>
To link to another page <a href ="second.html"> Click </a>
</nav>

Articles and Sections

The new HTML5 semantic elements <section> and <article> are used to group the tags. Suppose
a book is divided into smaller blocks of content called chapters, which makes the book easier to
read. If each chapter is further divided into sections (and these sections into even smaller
subsections), this makes the content of the book easier to manage for both the reader and the
authors.
The article element represents a section of content that forms an independent part of a document
or site. The section element represents a section of a document, typically with a title
or heading. It is a broader element.

Figure and Figure Captions

Prior to HTML5, web authors typically wrapped images and their related captions within a
nonsemantic <div> element. In HTML5 we can instead use the <figure> and <figcaption>
elements. The figure element represents some flow content, optionally with a caption, that is self-
contained and is typically referenced as a single unit from the main flow of the document.

<p>This photo was taken on October 22, 2011 with a Canon EOS 30D camera.</p>
<figure>
<img src="images/central-park.jpg" alt="Central Park" /><br/>
<figcaption>Conservatory Pond in Central Park</figcaption>
</figure>
</p>

Dept. of CSE, DSCE Page 4

 Module-2 HTML5

Aside
The <aside> element is similar to the <figure> element, the <aside> element “represents
a section of a page that consists of content that is indirectly related to the content around the aside
element”. The <aside> element is be used for sidebars, pull quotes, groups of advertising images,
or any other grouping of non-essential elements.

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:
<p>Here comes <mark style="background-color: red;">marked text</mark> was it
obvious?</p>
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,

<p>Today it is <time>2009-07-08</time> which is an interesting date.</p>

as well as

<p>An interesting date/time for SciFi buffs is <time>1999-09-13T09:15:00 </time>!</p>

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. However, it seems reasonable
that the time element would contain values that may not be in a common format but are
recognized by humans as dates.

To provide both human- and machine-friendly date/time content, the element supports a
datetime attribute.

<p>My first son was born on <time datetime="2006-01-13">Friday the 13th </time> so it
is my new lucky day.</p>
Dept. of CSE, DSCE Page 5
 Module-2 HTML5

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.

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:

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:

Dept. of CSE, DSCE Page 6

 Module-2 HTML5

To address the media support problem, you need to add in alternative formats to use by
including a number of <source> tags:

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.

<audio>

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

<audio src="http://htmlref.com/ch2/music.wav"></audio>

Dept. of CSE, DSCE Page 7

 Module-2 HTML5

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:

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.

Example using the first canvas element and associated JavaScript:

Dept. of CSE, DSCE Page 8

 Module-2 HTML5

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():

Dept. of CSE, DSCE Page 9

 Module-2 HTML5

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.

Note: For few more examples refer textbook.

Drawing Arcs and Curves It is also possible to create curved lines using arc(), arcTo(),
quadraticCurveTo(), and bezierCurveTo().

context.arc(150,150,100,0,Math.PI*2,true);

Dept. of CSE, DSCE Page 10

 Module-2 HTML5

Scaling, Rotating, and Translating Drawings

The scale(x,y) function, which can be used to scale objects. The x parameter shows how
much to scale in the horizontal direction and the y parameter indicates how much to scale
vertically.

Dept. of CSE, DSCE Page 11

 Module-2 HTML5

HTML5 Form Changes

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

First, setting the type equal to color should create a color picker:

<p><label>color:<input type="color" name="favColor"></label></p>

A variety of date controls can now be directly created by setting the type attribute to date,
datetime, datetime-local, month, week, or time.

Dept. of CSE, DSCE Page 12

 Module-2 HTML5

Emerging Elements and Attributes to Support Web Applications

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>

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:

command Element

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 radio group indication.

Dept. of CSE, DSCE Page 13

 Module-2 HTML5

meter and progress Elements

The meter element defines a scalar measurement within a known range, similar to what might
be represented by a gauge.

details Element

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.

Dept. of CSE, DSCE Page 14

 Module-2 HTML5

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.

The Uncertain Future of Frames

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:

<iframe src="content.html" name="thisframe" width="200" height="300"

seamless">[alternate content]</iframe>

Here is the same example using XHTML style syntax:

<iframe src="content.htm" name="thisframe" width="200" height="300"

seamless="seamless">[alternate content]</iframe>

Dept. of CSE, DSCE Page 15

 Module-2 HTML5

The sandbox attribute “sandboxes” the iframe, essentially preventing it from pulling in
content from any source other than the iframe itself. Used without attributes, sandbox has the
following effects on the iframe:

 New windows cannot be created from within the iframe.

 Plug-ins are prohibited; embed, object, and applet will not function in a sandboxed
iframe. Nested inline frames are prohibited.
 A completely sandboxed iframe is considered, in essence, a new subdomain on the
client side. Access to JavaScript is not allowed; cookies can’t be read or written.
 A completely sandboxed inline frame cannot submit forms or run scripts.

The draggable Attribute and the Drag and Drop API

HTML5 introduces drag and drop natively to the browser. 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.

contenteditable Attribute

Dept. of CSE, DSCE Page 16

 Module-2 HTML5

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:

<p contenteditable="true">This paragraph of text is editable. Click it and you will see. Of
course there is no sense of saving it with code to transmit the information to the server. This
paragraph of text is editable. Click it and you will see. Of course there is no sense of saving
it with code to transmit the information to the server.</p>

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:

<p spellcheck="true">Spellcheck on: There is a tyyypooo here. Did the browser spot
it?</p>

Note: Refer examples from textbook

Dept. of CSE, DSCE Page 17