HTML5 Cheatsheet

HTML5
HTML5
TABLE OF CONTENTS
Preface 2
Introduction 2
Basic HTML5 Syntax 2
Document Structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
Head Section . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
Body Section . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
HTML5 Elements 5
Formatting Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
Link Elements. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
Image Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
Table Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
Form Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
Multimedia Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
HTML5 Attributes 10
Global Attributes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
Event Attributes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
Form Attributes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
Input Attributes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
Link Attributes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Media Attributes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
Table Attributes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
HTML5 Forms 15
Form Controls. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
Form Validation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
HTML5 Graphics 17
Canvas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

SVG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

Audio Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
Video Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Canvas and SVG Graphics with Javascript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
HTML5 APIs 18
Geolocation API . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Web Storage API . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Canvas API . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Web Audio API . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Drag and Drop API . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
JAVACODEGEEKS.COM | © EXELIXIS MEDIA P.C. VISIT JAVACODEGEEKS.COM FOR MORE!

1 HTML5
Web Workers API . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
Best Practices 20
Accessibility . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
SEO . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

Performance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
HTML5 Resources 22
References. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
Tools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22

Frameworks and Libraries . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

2 HTML5
PREFACE
PREFACE Element Description
<html> This is the second
This HTML5 cheatsheet is a quick reference guide
for web developers who want to quickly look up element in an HTML5
HTML5 syntax, elements, attributes, APIs, and best document and wraps
practices. It provides a comprehensive overview of around all the other
HTML5, including its document structure, head and elements in the
body sections, text, formatting, link, image, table, document. It has two
form, multimedia, and graphics elements. It also main sections:a. The
covers HTML5 APIs, such as the Drag and Drop API, head section - This
as well as best practices for accessibility, SEO, and section contains meta
performance. In addition, this cheatsheet includes a data about the
list of helpful references, tools, frameworks, and document, such as the
libraries for web developers to use. title, keywords, and
description, as well as
links to external
INTRODUCTION
INTRODUCTION stylesheets and scripts.b.
The body section - This
HTML5 is the latest version of the HTML markup
section contains the
language used for creating web pages and
actual content of the
applications. With its new features and
document, such as text,
improvements, HTML5 offers developers more
images, and other
flexibility and ease of use when creating web
multimedia elements
content. This HTML5 cheatsheet is designed to
serve as a quick reference guide for web developers
who want to create HTML5 compliant pages or
<!DOCTYPE html>
applications. It includes sections on basic HTML5
syntax, document structure, elements, attributes,
<html>
APIs, best practices, and resources. Each section <head>
includes examples and explanations to help you <title>My HTML5 Document</title>
quickly understand the concepts and use them <meta charset="UTF-8">
effectively in your own web development projects. <meta name="description"
Whether you are a beginner or an experienced content="This is my HTML5 document">
developer, this cheatsheet will be a useful resource <meta name="keywords"
to keep at your fingertips. content="HTML5, document, web">
<link rel="stylesheet"
BASIC
BASICHTML5
HTML5SYNTAX
SYNTAX href="style.css">
</head>
DOCUMENT STRUCTURE <body>
<h1>Welcome to My HTML5
The document structure of an HTML5 document is
Document</h1>
the overall structure that defines how the
<p>This is the content of my
document is organized and displayed in a web
HTML5 document.
browser. The basic document structure of an
HTML5 document consists of the following <img src="image.jpg" alt="An
elements: image">
</body>
Element Description </html>
<!DOCTYPE>
</pre>
This is the first element
in an HTML5 document
and specifies the version In this example, we have the <!DOCTYPE> declaration
of HTML being used followed by the <html> element. Inside the <html>
element, we have the <head> element that contains

3 HTML5
the title, meta data, and stylesheet. The <body> Element Description
element contains the actual content of the
<link> Defines a link to an
document, which includes a header, a paragraph of
external resource, such
text, and an image.
as a stylesheet or script.
Some common
HEAD SECTION attributes for the <link>
element include: rel:
The head section of an HTML5 document is used to
Specifies the
provide metadata about the document, including
relationship between
the document title, links to stylesheets, and scripts.
the current document
The head section is not displayed on the page itself,
and the linked resource.
but rather is used by the browser to provide
type: Specifies the MIME
information about the page.
type of the linked
The following elements can be included in the head resource. href: Specifies
section of an HTML5 document: the URL of the linked
resource.
Element Description <script> Defines a script that is

<title> executed on the client-
Defines the title of the
side. The script can be
document, which
included directly in the
appears in the browser’s
head section, or it can be
title bar and is used as
included in an external
the default name for
file using the src
bookmarks
attribute. Some common
<meta> Defines metadata about attributes for the
the document, including <script> element
the character encoding, include: type: Specifies
description, and the MIME type of the
keywords. Some script. src: Specifies the
common attributes for URL of the external
the <meta> element script file. async:
include: charset: Specifies that the script
Specifies the character should be executed
encoding for the asynchronously. defer:
document. Specifies that the script
name="description": should be executed after
Specifies a brief the page has finished
description of the loading.
document.
name="keywords":
Specifies a list of <!DOCTYPE html>
comma-separated <html lang="en">
keywords for the
<head>
document.
<meta charset="UTF-8">
<title>My Website</title>
<meta name="description"
content="This is a description of my
website.">
href="style.css">
</head>

4 HTML5
<body> Element Description

 to create headings of
</body> different sizes. They are
</html> typically used to break
</pre> up the content into
sections and
subsections, with <h1>
In this example, the head element contains several
being the largest and
important elements for the web page, including:
most important heading
and <h6> being the
• The meta element with the charset attribute,
smallest and least
which sets the character encoding for the web
important
page to UTF-8.
<p> This element is used to
• The title element, which sets the title of the
create paragraphs of
web page that appears in the browser tab or
text. It is one of the most
window.
commonly used
• The meta element with the description elements in the body
attribute, which provides a brief description of section and is used to
the content of the web page for search engines display large blocks of
and social media sites. text
• The link element with the rel attribute set to <ul> This element is used to
"stylesheet", which links to an external CSS create unordered lists. It
stylesheet file named "style.css". This file is typically used to
contains the styling information for the web display a list of items
page. that do not need to be in
any particular order
This is just a basic example, and there are many
<ol> This element is used to
other elements and techniques that can be used in
create ordered lists. It is
the head section of an HTML5 document,
typically used to display
depending on the specific needs of the web page.
a list of items that need
to be in a specific order
BODY SECTION
<li> This element is used to
The <body> section of an HTML5 document contains create individual list
the content that is displayed to the user. This is items within a list
where you will include text, images, videos, and <img> This element is used to
other elements that you want to appear on the
display images on the
page.
page. It is typically used
to display logos, photos,
Some of the most commonly used HTML5 elements
or other types of
for the body section include:
graphics
<a> This element is used to
create links to other
pages or resources. It is
typically used to create
navigation links or to
link to related content

5 HTML5
Element Description <li><a href="#">Post

2</a></li>
<div> This element is used to
<li><a href="#">Post
create a container for
3</a></li>
other elements on the
page. It is typically used
</ul>
to group related content </aside>
together and apply </main>
styles to the group as a
whole <footer>
<span> This element is used to
© 2023 My Website. All
apply styles to a small rights reserved.
piece of text within a </footer>
larger block of text </body>
<form> This element is used to
create a form on the In this example, the body element contains three
page. It is typically used other elements: header, main, and footer. The header
to gather information element contains the main heading for the web
from the user, such as page (h1) and a navigation menu (nav) that links to
their name, email different sections of the website.
address, or other details
The main element contains two other elements:
article and aside. The article element contains a
<body> subheading (h2) and a paragraph of text, while the
<header> aside element contains a list of recent posts.
<h1>My Website</h1>
The footer element contains a small paragraph of
<nav>
text that includes the copyright symbol and the
<ul>
name of the website.
<li><a
href="#">Home</a></li>
<li><a HTML5
HTML5ELEMENTS
ELEMENTS
href="#">About</a></li>
<li><a FORMATTING ELEMENTS
href="#">Contact</a></li> HTML5 includes several formatting elements that
</ul> allow you to control the appearance of text on a
</nav> web page. These elements are used to apply styles
</header> such as bold, italic, and underlining to text, as well
as to highlight specific words or phrases.
<main>
<article> Some of the most commonly used formatting
elements in HTML5 include:
<h2>Welcome to My Website</h2>
<p>This is a paragraph of text
Element Description
that describes my website.
</article> <b> This element is used to
apply bold formatting to
<aside> text on the page. It is
often used to highlight
<h3>Recent Posts</h3>
important words or
<ul>
phrases
<li><a href="#">Post
1</a></li>

6 HTML5
Element Description In this example, the p element is used to create a

paragraph of text, and the strong and em elements
<i> This element is used to
are used to apply different styles to parts of the text.
apply italic formatting
The strong element is used to indicate text that
to text on the page. It is
should be displayed in a bold font, while the em
often used to indicate
element is used to indicate text that should be
that a word or phrase is
displayed in an italic font.
being emphasized
<u> This element is used to Here’s another example that demonstrates the use
apply underlining to of the mark and del elements:
text on the page. It is
key words or phrases
<p>My favorite color is
<mark>blue</mark>, but sometimes I
<mark> This element is used to wear a <del>red</del> shirt just to
highlight text on the
be different.
page. It is often used to
</pre>
indicate that a word or
phrase is important or
significant In this example, the mark element is used to
<small> This element is used to highlight the word "blue" in the text, while the del
reduce the size of text element is used to indicate that the word "red" has
on the page. It is often been deleted (i.e. it should be struck through).
used for fine print or
disclaimers LINK ELEMENTS
<sup> <br> <sub> These elements are used
HTML5 provides several link elements that allow
to create superscript
you to create links between web pages and other
and subscript text on the
types of content. These elements include:
page, respectively. They
are often used in
Element Description
scientific or
mathematical contexts <a> This element is used to
apply bold formatting to
<code> This element is used to
text on the page. It is
display code snippets on
the page. It is often used
important words or
in technical
phrases
documentation or
programming tutorials <link> This element is used to
apply italic formatting
<pre> This element is used to
to text on the page. It is
preserve whitespace
often used to indicate
and formatting within a
that a word or phrase is
block of text on the
being emphasized
page. It is often used for
displaying code or other <img> This element is used to
types of preformatted apply underlining to
text text on the page. It is
key words or phrases
<p>This is a paragraph with
<strong>strong</strong> and
<em>emphasized</em> text.

7 HTML5
Element Description IMAGE ELEMENTS

<audio> This element is used to Images are a crucial component of most web pages,
highlight text on the and HTML5 provides several elements that allow
page. It is often used to you to include and display images on your web
indicate that a word or pages. These elements include:
phrase is important or
significant
Element Description
<video> This element is used to <img> This element is used to
reduce the size of text embed images on the
on the page. It is often page. It can be used to
used for fine print or display images that are
disclaimers stored locally or to link
<iframe> These elements are used to images that are
to create superscript hosted on external
and subscript text on the servers. The <img>
page, respectively. They element has several
are often used in attributes that allow you
scientific or to specify the source of
mathematical contexts the image, its
dimensions, and its alt
text (which is displayed
<head> if the image cannot be
<link rel="stylesheet" loaded)
href="path/to/stylesheet.css"> <picture> This element is used to

<link rel="icon" provide alternative
href="path/to/favicon.ico"> versions of an image
<title>My Website</title> based on the user’s
</head> device or screen size. It
can be used to serve
</pre>
different images to
desktop and mobile
In this example, two link elements are used to users, for example
include a stylesheet and a favicon on the web page. <svg> This element is used to
The rel attribute is used to specify the relationship
embed scalable vector
between the current document and the linked
graphics (SVG) on the
document. The href attribute is used to specify the
page. SVG images are
path to the linked document.
resolution-independent
and can be scaled to any
The first link element includes a CSS stylesheet,
size without losing
which will be used to style the content of the web
clarity or quality
page. The second link element includes a favicon,
which is a small icon that appears in the browser <canvas> This element is used to
tab next to the title of the web page. create dynamic graphics
and animations on the
Note that the link element is also used to link to page using JavaScript
other types of resources, such as feeds, scripts, and code. It can be used to
alternate versions of the web page for different create custom images,
devices. charts, graphs, and
other types of visual
content

8 HTML5
Element Description
<img src="path/to/image.jpg" alt="A
<th> This element is used to
beautiful mountain landscape.">
create a header cell in
the table. It is typically
In this example, the img element is used to display used in the first row of
an image on the web page. The src attribute the table to label the
specifies the path to the image file, and the alt columns
attribute provides a text description of the image. If <thead><br><tbody><br>< These elements are used
the image cannot be displayed for any reason (e.g. if tfoot> to group table rows into
the file is missing or the network connection is
different sections. The
down), the text in the alt attribute will be displayed
<thead> element is used
instead.
to group the header
rows, the <tbody>
element is used to group
<img src="path/to/image.jpg" alt="A
the body rows, and the
beautiful mountain landscape."
<tfoot> element is used
width="500" height="300"
to group the footer rows
title="Click to view larger image">
In this example, the width and height attributes are <table>

used to specify the dimensions of the image. The <thead>
title attribute is used to provide a tooltip that will <tr>
be displayed when the user hovers over the image. <th>Product Name</th>
When the user clicks on the image, they will be <th>Description</th>
taken to a larger version of the image (assuming <th>Price</th>
that a larger version is available). </tr>
</thead>
TABLE ELEMENTS <tbody>
<tr>
HTML5 includes several elements that allow you to
<td>Product A</td>
create tables on your web pages. These elements
<td>This is a great
include:
product!</td>
Element Description
<td>$19.99</td>
</tr>
<table> This element is used to
<tr>
create the table itself. It
<td>Product B</td>
can contain one or more
<td>This is another great
<tr> (table row)
elements
product!</td>
<td>$24.99</td>
<tr> This element is used to
</tr>
create a row in the table.
</tbody>
It can contain one or
</table>
more <td> (table data)
elements
<td> This element is used to This code will create a simple table with three
create a cell in the table. columns: Product Name, Description, and Price. The
It can contain any type thead element defines the header row of the table,
of content, including while the tbody element defines the body of the
text, images, links, and table. Each row of the table is defined by a tr
other elements element, and each cell in the row is defined by a td

9 HTML5
element. The th element is used to define the Element Description

header cells of the table.
<select><br><option> These elements are used
to create dropdown
FORM ELEMENTS menus or selection lists.
The select element
HTML5 includes several elements that allow you to
creates the dropdown
create forms on your web pages. These elements
menu, while the option
include:
element creates each
individual option within
Element Description
the menu
<form> This element is used to
create a form on the
page. It requires the <form action="submit-form.php"
action attribute to method="post">
specify where the form <label for="name">Name:</label>
data should be <input type="text" id="name"
submitted, and the
name="name"><br>
method attribute to
specify how the form
data should be
<label>Gender:</label>
submitted (usually get <input type="radio" id="male"
or post) name="gender" value="male">
<label for="male">Male</label>
<input> This element is used to
<input type="radio" id="female"
create form fields for
users to enter data. It
name="gender" value="female">
can have several <label
different types, such as for="female">Female</label><br>
text, email, password,
checkbox, radio, submit, <input type="checkbox"
and reset. The name id="newsletter" name="newsletter">
attribute is used to <label for="newsletter">Sign up
identify the field when for our newsletter</label><br>
the form is submitted
<label> This element is used to <label for="color">Favorite
associate a label with a color:</label>
form field. The for <select id="color" name="color">
attribute should match <option value="red">Red</option>
the id attribute of the <option
form field
value="green">Green</option>
<textarea> This element is used to <option
create a larger text field value="blue">Blue</option>
for users to enter longer </select><br>
messages or comments
<input type="submit"
value="Submit">
</form>
This form will submit the data to a file called

"submit-form.php" using the POST method when
the user clicks the "Submit" button. The form

10 HTML5
includes a text field for the user’s name, a radio audio element.
button group for the user’s gender, a checkbox for </audio>
the newsletter subscription, a dropdown menu for
the user’s favorite color, and a submit button to <video controls width="640"
submit the form data. height="360">
<source src="video/movie.mp4"
MULTIMEDIA ELEMENTS type="video/mp4">
Your browser does not support the
HTML5 provides several elements for embedding
video element.
multimedia content into web pages. These elements
include:
</video>
Element Description <img src="images/photo.jpg" alt="A

beautiful mountain landscape.">
<audio> This element is used to
embed audio content
into a web page. It can This code will embed an audio file called
be used to play sound "music.mp3", a video file called "movie.mp4", and
effects, background an image called "photo.jpg" into the web page. The
music, or even podcasts. controls attribute will add player controls to the
You can specify the audio and video elements, allowing users to play,
source of the audio file pause, and adjust the volume. The width and height
using the src attribute attributes will set the dimensions of the video
<video> player. Finally, the alt attribute will provide a
This element is used to
description of the image for users who cannot see
embed video content
it.
into a web page. It can
be used to play videos,
movie trailers, or even HTML5
HTML5ATTRIBUTES
ATTRIBUTES
live streams. You can
specify the source of the GLOBAL ATTRIBUTES
video file using the src
attribute
class attribute
<img> This element is used to
embed images into a This attribute is used to apply a class to an HTML
web page. You can element. Multiple elements can share the same
specify the source of the class, and styling can be applied to all elements
image file using the src with that class using CSS. Here’s an example:
attribute. You can also
add an optional alt
<div class="container">
attribute to provide a
<p class="text">Some text in a
description of the image
for users who are
paragraph.
visually impaired
id attribute
Here’s an example of how to use these elements to
embed multimedia content into a web page:
This attribute is used to assign a unique identifier to
an HTML element. It is often used for styling or
scripting purposes. Here’s an example:
<audio controls>
<source src="audio/music.mp3"
type="audio/mpeg"> <h1>My Website</h1>

11 HTML5
style attribute
<script>
This attribute is used to apply inline styles to an
function myFunction() {
HTML element. Inline styles override any styles
alert("The page has finished
defined in an external CSS file or in a style element
loading!");
in the head section of the HTML document. Here’s
an example:
}
</script>
<p style="color: red; font-size:

18px;">Some text in a paragraph with onmouseover
inline styles.
This attribute is used to define a JavaScript function
to be executed when the user moves their mouse
over an HTML element. Here’s an example:
title attribute
This attribute is used to provide additional

Hover over me!
information about an HTML element. It is often
used to display a tooltip when the user hovers over
the element with their mouse. Here’s an example: <script>
function changeColor(element) {
element.style.backgroundColor =
<img src="image.jpg" alt="An image" "red";
title="This is a description of the }
image."> </script>
EVENT ATTRIBUTES onsubmit
Sure, here are some examples of event attributes in This attribute is used to define a JavaScript function
HTML5: to be executed when an HTML form is submitted.
Here’s an example:
onclick
This attribute is used to define a JavaScript function <form onsubmit="validateForm()">

to be executed when the user clicks on an HTML 
element. Here’s an example: <button
type="submit">Submit</button>
</form>
<button onclick="alert('Hello,
world!')">Click me!</button>
<script>
function validateForm() {
onload // Form validation code goes here
}
This attribute is used to define a JavaScript function </script>
to be executed when an HTML page has finished
loading. Here’s an example:
FORM ATTRIBUTES
<body onload="myFunction()">
action
 This attribute is used to specify the URL of the
</body> server-side script that will process the form data

12 HTML5
when the form is submitted. Here’s an example: used when submitting the form. The two most
common types are application/x-www-form-
urlencoded (default) and multipart/form-data. Here’s
<form action="process-form.php" an example:
method="post">

<button <form action="process-form.php"
type="submit">Submit</button> method="post"
</form> enctype="multipart/form-data">

<button
method type="submit">Submit</button>
</form>
This attribute is used to specify the HTTP method to
be used when submitting the form. The two most
common methods are GET and POST. Here’s an
INPUT ATTRIBUTES
example:
type
<form action="process-form.php"
This attribute is used to specify the type of input
method="post"> element. Some of the most common types are text,
 password, checkbox, radio, submit, reset, and file.
<button Here are some examples:
type="submit">Submit</button>
</form>
<input type="text" name="username"
placeholder="Enter your username">
name <input type="password"
name="password" placeholder="Enter
This attribute is used to give the form a name,
your password">
which can be used to refer to the form in JavaScript
<input type="checkbox"
code. Here’s an example:
name="remember" id="remember"
value="true">
<form name="myForm" action="process- <label for="remember">Remember
form.php" method="post"> me</label>
 <input type="radio" name="gender"
<button id="male" value="male">
type="submit">Submit</button> <label for="male">Male</label>
</form> <input type="radio" name="gender"
id="female" value="female">
<script> <label for="female">Female</label>
var myForm = <input type="submit" value="Submit">
document.forms["myForm"]; <input type="reset" value="Reset">
// JavaScript code that interacts <input type="file" name="photo">
with the form goes here
</script>
name
This attribute is used to give the input element a

enctype
name, which can be used to refer to the input
This attribute is used to specify the encoding type element in JavaScript code and to associate the

13 HTML5
input element with a label element. Here’s an Here’s an example:

example:
<a
<label href="https://www.example.com">Visit
for="username">Username:</label> Example.com</a>
id="username">
target
This attribute is used to specify where the linked

value
resource will be displayed when the user clicks on
This attribute is used to specify the initial value of the link. The value can be _blank to open the linked
the input element. This is particularly useful for resource in a new window or tab, _self to open the
input types like text and checkbox. Here’s an linked resource in the same window or tab, or the
example: name of a specific window or frame. Here’s an
example:

value="John"> <a href="https://www.example.com"
<input type="checkbox" target="_blank">Visit Example.com in
name="remember" value="true" a new tab</a>
checked>
rel
required
This attribute is used to specify the relationship
This attribute is used to specify that the input between the current document and the linked
element must be filled out before the form can be resource. The most common value is stylesheet to
submitted. Here’s an example: indicate that the linked resource is a CSS stylesheet
that should be applied to the current document.
required>
href="styles.css">
placeholder
This attribute is used to provide a hint or example type

value for the input element. Here’s an example:
This attribute is used to specify the MIME type of
the linked resource, such as text/css for a CSS
<input type="text" name="email" stylesheet, image/jpeg for a JPEG image, or
placeholder="Enter your email application/pdf for a PDF file. Here’s an example:
address">
<a href="document.pdf"
type="application/pdf">Download the
LINK ATTRIBUTES
PDF document</a>
href
This attribute is used to specify the URL of the media

linked resource, such as a web page, image, or file.
This attribute is used to specify the media type or

14 HTML5
query for which the linked resource is intended.

This is typically used with CSS stylesheets to apply <video src="video.mp4"
different styles for different screen sizes or devices. poster="poster.jpg"></video>
preload
href="styles.css" media="(min-width: This attribute is used to specify whether and how a
768px)"> video or audio file should be preloaded, or loaded
in the background, when the page loads. The
possible values are none, metadata, or auto. Here’s an
MEDIA ATTRIBUTES example:
autoplay
<audio src="audio.mp3"
This attribute is used to automatically start playing preload="auto"></audio>
a video or audio file when the page loads. Here’s an
example:
TABLE ATTRIBUTES
<video src="video.mp4" border

autoplay></video>
This attribute is used to specify the border size of a
table in pixels. Here’s an example:
controls
This attribute is used to display media controls, <table border="1">

such as a play/pause button, volume control, and <tr>
progress bar, for video and audio files. Here’s an <th>Header 1</th>
example: <th>Header 2</th>
</tr>
<tr>
<audio src="audio.mp3"
<td>Row 1, Column 1</td>
controls></audio>
</tr>
loop <tr>
This attribute is used to loop a video or audio file <td>Row 2, Column 2</td>
continuously, so that it starts playing again from the </tr>
beginning when it reaches the end. Here’s an </table>
example:
cellpadding
<video src="video.mp4" loop></video>
This attribute is used to specify the padding size of
the cells within a table, in pixels. Here’s an
poster example:
This attribute is used to specify an image to display

as the poster frame for a video file, before it starts <table cellpadding="5">
playing. Here’s an example:
<tr>
<th>Header 1</th>

15 HTML5
<th>Header 2</th> <tr>

</tr> <td>Row 2, Column 1</td>
<tr> <td>Row 2, Column 2</td>
<td>Row 1, Column 1</td> </tr>
<td>Row 1, Column 2</td> </table>
</tr>
<tr>
<td>Row 2, Column 1</td> HTML5
HTML5FORMS
FORMS
</tr> FORM CONTROLS
</table>
Form controls are the various types of input fields
that can be used in HTML forms. Here are some
examples of different form controls that can be
cellspacing
used:
This attribute is used to specify the spacing size
between the cells within a table, in pixels. Here’s an Text Input
example:
The text input type allows the user to enter text
data. It is the default input type.
<table cellspacing="10">
<tr>
<label for="name">Name:</label>
<th>Header 1</th>
<input type="text" id="name"
<th>Header 2</th>
name="name" required>
</tr>
<tr>
<td>Row 1, Column 1</td> Email Input
</tr> The email input type is used for email addresses. It
<tr> ensures that the user enters a valid email address.
<label for="email">Email:</label>
</tr>
<input type="email" id="email"
</table>
name="email" required>
width
Password Input
This attribute is used to specify the width of a table,
The password input type is used for password
in pixels or percentage. Here’s an example:
fields. It hides the user input and can help prevent
unauthorized access.
<table width="80%">
<tr> <label
<th>Header 1</th> for="password">Password:</label>
<th>Header 2</th> <input type="password" id="password"
</tr> name="password" required>
<tr>
</tr>

16 HTML5
Number Input for="country">Country:</label>

<select id="country" name="country"
The number input type is used for numeric values.
required>
It provides additional options for specifying a
<option value="">Select a
minimum and maximum value.
country</option>
<option value="USA">USA</option>
<label for="age">Age:</label> <option
<input type="number" id="age" value="Canada">Canada</option>
name="age" min="18" max="100" <option value="UK">UK</option>
required> <option
value="Australia">Australia</option>
</select>
Checkbox
The checkbox input type is used for a single Date

checkbox that the user can select or deselect.
The date input type is used for accepting dates.
<label for="agree-to-terms">Agree to
terms and conditions:</label> <label for="date-of-birth">Date of
<input type="checkbox" id="agree-to- Birth:</label>
terms" name="agree-to-terms" <input type="date" id="date-of-
required> birth" name="date-of-birth"
required>
Radio Button
Time
The radio button input type is used for a group of
radio buttons that the user can select only one of The time input type is used for accepting time
the options. values.
<label for="gender- <label for="appointment-

male">Male</label> time">Appointment Time:</label>
<input type="radio" id="gender-male" <input type="time" id="appointment-
name="gender" value="male" required> time" name="appointment-time"
required>
<label for="gender-
female">Female</label>
<input type="radio" id="gender- FORM VALIDATION
female" name="gender" value="female"
Form validation is the process of checking if the
required>
data entered in the form fields meets the specified
criteria or not. HTML5 provides a built-in form
validation feature that allows you to set rules for
Select Box
the form inputs and validate them easily. Here’s an
A select box, also known as a dropdown list, allows example of how to use form validation in HTML5:
users to choose an option from a list of predefined
options.
<form>
<label for="name">Name:</label>
<label <input type="text" id="name"

17 HTML5
name="name" required> HTML5

HTML5GRAPHICS
GRAPHICS
HTML5 introduces new elements and attributes for
<label for="email">Email:</label>
adding graphics to web pages. Here are some of the
<input type="email" id="email"
key features.
name="email" required>
<label CANVAS
for="password">Password:</label> The <canvas> element allows for dynamic, scriptable
<input type="password" rendering of 2D shapes and bitmap images. Here’s
id="password" name="password" an example of how to create a canvas element in
minlength="8" required> HTML:
<label
<canvas id="myCanvas" width="200"
for="confirm_password">Confirm
height="200"></canvas>
Password:</label>
<input type="password"
id="confirm_password"
SVG
name="confirm_password"
minlength="8" required> The <svg> element allows for scalable vector
graphics. SVG is a markup language for describing
<input type="submit" two-dimensional graphics applications and images,
value="Submit"> and a set of related graphics script interfaces.
</form> Here’s an example of how to create an SVG element
in HTML:
In the above example, we have a simple form with

four input fields: name, email, password, and <svg width="100" height="100">
confirm password. To enable form validation, we <circle cx="50" cy="50" r="40"
have used the required attribute for all the fields, stroke="black" stroke-width="2"
which means that the user must fill out all the fields fill="red" />
before submitting the form. </svg>
For the password and confirm password fields, we

have also used the minlength attribute to specify the
AUDIO ELEMENT
minimum length of the password. If the user enters
a password that is shorter than 8 characters, the The <audio> element allows for playing audio on
form will not be submitted, and an error message web pages. Here’s an example of how to create an
will be displayed. audio element in HTML:
When the user submits the form, the browser

automatically checks the input fields based on the <audio controls>
specified rules and displays error messages if any of <source src="music.mp3"
the fields are not valid. The error messages are
type="audio/mpeg">
displayed next to the invalid fields, making it easy
for the user to correct their mistakes.
audio element.
Form validation is an essential feature of modern </audio>
web forms as it helps to ensure that the data
entered by the user is correct and valid, which in
turn improves the overall user experience.

18 HTML5
VIDEO ELEMENT tion(function(position) {

console.log("Latitude: " +
The <video> element allows for playing videos on position.coords.latitude +
web pages. Here’s an example of how to create a
"Longitude: " +
video element in HTML:
position.coords.longitude);
});
<video width="320" height="240" } else {
controls> console.log("Geolocation is not
<source src="video.mp4" supported by this browser.");
type="video/mp4"> }
video tag.
</video> WEB STORAGE API
This API allows a web application to store data in

the browser’s storage, either local or session
CANVAS AND SVG GRAPHICS WITH storage.
JAVASCRIPT
Both the <canvas> and <svg> elements can be localStorage.setItem("key",

scripted using JavaScript to create interactive and
"value");
dynamic graphics. Here’s an example of how to
console.log(localStorage.getItem("ke
draw a circle on a canvas using JavaScript:
y")); // Outputs "value"
<canvas id="myCanvas" width="200"

height="200"></canvas> CANVAS API
<script>
This API allows a web application to dynamically
var canvas = draw graphics and animations on a web page.
document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath(); const canvas =
ctx.arc(100, 100, 50, 0, 2 * document.getElementById("myCanvas");
Math.PI); const ctx = canvas.getContext("2d");
ctx.stroke();
</script> ctx.fillStyle = "red";
ctx.fillRect(10, 10, 50, 50);
This will draw a circle with a radius of 50 pixels

ctx.strokeStyle = "blue";
centered at (100, 100) on the canvas.
ctx.beginPath();
ctx.moveTo(100, 100);
HTML5
HTML5APIS
APIS ctx.lineTo(150, 150);
ctx.stroke();
GEOLOCATION API
This API allows a web application to access the

WEB AUDIO API
user’s location data through the browser.
This API allows a web application to play and

manipulate audio in real-time, including creating
if (navigator.geolocation) {
custom audio effects and synthesizers.

navigator.geolocation.getCurrentPosi

19 HTML5
#image {
const context = new AudioContext(); width: 100px;
const oscillator = height: 100px;
context.createOscillator(); background-color:
const gainNode = orange;
context.createGain(); margin: 10px;
}
oscillator.connect(gainNode); </style>
gainNode.connect(context.destination </head>
); <body>
Drop Here
oscillator.type = "sawtooth"; Drag Me
oscillator.frequency.value = 440;
<script>
gainNode.gain.value = 0.5; var dragImage =
document.getElementById("image");
oscillator.start(context.currentTime var dropzone =
); document.getElementById("dropzone");
oscillator.stop(context.currentTime
+ 1);
dragImage.addEventListener("dragstar
t", function(event) {
DRAG AND DROP API
event.dataTransfer.setData("text/pla
The Drag and Drop API in HTML5 allows web
developers to make web applications more user-
in", event.target.id);
friendly by enabling users to drag and drop });
elements on a web page. With this API, you can
allow users to drag elements such as images, files,
or text, and drop them into a designated area on the dropzone.addEventListener("dragover"
web page. , function(event) {
event.preventDefault();
The Drag and Drop API consists of a set of events,

methods, and properties that enable you to create a
dropzone.style.backgroundColor =
drag and drop functionality on your web page.
"yellow";
});
<!DOCTYPE html>
<html>
<head> dropzone.addEventListener("dragleave
<title>Drag and Drop ", function(event) {
Example</title>
<style> dropzone.style.backgroundColor = "";
#dropzone { });
width: 200px;
height: 200px;
border: 2px dashed dropzone.addEventListener("drop",
black; function(event) {
padding: 10px; event.preventDefault();
margin: 10px; var data =
} event.dataTransfer.getData("text/pla

20 HTML5
in"); accurately describe the content they contain.

var draggedElement = This will make your code more readable and
accessible.
document.getElementById(data);
• Keep your code clean: Use consistent
dropzone.appendChild(draggedElement) indentation, commenting, and formatting. This
; will make it easier for you to debug and modify
your code later on.
dropzone.style.backgroundColor = ""; • Optimize images: Use image compression tools

}); to reduce the size of your images. Large images
</script> can significantly slow down the loading speed
</body> of your page.
</html> • Use external style sheets: Instead of
embedding styles within your HTML code, use
an external style sheet. This will make your
WEB WORKERS API code cleaner and easier to maintain.
This API allows a web application to run scripts in • Minimize the use of inline styles and scripts:
the background, freeing up the main thread for Using inline styles and scripts can make your
other tasks and improving performance. code harder to maintain and debug. Instead,
use external files for your styles and scripts.
• Use valid HTML: Use the W3C validation

// main.js service to ensure that your HTML code is valid.
const worker = new Valid HTML code will be more consistent across
Worker("worker.js"); different browsers and devices.
• Use accessibility features: Use alt tags for

worker.postMessage("Hello from the
images and provide descriptive text for links.
main thread!"); This will ensure that your site is accessible to
users with disabilities.
worker.onmessage = function(event) {
console.log("Message received from ACCESSIBILITY
worker:", event.data);
}; Accessibility in web design is about ensuring that
everyone, regardless of their physical abilities or
// worker.js limitations, can access and use a website with ease.
self.onmessage = function(event) { Here are some best practices for creating accessible
websites:
console.log("Message received from
main thread:", event.data);
• Use alt text for images: Alt text provides a
self.postMessage("Hello from the textual alternative to images, which is read by
worker thread!"); screen readers for visually impaired users.
}; Make sure to describe the image accurately and
use concise, descriptive language.
• Use descriptive link text: Avoid using generic

BEST
BESTPRACTICES
PRACTICES link text like "click here" or "read more."
Instead, use descriptive text that tells users
HTML5 is a powerful language that provides a lot of
where the link will take them.
flexibility and functionality to web developers. To
ensure that you create efficient and high- • Ensure proper color contrast: Use colors with
performing web pages, it’s important to follow sufficient contrast to make sure that text is
some best practices. Here are a few to keep in mind: readable for users with visual impairments.
• Use clear, readable fonts: Use fonts that are

• Use semantic HTML: Use HTML elements that

21 HTML5
easy to read, and make sure to use appropriate quality backlinks from reputable websites to
font sizes and spacing. help improve your site’s visibility and ranking.
• Provide captions and transcripts for • Monitor and analyze your traffic: Monitor
multimedia: Videos should include captions your website traffic and use analytics tools to
and audio files should have transcripts to gain insights into user behavior and optimize
ensure that deaf and hard-of-hearing users can your website accordingly.
access the content.
• Use ARIA attributes: Use ARIA (Accessible Rich PERFORMANCE

Internet Applications) attributes to enhance the
HTML5 offers many features to improve website
accessibility of web content for users of
performance, and following best practices can
assistive technologies.
make your pages load faster and perform better.
• Test with assistive technologies: Use screen Here are some tips to optimize your website’s
readers, keyboard-only navigation, and other performance:
assistive technologies to test your website’s
accessibility. • Minimize HTTP Requests: Reduce the number
of HTTP requests required to load a page. This
SEO can be achieved by combining multiple files
into a single file or using CSS sprites.
SEO, or Search Engine Optimization, is the practice
• Use Cache-Control Headers: Cache-Control
of optimizing a website’s content and structure in
headers allow browsers to cache files locally. By
order to increase its visibility and ranking on
using Cache-Control headers, you can reduce
search engine results pages. Here are some best
the number of requests that are made to your
practices for optimizing your HTML5 website for
server.
search engines:
• Optimize Images: Use compressed images to
• Use semantic HTML5 tags: Semantic HTML5 reduce the size of your images. Large image
tags like <header>, <nav>, <main>, and <footer> sizes can increase page load times.
can help search engines better understand the
• Use a Content Delivery Network (CDN): A
content and structure of your website.
CDN can improve your website’s performance
• Include relevant keywords: Incorporate by caching static content on multiple servers
relevant keywords into your page titles, across the world. This helps to reduce the load
headings, meta descriptions, and content. But on your server and speed up page load times.
be careful not to overuse keywords or engage
• Minimize JavaScript and CSS: Minimize the
in keyword stuffing, which can negatively
amount of JavaScript and CSS required to load
impact your site’s ranking.
a page. This can be achieved by compressing
• Use descriptive URLs: Use descriptive, easy-to- files or by removing unnecessary code.
read URLs that include relevant keywords and
• Use Gzip Compression: Use Gzip compression
accurately reflect the content of the page.
to compress files before they are sent to the
• Optimize images: Optimize your images by browser. This can reduce the file size of your
compressing them to reduce their file size and pages and improve load times.
adding descriptive alt tags that accurately
• Avoid Redirects: Redirects add additional
describe the image.
HTTP requests and can slow down page load
• Provide meta descriptions: Use descriptive times. Avoid redirects wherever possible.
meta descriptions that accurately summarize
• Use Async and Defer Attributes: Use the
the content of each page.
async and defer attributes on scripts to speed
• Use responsive design: Ensure that your up page load times. These attributes allow
website is optimized for mobile devices by scripts to load asynchronously and do not block
using responsive design techniques. the rendering of the page.
• Build high-quality backlinks: Build high-

22 HTML5
HTML5
HTML5RESOURCES
RESOURCES Reference Description
Here are some resources for learning more about HTML5 Doctor A site focused on
HTML5: teaching best practices
and use cases for
HTML5
Resource Description
CanIUse A website that allows
HTML5 Boilerplate A popular front-end
you to check the
template that provides a
compatibility of HTML5
starting point for
features across different
building modern, cross-
web browsers
browser compatible web
applications
These references can provide a wealth of
HTML5 UP A collection of free, information for developers looking to learn or
responsive HTML5 expand their knowledge of HTML5.
templates that can be
used as a starting point
TOOLS
for building websites
CSS-Tricks A website that provides There are many tools available for working with
tutorials, articles, and HTML5, including:
resources for working
with CSS, HTML, and Tool Description
JavaScript
Sublime Text Α popular text editor for
Stack Overflow A Q&A community for coding HTML5, with
programmers, including syntax highlighting and
those working with autocomplete features
HTML5. You can find
Atom Αnother popular text
answers to common
editor with similar
questions and ask your
features as Sublime Text
own
Adobe Dreamweaver Another popular text
editor with similar
REFERENCES features as Sublime Text
Some useful references for HTML5 are: Visual Studio Code Α lightweight code
editor with built-in
Reference Description support for HTML5, CSS,
and JavaScript
W3C HTML5 The official specification
Specification for HTML5 by the World Brackets Αn open-source HTML5
Wide Web Consortium editor with live preview
(W3C) and inline editing
features
Mozilla Developer An extensive resource
Network (MDN) for HTML5 CodePen Αn online code editor
documentation, and community for
tutorials, and examples sharing HTML5, CSS,
and JavaScript code
HTML5 Rocks A Google-run site with
snippets
articles, tutorials, and
examples on HTML5
and related technologies

23 HTML5
Tool Description Framework / Library Description
jsFiddle Αn online code editor Foundation A responsive front-end

and playground for framework that
HTML5, CSS, and provides a set of
JavaScript, with a focus customizable HTML,
on front-end CSS, and JavaScript
development components for building
responsive websites
Gulp Α task runner tool that
can automate repetitive React A JavaScript library for
tasks in the HTML5 building user interfaces
development process, that can be used to
such as compiling SASS create dynamic and
files, optimizing images, interactive web
and concatenating applications
JavaScript files
AngularJS A popular JavaScript
Grunt Αnother task runner framework for building
tool that can automate dynamic web
similar tasks as Gulp applications that
provides a set of tools
Adobe Edge Animate Α powerful tool for
and features for
creating interactive
building single-page
HTML5 animations and
applications
multimedia content
Vue.js A progressive JavaScript
Emmet A productivity tool that
framework for building
can help speed up
user interfaces that can
HTML5 coding by
be used to build web
generating code snippets
applications
based on simple
shorthand syntax jQuery A popular JavaScript
library that simplifies
These tools can be useful for developers of all skill HTML document
levels and can help improve productivity and manipulation, event
efficiency when working with HTML5. handling, and animation
D3.js A JavaScript library that

FRAMEWORKS AND LIBRARIES provides a set of tools
for visualizing data
Here are some popular frameworks and libraries using HTML, SVG, and
used for HTML5 development: CSS
Three.js A JavaScript library that

Framework / Library Description
provides a set of tools
Bootstrap A popular CSS for creating 3D graphics
framework that allows and animations using
developers to create WebGL
responsive websites
Phaser A JavaScript library for
quickly and easily
building HTML5 games
that provides a set of
tools and features for
creating games for
desktop and mobile
devices

24 HTML5
Framework / Library Description
Ionic A popular HTML5

framework for building
hybrid mobile apps that
can be used to build
mobile apps using web
technologies such as
HTML, CSS, and
JavaScript
JCG delivers over 1 million pages each month to more than 700K software
developers, architects and decision makers. JCG offers something for everyone,
including news, tutorials, cheat sheets, research guides, feature articles, source code
and more.
CHEATSHEET FEEDBACK
WELCOME
support@javacodegeeks.com
Copyright © 2014 Exelixis Media P.C. All rights reserved. No part of this publication may be SPONSORSHIP
reproduced, stored in a retrieval system, or transmitted, in any form or by means electronic, OPPORTUNITIES
mechanical, photocopying, or otherwise, without prior written permission of the publisher. sales@javacodegeeks.com

HTML5 Cheatsheet

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

HTML5 Cheatsheet

Uploaded by

Copyright:

Available Formats

HTML5

Canvas and SVG Graphics with Javascript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

Web Storage API . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

Web Audio API . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

Drag and Drop API . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

JAVACODEGEEKS.COM | © EXELIXIS MEDIA P.C. VISIT JAVACODEGEEKS.COM FOR MORE!

Web Workers API . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

Frameworks and Libraries . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

JAVACODEGEEKS.COM | © EXELIXIS MEDIA P.C. VISIT JAVACODEGEEKS.COM FOR MORE!

JAVACODEGEEKS.COM | © EXELIXIS MEDIA P.C. VISIT JAVACODEGEEKS.COM FOR MORE!

Element Description <script> Defines a script that is

JAVACODEGEEKS.COM | © EXELIXIS MEDIA P.C. VISIT JAVACODEGEEKS.COM FOR MORE!

<body> Element Description

JAVACODEGEEKS.COM | © EXELIXIS MEDIA P.C. VISIT JAVACODEGEEKS.COM FOR MORE!

Element Description <li><a href="#">Post

JAVACODEGEEKS.COM | © EXELIXIS MEDIA P.C. VISIT JAVACODEGEEKS.COM FOR MORE!

Element Description In this example, the p element is used to create a

JAVACODEGEEKS.COM | © EXELIXIS MEDIA P.C. VISIT JAVACODEGEEKS.COM FOR MORE!

Element Description IMAGE ELEMENTS

href="path/to/stylesheet.css"> <picture> This element is used to

JAVACODEGEEKS.COM | © EXELIXIS MEDIA P.C. VISIT JAVACODEGEEKS.COM FOR MORE!

In this example, the width and height attributes are <table>

JAVACODEGEEKS.COM | © EXELIXIS MEDIA P.C. VISIT JAVACODEGEEKS.COM FOR MORE!

element. The th element is used to define the Element Description

This form will submit the data to a file called

JAVACODEGEEKS.COM | © EXELIXIS MEDIA P.C. VISIT JAVACODEGEEKS.COM FOR MORE!

Element Description <img src="images/photo.jpg" alt="A

JAVACODEGEEKS.COM | © EXELIXIS MEDIA P.C. VISIT JAVACODEGEEKS.COM FOR MORE!

<p style="color: red; font-size:

This attribute is used to provide additional

EVENT ATTRIBUTES onsubmit

This attribute is used to define a JavaScript function <form onsubmit="validateForm()">

JAVACODEGEEKS.COM | © EXELIXIS MEDIA P.C. VISIT JAVACODEGEEKS.COM FOR MORE!

This attribute is used to give the input element a

JAVACODEGEEKS.COM | © EXELIXIS MEDIA P.C. VISIT JAVACODEGEEKS.COM FOR MORE!

input element with a label element. Here’s an Here’s an example:

This attribute is used to specify where the linked

<input type="text" name="username"

This attribute is used to provide a hint or example type

This attribute is used to specify the URL of the media

JAVACODEGEEKS.COM | © EXELIXIS MEDIA P.C. VISIT JAVACODEGEEKS.COM FOR MORE!

query for which the linked resource is intended.

<video src="video.mp4" border

This attribute is used to display media controls, <table border="1">

This attribute is used to specify an image to display

JAVACODEGEEKS.COM | © EXELIXIS MEDIA P.C. VISIT JAVACODEGEEKS.COM FOR MORE!

<th>Header 2</th> <tr>

JAVACODEGEEKS.COM | © EXELIXIS MEDIA P.C. VISIT JAVACODEGEEKS.COM FOR MORE!

Number Input for="country">Country:</label>

The checkbox input type is used for a single Date

<label for="gender- <label for="appointment-

JAVACODEGEEKS.COM | © EXELIXIS MEDIA P.C. VISIT JAVACODEGEEKS.COM FOR MORE!

name="name" required> HTML5

In the above example, we have a simple form with

For the password and confirm password fields, we

When the user submits the form, the browser

JAVACODEGEEKS.COM | © EXELIXIS MEDIA P.C. VISIT JAVACODEGEEKS.COM FOR MORE!

VIDEO ELEMENT tion(function(position) {

This API allows a web application to store data in

Both the <canvas> and <svg> elements can be localStorage.setItem("key",

<canvas id="myCanvas" width="200"

This will draw a circle with a radius of 50 pixels

This API allows a web application to access the

This API allows a web application to play and