Lecture HTML4 New Tag

New Tags in HTML5
HTML <article> tag

Definition and Usage
•The <article> tag specifies independent, self-contained content.
•An article should make sense on its own and it should be possible to
distribute it independently from the rest of the site.
Potential sources for the <article> element:

•Forum post
•Blog post
•News story
•Comment
<!DOCTYPE html>
<html>
<body>
<article>
<h1>Google Chrome</h1>
<p>Google Chrome is a free, open-source web browser developed by Google, released in
2008.</p>
</article>
</body>
</html>
HTML <aside> Tag
• The <aside> tag defines some content aside from the content it is
placed in.
• The aside content should be related to the surrounding content.
<!DOCTYPE html>
<html>
<body>
<p>My family and I visited The Epcot center this summer.</p>
<aside>
<h4>Epcot Center</h4>
<p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>
</body>
</html>
HTML <audio> Tag
• The <audio> tag defines sound, such as music or other audio

streams.
• Currently, there are 3 supported file formats for the <audio>
element:
◦ MP3,
◦ Wav, and
◦ Ogg
<!DOCTYPE html>
<html>
<body>
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>
HTML <canvas> Tag
• The <canvas> tag is used to draw graphics, on the fly, via scripting
(usually JavaScript).
• The <canvas> tag is only a container for graphics, you must use a
script to actually draw the graphics.
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas">Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 80, 100);
</script>
</body>
</html>
HTML <details> Tag
• The <details> tag specifies additional details that the user can view
or hide on demand.
• The <details> tag can be used to create an interactive widget that
the user can open and close. Any sort of content can be put inside
the <details> tag.
• The content of a <details> element should not be visible unless the
open attribute is set.
• The details tag is currently only supported in Opera, Chrome, and in Safari 6.
<!DOCTYPE html>
<html>
<body>
<details>
<summary>Copyright 1999-2014.</summary>
<p> - by Refsnes Data. All Rights Reserved.</p>
<p>All content and graphics on this web site are the property of the company Refsnes Data.</p>
</details>
<p><b>Note:</b> The details tag is currently only supported in Opera, Chrome, and in Safari 6.</p>
</body>
</html>
HTML <datalist> Tag
• The data list tag specifies a list of pre-defined options for an input
element.
• The data list tag is used to provide an "autocomplete" feature on
input elements. Users will see a drop-down list of pre-defined
options as they input data.
• Use the input element's list attribute to bind it together with a
data list element.
<!DOCTYPE html>
<html>
<body>
<form action="demo_form.asp" method="get">

<input list="abc" name="browser">
<datalist id="abc">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>
<p><strong>Note:</strong> The datalist tag is not supported in Internet Explorer 9 and earlier versions, or in Safari.</p>
</body>
</html>
HTML <embed> Tag
• The <embed> tag defines a container for an external application or

interactive content (a plug-in).
Attribute Value Description
height pixels Specifies the height of the embedded content
src URL Specifies the address of the external file to embed
type media_type Specifies the media type of the embedded content

width pixels Specifies the width of the embedded content
<!DOCTYPE html>
<html>
<body>
<embed src="helloworld.swf">
</body>
</html>
HTML <figure> Tag
• The figure tag specifies self-contained content, like illustrations,

diagrams, photos, code listings, etc.
• While the content of the <figure> element is related to the main
flow, its position is independent of the main flow, and if removed it
should not affect the flow of the document.
<!DOCTYPE html>
<html>
<body>
<p>The Pulpit Rock is a massive cliff 604 metres (1982 feet) above Lysefjorden, opposite the Kjerag plateau, in
Forsand, Ryfylke, Norway. The top of the cliff is approximately 25 by 25 metres (82 by 82 feet) square and
almost flat, and is a famous tourist attraction in Norway.</p>
<figure>
<img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304"
height="228">
</figure>
</body>
</html>
HTML <header> Tag
• The <header> element represents a container for introductory
content or a set of navigational links.
• A <header> element typically contains:
• one or more heading elements (<h1> - <h6>)
• logo or icon
• authorship information
• You can have several <header> elements in one document.
• Note: A <header> tag cannot be placed within a <footer>,
<address> or another <header> element.
<!DOCTYPE html>
<html>
<body>
<article>
<header>
<h1>Most important heading here</h1>
<h3>Less important heading here</h3>
<p>Some additional information here.</p>
</header>
<p>Lorem Ipsum dolor set amet....</p>
</article>
</body>
</html>
HTML <footer> Tag
• The <footer> tag defines a footer for a document or section.

• A <footer> element should contain information about its containing element.
A <footer> element typically contains:

• authorship information
• copyright information
• contact information
• sitemap
• back to top links
• related documents
• You can have several <footer> elements in one document.
<!DOCTYPE html>
<html>
<body>
<footer>
<p>Posted by: Hege Refsnes</p>
<p>Contact information: <a
href="mailto:someone@example.com">someone@example.com</a>.<
/p>
</footer>
</body>
</html>
<hgroup> tag– heading group
• The hgroup element is typically used to group a set of one or

more h1The hgroup element is typically used to group a set of one
or more h1-h6 elements — to group,
• for example, a section title and an accompanying subtitle.
<article>
<hgroup>
<h1>Title goes here</h1>
<h2>Subtitle of article</h2>
</hgroup>
<p>this is the paragraph</p>
</article>
HTML <keygen> Tag
• The <keygen> tag specifies a key-pair generator field used for

forms.
• When the form is submitted, the private key is stored locally, and
the public key is sent to the server.
• Note: The keygen tag is not supported in Internet Explorer.

<!DOCTYPE html>
<html>
<body>
<form action="demo_keygen.asp" method="get">

Username: <input type="text" name="usr_name">
Encryption: <keygen name="security">
<input type="submit">
</form>
<p><strong>Note:</strong> The keygen tag is not supported in Internet Explorer.</p>
</body>
</html>
HTML <dialog> Tag
• The <dialog> tag defines a dialog box or window.

• The <dialog> element makes it easy to create popup dialogs and
modals on a web page.
<!DOCTYPE html>
<html>
<body>
<p><b>Note:</b> The dialog tag is currently only supported in Chrome version 37+, Safari 6+ and Opera
24+.</p>
<table>
<tr>
<th>January <dialog open>This is an open dialog window</dialog></th>
<th>February</th>
<th>March</th>
</tr>
<tr>
<td>31</td>
<td>28</td>
<td>31</td>
</tr>
</table>
</body>
</html>
HTML <mark> Tag
• The <mark> tag defines marked text.

• Use the <mark> tag if you want to highlight parts of your text.
Do not forget to buy <mark>fruits</mark> today

HTML <meter> Tag
• The <meter> tag defines a scalar measurement within a known

range, or a fractional value. This is also known as a gauge.
• Examples: Disk usage, the relevance of a query result, etc.
<!DOCTYPE html>
<html>
<body>
<p>Display a gauge:</p>
<meter value="2" min="0" max="10">2 out of 10</meter><br>
<meter value="0.6">60%</meter>
<p><strong>Note:</strong> The meter tag is not supported in Internet Explorer or

Safari 5 (and earlier versions).</p>
</body>
</html>
HTML <nav> Tag
• The <nav> tag defines a set of navigation links.

• Notice that NOT all links of a document should be inside a <nav>
element. The <nav> element is intended only for major block
of navigation links.
<!DOCTYPE html>
<html>
<body>
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>
</body>
</html>
HTML <progress> Tag
The <progress> tag represents the progress of a task.

<!DOCTYPE html>
<html>
<body>
Downloading progress:
<progress value="22" max="100">
</progress>
<p><strong>Note:</strong> The progress tag is not supported in Internet Explorer

9 and earlier versions.</p>
</body>
</html>
New Form Elements
Tag Description
<datalist> Defines pre-defined options for input controls
<keygen> Defines a key-pair generator field (for forms)
<output> Defines the result of a calculation

The <datalist> tag specifies a list of pre-defined options for an <input> element.
The <datalist> tag is used to provide an "autocomplete" feature for <input> elements. Users will
see a drop-down list of pre-defined options as they input data.
The <datalist> element's id attribute must be equal to the <input> element's list attribute (this
binds them together).

New Media Elements
Tag Description
<audio> Defines sound or music content
<embed> Defines containers for external applications (like plug-ins)
<source> Defines sources for <video> and <audio>
<track> Defines tracks for <video> and <audio>
<video> Defines video or movie content
The HTML <video> Element
• The controls attribute adds video controls, like play, pause, and
volume.
• It is a good idea to always include width and height attributes.
• If height and width are not set, the browser does not know the
size of the video. The effect will be that the page will change (or
flicker) while the video loads.
• Text between the <video> and </video> tags will only display in
browsers that do not support the <video> element.
• Multiple <source> elements can link to different video files. The
browser will use the first recognized format.
<!DOCTYPE html>
<html>
<body>
<video width="320" height="240" controls>

<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</body>
</html>
.
HTML Iframes
An HTML iframe is used to display a web page within a web page. The
HTML <iframe> tag specifies an inline frame. An inline frame is used to
embed another document within the current HTML document

Iframe - Set Height and Width
<iframe src="demo_iframe.htm" height="200" width="300" title="Iframe

Example"></iframe>
<iframe src="demo_iframe.htm" style="height:200px;width:300px;" title="
Iframe Example"></iframe>
What is an SVG file?
Scalable Vector Graphics (SVG) is a web-
friendly vector file format. As opposed to pixel-
based raster files like JPEGs, vector files store
images via mathematical formulas based on
points and lines on a grid.
1. SVG stands for Scalable Vector Graphics
2. SVG is used to define vector-based graphics for the Web
3. SVG defines the graphics in XML format
4. Every element and every attribute in SVG files can be animated
5. SVG is a W3C recommendation
6. SVG integrates with other W3C standards such as the DOM and XSL
SVG
An SVG image begins with an <svg> element
The width and height attributes of the <svg> element define the width and height of the SVG image
The <circle> element is used to draw a circle
The cx and cy attributes define the x and y coordinates of the center of the circle. If cx and cy are not set, the circle's
center is set to (0, 0)
The r attribute defines the radius of the circle
The stroke and stroke-width attributes control how the outline of a shape appears. We set the outline of the circle to a
4px green "border"
The fill attribute refers to the color inside the circle. We set the fill color to yellow
The closing </svg> tag closes the SVG image

<!DOCTYPE html>
<html>
<body>
<h1>My first SVG</h1>
<svg width="100" height="100">

<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>
SVG Shapes : SVG has some predefined shape elements that can be used by developers:
Rectangle <rect>
Circle <circle>
Ellipse <ellipse>
Line <line>
Polyline <polyline>
Polygon <polygon>
Path <path>
Text <text>
Stroking <path> - by using stroke attribute in it
Blur effect
Linear
Radial
SVG Stroke Properties
SVG offers a wide range of stroke properties. In this chapter we will look at the following:
stroke
stroke-width
stroke-linecap : butt, round, square
stroke-dasharray : <path stroke-dasharray="5,5" d="M5 20 l215 0" />
All the stroke properties can be applied to any kind of lines, text and outlines of elements like a circle.
SVG Blur Effects
<defs> and <filter>
All internet SVG filters are defined within a <defs> element. The <defs> element is
short for definitions and contains definition of special elements (such as filters).The
<filter> element is used to define an SVG filter. The <filter> element has a required
id attribute which identifies the filter. The graphic then points to the filter to use.
SVG <feGaussianBlur>
<svg height="110" width="110">
<defs>
<filter id="f1" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="15" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3"
fill="yellow" filter="url(#f1)" />
</svg>
SVG Gradient
A gradient is a smooth transition from one color to another. In addition, several color transitions
can be applied to the same element.
There are two main types of gradients in SVG:
Linear
Radial
SVG LINEAR
The <linearGradient> element is used to define a linear gradient.
The <linearGradient> element must be nested within a <defs> tag. The <defs> tag is short
for definitions and contains definition of special elements (such as gradients). Linear
gradients can be defined as horizontal, vertical or angular gradients:
Horizontal gradients are created when y1 and y2 are equal and x1 and x2 differ
Vertical gradients are created when x1 and x2 are equal and y1 and y2 differ
Angular gradients are created when x1 and x2 differ and y1 and y2 differ
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
<text fill="#ffffff" font-size="45" font-family="Verdana" x="150" y="86">SVG</text>
Sorry, your browser does not support inline SVG.
</svg>
SVG Radial Gradient -
<radialGradient>
The <radialGradient> element is used to define a radial gradient.
The <radialGradient> element must be nested within a <defs> tag. The <defs> tag is
short for definitions and contains definition of special elements (such as gradients).
<defs>
<radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(255,255,255);
stop-opacity:0" />
</radialGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>
SVG EXAMPLES:
DRAG/DROP
Drag and Drop (DnD) is powerful User Interface concept which makes it easy to copy, reorder
and deletion of items with the help of mouse clicks. This allows the user to click and hold the
mouse button down over an element, drag it to another location, and release the mouse button
to drop the element there.
Sr.No. Events & Description
dragstart
1 Fires when the user starts dragging of the object.
dragenter
Fired when the mouse is first moved over the target element while a drag is occurring. A
listener for this event should indicate whether a drop is allowed over this location. If there
2 are no listeners, or the listeners perform no operations, then a drop is not allowed by default.
dragover
This event is fired as the mouse is moved over an element when a drag is occurring. Much of
3 the time, the operation that occurs during a listener will be the same as the dragenter event.
dragleave
This event is fired when the mouse leaves an element while a drag is occurring. Listeners
4 should remove any highlighting or insertion markers used for drop feedback.
drag
5 Fires every time the mouse is moved while the object is being dragged.
drop
The drop event is fired on the element where the drop was occurred at the end of the drag
6 operation. A listener would be responsible for retrieving the data being dragged and inserting
it at the drop location.
dragend
7 Fires when the user releases the mouse button while dragging an object.
<!DOCTYPE HTML> <body>
<html>
<head>
<style>
#div1, #div2 {
<h2>Drag and Drop</h2>
float: left; <p>Drag the image back and forth between the two div
width: 100px;
height: 35px;
elements.</p>
margin: 10px;
padding: 10px;
border: 1px solid black;
<div id="div1" ondrop="drop(event)"
} ondragover="allowDrop(event)">
</style>
<script>
<img src="img_w3slogo.gif" draggable="true"
function allowDrop(ev) { ondragstart="drag(event)" id="drag1" width="88" height="31">
ev.preventDefault();
}
</div>
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
<div id="div2" ondrop="drop(event)"
} ondragover="allowDrop(event)"></div>
function drop(ev) {
ev.preventDefault(); </body>
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
</html>
}
</script>
</head>
OUTPUT:
For Practice:
GEOLOCATION
The HTML Geolocation API is used to locate a user's position.
Using HTML Geolocation
The getCurrentPosition() method is used to return the user's position.
<!DOCTYPE html>
<html> OUTPUT:
<body>
<p>Click the button to get your coordinates.</p>
<button onclick="getLocation()">Try It</button>
<p id="demo"></p>
<script>
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
AUDIO
The HTML <audio> element is used to play an audio file on a web page.
• HTML Audio - How It Works

The controls attribute adds audio controls, like play, pause, and volume.
The <source> element allows you to specify alternative audio files which the browser may choose from. The browser will
use the first recognized format.
The text between the <audio> and </audio> tags will only be displayed in browsers that do not support the <audio>
element.
<!DOCTYPE html>
<html>
<body>
<audio controls autoplay> // <audio controls autoplay muted>

<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>
INPUT TYPES
<input type="button">
• <input type="radio">
<input type="checkbox"> • <input type="range">
<input type="color"> • <input type="reset">
<input type="date"> • <input type="search">
• <input type="submit">
<input type="datetime-local">
• <input type="tel">
<input type="email"> • <input type="text">
<input type="file"> • <input type="time">
<input type="hidden"> • <input type="url">
• <input type="week">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
Input Restrictions
Attribute Description
checked Specifies that an input field should be pre-selected when the page loads (for
type="checkbox" or type="radio")
disabled Specifies that an input field should be disabled
max Specifies the maximum value for an input field
maxlength Specifies the maximum number of character for an input field
min Specifies the minimum value for an input field
pattern Specifies a regular expression to check the input value against
readonly Specifies that an input field is read only (cannot be changed)
required Specifies that an input field is required (must be filled out)
size Specifies the width (in characters) of an input field
step Specifies the legal number intervals for an input field
value Specifies the default value for an input field
FORM ATTRIBUTES
Attribute Description
accept-charset Specifies the character encodings used for form submission
action Specifies where to send the form-data when a form is submitted
autocomplete Specifies whether a form should have autocomplete on or off
enctype Specifies how the form-data should be encoded when submitting it to the server (only for method="post")
method Specifies the HTTP method to use when sending form-data
name Specifies the name of the form

novalidate Specifies that the form should not be validated when submitted
rel Specifies the relationship between a linked resource and the current document
target Specifies where to display the response that is received after submitting the form
The Target Attribute
The target attribute specifies where to display the response that is received after submitting the
form.
Value Description
_blank The response is displayed in a new window or tab
_self The response is displayed in the current window
_parent The response is displayed in the parent frame
_top The response is displayed in the full body of the window
framename The response is displayed in a named iframe
<!DOCTYPE html>
<html>
<body>
<h2>The form target attribute</h2>
<p>When submitting this form, the result will be opened in a new browser
tab:</p>
<form action="/action_page.php" target="_blank">

<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
The Method Attribute
The method attribute specifies the HTTP method to be used when submitting the form data.
The form-data can be sent as URL variables (with method="get") or as HTTP post transaction
(with method="post").
The default HTTP method when submitting form data is GET.

GET:
•Appends the form data to the URL, in name/value pairs
•NEVER use GET to send sensitive data! (the submitted form data is visible in the URL!)
•The length of a URL is limited (2048 characters)
•Useful for form submissions where a user wants to bookmark the result
•GET is good for non-secure data, like query strings in Google
POST:
•Appends the form data inside the body of the HTTP request (the submitted form data is not
shown in the URL)
•POST has no size limitations, and can be used to send large amounts of data.
•Form submissions with POST cannot be bookmarked
SEMANTIC
A semantic element clearly describes its meaning to both the browser and the developer.
Examples of non-semantic elements: <div> and <span> - Tells nothing about its content.
Examples of semantic elements: <form>, <table>, and <article> - Clearly defines its content.
<article> <main>
<aside> <mark>
<details> <nav>
<figcaption> <section>
<figure> <summary>
<footer> <time>
<header>
WEBSTORAGE
HTML web storage provides two objects for storing data on the client:
window.localStorage - stores data with no expiration date

window.sessionStorage - stores data for one session (data is lost when the browser tab is
closed)
<div id="result"></div>
<script>
// Check browser support

if (typeof(Storage) != "undefined") {
// Store
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");
} else {
document.getElementById("result").innerHTML = "Sorry, your browser does not
support Web Storage...";
}
</script>
Clickcount() used to counts the number of times a user has
clicked a button
if (localStorage.clickcount) {
localStorage.clickcount = Number(localStorage.clickcount) + 1;
} else {
localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " +
localStorage.clickcount + " time(s).";
The sessionStorage Object
The sessionStorage object is equal to the localStorage object, except that it stores the data for only
one session. The data is deleted when the user closes the specific browser tab.
if (sessionStorage.clickcount) {
sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " +
sessionStorage.clickcount + " time(s) in this session.";
APP CACHE
The current version of HTML5 introduces application cache, which means that a web application
is cached, and accessible without an internet connection. Now we can make an offline web
application that will run without an internet connection by just creating a manifest file in our
application.
Syntax:
<html manifest="demo.appcache">
Uses of the application cache are:
Offline browsing: The users can use the application whenever they want to access the site when
they’re offline
Speed: When the data is already stored then it is easy to access data with the greater speed,
cached resources load faster than uncached resources.
Reduced server load: The browser will only download updated resources from the server.
HTML Cache Manifest Example
<!DOCTYPE HTML>
<html manifest="demo.appcache">
<body>
The content of the document......
</body>
</html>
The extension is .appcache
The Manifest File
The manifest file is a simple text file, which tells the browser what to cache (and what to never
cache).The manifest file has three sections:
CACHE MANIFEST - Files listed under this header will be cached after they are downloaded for
the first time
NETWORK - Files listed under this header require a connection to the server, and will never be
cached
FALLBACK - Files listed under this header specifies fallback pages if a page is inaccessible
WEB WORKERS
When executing scripts in an HTML page, the page becomes unresponsive until the script is
finished.
A web worker is a JavaScript that runs in the background, independently of other scripts,
without affecting the performance of the page. You can continue to do whatever you want:
clicking, selecting things, etc., while the web worker runs in the background.
Following are some key features of the Web Workers:
Web-workers are threaded JavaScript.

Web-workers are the kernel-level thread.
Web-workers requires more space and CPU time.
Web-workers enhances the speed of a website.
Web-worker executes codes on the client side (not server-side).
Web worker threads communicate with each other using postMessage() callback method
<!DOCTYPE html>
<html>
<head>
<title>Web Worker API</title>
</head>
<body>
<h2>Example to check the browser support of Web Workers</h2>
<div id="supported"></div>
<div id="unsupported"></div>
<button onclick="worker();">click me</button>
<script type="text/javascript">
function worker()
{
if(typeof(Worker)!=="undefined"){
document.getElementById("supported").innerHTML="Supporting the browser";
}
else
{
document.getElementById("unsupported").innerHTML="Not supporting";}
}
</script>
</body>
</html>
Creating & Terminating the Web Worker
Object:
Creating
◦ var worker= new Worker('worker.js');
Terminating
◦ worker.terminate();
SSE(Server-Sent Events - One Way
Messaging)
A server-sent event is when a web page automatically gets updates from a server.
This was also possible before, but the web page would have to ask if any updates were
available. With server-sent events, the updates come automatically.

Lecture HTML4 New Tag

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lecture HTML4 New Tag

Uploaded by

Copyright:

Available Formats

New Tags in HTML5

HTML <article> tag

Potential sources for the <article> element:

<p>My family and I visited The Epcot center this summer.</p>

• The <audio> tag defines sound, such as music or other audio

<form action="demo_form.asp" method="get">

• The <embed> tag defines a container for an external application or

height pixels Specifies the height of the embedded content

src URL Specifies the address of the external file to embed

type media_type Specifies the media type of the embedded content

• The figure tag specifies self-contained content, like illustrations,

• The <footer> tag defines a footer for a document or section.

A <footer> element typically contains:

• The hgroup element is typically used to group a set of one or

• The <keygen> tag specifies a key-pair generator field used for

• Note: The keygen tag is not supported in Internet Explorer.

<form action="demo_keygen.asp" method="get">

<p><strong>Note:</strong> The keygen tag is not supported in Internet Explorer.</p>

• The <dialog> tag defines a dialog box or window.

• The <mark> tag defines marked text.

Do not forget to buy <mark>fruits</mark> today

• The <meter> tag defines a scalar measurement within a known

<p><strong>Note:</strong> The meter tag is not supported in Internet Explorer or

• The <nav> tag defines a set of navigation links.

The <progress> tag represents the progress of a task.

<p><strong>Note:</strong> The progress tag is not supported in Internet Explorer

<datalist> Defines pre-defined options for input controls

<keygen> Defines a key-pair generator field (for forms)

<output> Defines the result of a calculation

see a drop-down list of pre-defined options as they input data.

binds them together).

<video width="320" height="240" controls>

HTML <iframe> tag specifies an inline frame. An inline frame is used to

embed another document within the current HTML document

<iframe src="demo_iframe.htm" height="200" width="300" title="Iframe

2. SVG is used to define vector-based graphics for the Web

3. SVG defines the graphics in XML format

4. Every element and every attribute in SVG files can be animated

5. SVG is a W3C recommendation

The <circle> element is used to draw a circle

The r attribute defines the radius of the circle

The closing </svg> tag closes the SVG image

<h1>My first SVG</h1>

<svg width="100" height="100">

<p>Click the button to get your coordinates.</p>

<button onclick="getLocation()">Try It</button>

• HTML Audio - How It Works

<audio controls autoplay> // <audio controls autoplay muted>

action Specifies where to send the form-data when a form is submitted

autocomplete Specifies whether a form should have autocomplete on or off

method Specifies the HTTP method to use when sending form-data

name Specifies the name of the form

<h2>The form target attribute</h2>

<form action="/action_page.php" target="_blank">

The default HTTP method when submitting form data is GET.

window.localStorage - stores data with no expiration date

// Check browser support

Web-workers are threaded JavaScript.

You might also like