Learn To Code HTML5

HTML
5

HTML 5 Tutorial

HTML5 Introduction

What is New in HTML5?
The DOCTYPE declaration for HTML5 is very simple:

<!DOCTYPE html>
The character encoding (charset) declaration is also very simple:
<meta charset=“UTF-8”>
HTML5 Example:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
Content of the document……
</body>
</html>
The default character encoding in HTML5 is UTF-8.

New HTML5 Elements
The most interesting new HTML5 elements are:

New semantic elements like <header>, <footer>, <article>, and <section>.
New attributes of form elements like number, date, time, calendar, and range.
New graphic elements: <svg> and <canvas>.
New multimedia elements: <audio> and <video>.
In the next chapter, HTML5 Support, you will learn how to “teach” older browsers to
handle “unknown” (new) HTML elements.

New HTML5 API’s (Application Programming Interfaces)
The most interesting new API’s in HTML5 are:

HTML Geolocation
HTML Drag and Drop
HTML Local Storage
HTML Application Cache
HTML Web Workers
HTML SSE
Tip: HTML Local storage is a powerful replacement for cookies.
Removed Elements in HTML5
The following HTML4 elements have been removed in HTML5:..
Removed Element Use Instead
<acronym> <abbr>
<applet> <object>
<basefont> CSS
<big> CSS
<center> CSS
<dir> <ul>
<font> CSS
<frame>
<frameset>
<noframes>
<strike> CSS, <s>, or <del>

<tt> CSS
In the chapter HTML5 Migration, you will learn how to easily migrate from HTML4 to
HTML5.
HTML History
Since the early days of the World Wide Web, there have been many versions of HTML:
Year Version
1989 Tim Berners-Lee invented www
1991 Tim Berners-Lee invented HTML
1993 Dave Raggett drafted HTML+
1995 HTML Working Group defined HTML 2.0
1997 W3C Recommendation: HTML 3.2
1999 W3C Recommendation: HTML 4.01
2000 W3C Recommendation: XHTML 1.0
2008 WHATWG HTML5 First Public Draft
2012 WHATWG HTML5 Living Standard
2014 W3C Recommendation: HTML5
2016 W3C Candidate Recommendation: HTML 5.1

From 1991 to 1999, HTML developed from version 1 to version 4.
In year 2000, the World Wide Web Consortium (W3C) recommended XHTML 1.0. The
XHTML syntax was strict, and the developers were forced to write valid and “well-
formed” code.
In 2004, W3C’s decided to close down the development of HTML, in favor of XHTML.
In 2004, WHATWG (Web Hypertext Application Technology Working Group) was
formed. The WHATWG wanted to develop HTML, consistent with how the web was
used, while being backward compatible with older versions of HTML.
In 2004 - 2006, the WHATWG gained support by the major browser vendors.
In 2006, W3C announced that they would support WHATWG.
In 2008, the first HTML5 public draft was released.
In 2012, WHATWG and W3C decided on a separation:
WHATWG wanted to develop HTML as a “Living Standard”. A living standard is
always updated and improved. New features can be added, but old functionality cannot be
removed.
The WHATWG HTML5 Living Standard was published in 2012, and is continuously
updated.
W3C wanted to develop a definitive HTML5 and XHTML standard.
The W3C HTML5 recommendation was released 28 October 2014.
W3C also published an HTML 5.1 Candidate Recommendation on 21 June 2016.

HTML5 Browser Support
HTML5 is supported in all modern browsers.

In addition, all browsers, old and new, automatically handle unrecognized elements as
inline elements.
Because of this, you can “teach” older browsers to handle “unknown” HTML elements.
You can even teach IE6 (Windows XP 2001) how to handle unknown HTML elements.
Define Semantic Elements as Block Elements
HTML5 defines eight new semantic elements. All these are block-level elements.
To secure correct behavior in older browsers, you can set the CSS display property for
these HTML elements to block:
header, section, footer, aside, nav, main, article, figure {
display: block;
}
Add New Elements to HTML
You can also add new elements to an HTML page with a browser trick.
This example adds a new element called <myHero> to an HTML page, and defines a style
for it:
Example
<!DOCTYPE html>
<html>
<head>
<script>document.createElement(“myHero”)</script>
<style>
myHero {
display: block;
background-color: #dddddd;
padding: 50px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>A Heading</h1>
<myHero>My Hero Element</myHero>
</body>
</html>
Try it Yourself »
The JavaScript statement document.createElement(“myHero”) is needed to create a new
element in IE 9, and earlier.
Problem With Internet Explorer 8
You could use the solution described above for all new HTML5 elements.
However, IE8 (and earlier) does not allow styling of unknown elements!
Thankfully, Sjoerd Visscher created the HTML5Shiv! The HTML5Shiv is a JavaScript
workaround to enable styling of HTML5 elements in versions of Internet Explorer prior to
version 9.
You will require the HTML5shiv to provide compatibility for IE Browsers older than IE 9.
Syntax For HTML5Shiv
The HTML5Shiv is placed within the <head> tag.

The HTML5Shiv is a javascript file that is referenced in a <script> tag.
You should use the HTML5Shiv when you are using the new HTML5 elements such as:
<article>, <section>, <aside>, <nav>, <footer>.
You can download the latest version of HTML5shiv from github or reference the CDN
version at https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js
Syntax
<head>
<!—[if lt IE 9]>
<script src=”/js/html5shiv.js”></script>
<![endif]—>
</head>
HTML5Shiv Example
If you do not want to download and store the HTML5Shiv on your site, you could
reference the version found on the CDN site.
The HTML5Shiv script must be placed in the <head> element, after any stylesheets:
Example
<!DOCTYPE html>
<html>
<head>
<!—[if lt IE 9]>
<script src=“https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js”></script>
<![endif]—>
</head>
<body>
<section>
<h1>Famous Cities</h1>
<article>
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United
Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</article>
<article>
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</article>
<article>
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most
populous metropolitan area in the world.</p>
</article>
</section>
</body>
</html>
New Elements in HTML5
Below is a list of the new HTML5 elements, and a description of what they are used for.
New Semantic/Structural Elements
HTML5 offers new elements for better document structure:
Tag Description
<article> Defines an article in the document
<aside> Defines content aside from the page content
<bdi> Defines a part of text that might be formatted in a different

direction from other text
<details> Defines additional details that the user can view or hide
<dialog> Defines a dialog box or window
<figcaption> Defines a caption for a <figure> element
<figure> Defines self-contained content, like illustrations, diagrams,

photos, code listings, etc.
<footer> Defines a footer for the document or a section
<header> Defines a header for the document or a section
<main> Defines the main content of a document
<mark> Defines marked or highlighted text
<menuitem> Defines a command/menu item that the user can invoke from a
popup menu
<meter> Defines a scalar measurement within a known range (a gauge)
<nav> Defines navigation links in the document
<progress> Defines the progress of a task
<rp> Defines what to show in browsers that do not support ruby

annotations
<rt> Defines an explanation/pronunciation of characters (for East

Asian typography)
<ruby> Defines a ruby annotation (for East Asian typography)
<section> Defines a section in the document
<summary> Defines a visible heading for a <details> element
<time> Defines a date/time
<wbr> Defines a possible line-break
Read more about HTML5 Semantics.

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
Read all about old and new form elements in HTML Form Elements.
New Input Types
New Input Types New Input Attributes
color autocomplete
date autofocus
datetime form
datetime-local formaction
email formenctype
month formmethod
number formnovalidate
range formtarget
search height and width
tel list
time min and max
url multiple
week pattern (regexp)
placeholder
required
step
Learn all about old and new input types in HTML Input Types.
Learn all about input attributes in HTML Input Attributes.
HTML5 - New Attribute Syntax
HTML5 allows four different syntaxes for attributes.

This example demonstrates the different syntaxes used in an <input> tag:
Type Example
Empty <input type=“text” value=“John” disabled>
Unquoted <input type=“text” value=John>
Double-quoted <input type=“text” value=“John Doe”>
Single-quoted <input type=“text” value=‘John Doe’>
In HTML5, all four syntaxes may be used, depending on what is needed for the attribute.
HTML5 Graphics
Tag Description
<canvas> Draw graphics, on the fly, via scripting (usually JavaScript)
<svg> Draw scalable vector graphics
Read more about HTML5 Canvas.

Read more about HTML5 SVG.
New Media Elements
Tag Description
<audio> Defines sound 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
Read more about HTML5 Video.

Read more about HTML5 Audio..
Semantics is the study of the meanings of words and phrases in a language.
Semantic elements = elements with a meaning.
What are Semantic Elements?
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.
Browser Support
Yes Yes Yes Yes Yes
HTML5 semantic elements are supported in all modern browsers.

In addition, you can “teach” older browsers how to handle “unknown elements”.
Read about it in HTML5 Browser Support.
New Semantic Elements in HTML5
Many web sites contain HTML code like: <div id=“nav”> <div class=“header”> <div
id=“footer”>
to indicate navigation, header, and footer.
HTML5 offers new semantic elements to define different parts of a web page:
<article>
<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time>
HTML5 <section> Element
The <section> element defines a section in a document.

According to W3C’s HTML5 documentation: “A section is a thematic grouping of
content, typically with a heading.”
A home page could normally be split into sections for introduction, content, and contact
information.
Example
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is….</p>
</section>
Try it Yourself »
HTML5 <article> Element
The <article> element specifies independent, self-contained content.

An article should make sense on its own, and it should be possible to read it independently
from the rest of the web site.
Examples of where an <article> element can be used:
Forum post
Blog post
Newspaper article
Example
<article>
<h1>What Does WWF Do?</h1>
<p>WWF’s mission is to stop the degradation of our planet’s natural environment,
and build a future in which humans live in harmony with nature.</p>
</article>
Try it Yourself »
Nesting <article> in <section> or Vice Versa?
The <article> element specifies independent, self-contained content.

The <section> element defines section in a document.
Can we use the definitions to decide how to nest those elements? No, we cannot!
So, on the Internet, you will find HTML pages with <section> elements containing
<article> elements, and <article> elements containing <sections> elements.
You will also find pages with <section> elements containing <section> elements, and
<article> elements containing <article> elements.
Example for a newspaper: The sport articles in the sport section, may have a
technical section in each article.
HTML5 <header> Element
The <header> element specifies a header for a document or section.

The <header> element should be used as a container for introductory content.
You can have several <header> elements in one document.
The following example defines a header for an article:
Example
<article>
<header>
<h1>What Does WWF Do?</h1>
<p>WWF’s mission:</p>
</header>
<p>WWF’s mission is to stop the degradation of our planet’s natural environment,
and build a future in which humans live in harmony with nature.</p>
</article>
Try it Yourself »
HTML5 <footer> Element
The <footer> element specifies a footer for a document or section.

A <footer> element should contain information about its containing element.
A footer typically contains the author of the document, copyright information, links to
terms of use, contact information, etc.
You may have several <footer> elements in one document.
Example
<footer>
<p>Posted by: Hege Refsnes</p>
<p>Contact information: <a href=“mailto:someone@example.com”>
someone@example.com</a>.</p>
</footer>
Try it Yourself »
HTML5 <nav> Element
The <nav> element 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.
Example
<nav>
<a href=”/html/”>HTML</a> |
<a href=”/css/”>CSS</a> |
<a href=”/js/”>JavaScript</a> |
<a href=”/jquery/”>jQuery</a>
</nav>
Try it Yourself »
HTML5 <aside> Element
The <aside> element defines some content aside from the content it is placed in (like a
sidebar).
The aside content should be related to the surrounding content.
Example
<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>
Try it Yourself »
HTML5 <figure> and <figcaption> Elements
The purpose of a figure caption is to add a visual explanation to an image.

In HTML5, an images and a caption can be grouped together in a <figure>element:
Example
<figure>
<img src=“pic_mountain.jpg” alt=“The Pulpit Rock” width=“304”height=“228”>
<figcaption>Fig1. - The Pulpit Rock, Norway.</figcaption>
</figure>
Try it Yourself »
The <img> element defines the image, the <figcaption> element defines the caption.
Why Semantic Elements?
With HTML4, developers used their own id/class names to style elements: header, top,
bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav, etc.
This made it impossible for search engines to identify the correct web page content.
With the new HTML5 elements (<header> <footer> <nav> <section> <article>), this will
become easier.
According to the W3C, a Semantic Web: “Allows data to be shared and reused across
applications, enterprises, and communities.”
Semantic Elements in HTML5
Below is an alphabetical list of the new semantic elements in HTML5.

The links go to our complete HTML5 Reference.
Tag Description
<article> Defines an article
<aside> Defines content aside from the page content
<details> Defines additional details that the user can view or hide
<figcaption> Defines a caption for a <figure> element
<figure> Specifies self-contained content, like illustrations,

diagrams, photos, code listings, etc.
<footer> Defines a footer for a document or section
<header> Specifies a header for a document or section
<main> Specifies the main content of a document
<mark> Defines marked/highlighted text
<nav> Defines navigation links
<section> Defines a section in a document
<summary> Defines a visible heading for a <details> element

<time> Defines a date/time

Migration from HTML4 to HTML5
This chapter is entirely about how to migrate from HTML4 to HTML5.

This chapter demonstrates how to convert an HTML4 page into an HTML5 page, without
destroying anything of the original content or structure.
You can migrate from XHTML to HTML5, using the same recipe.
Typical HTML4 Typical HTML5
<div id=“header”> <header>
<div id=“menu”> <nav>
<div id=“content”> <section>
<div class=“article”> <article>
<div id=“footer”> <footer>

A Typical HTML4 Page
Example
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>
<html lang=“en”>
<head>
<meta http-equiv=“Content-Type” content=“text/html;charset=utf-8”>
<title>HTML4</title>
<style>
body {
font-family: Verdana,sans-serif;
font-size: 0.9em;
}
div#header, div#footer {
padding: 10px;
color: white;
background-color: black;
}
div#content {
margin: 5px;
padding: 10px;
background-color: lightgrey;
}
div.article {
margin: 5px;
padding: 10px;
background-color: white;
}
div#menu ul {
padding: 0;
}
div#menu ul li {
display: inline;
margin: 5px;
}
</style>
</head>
<body>
<div id=“header”>
<h1>Monday Times</h1>
</div>
<div id=“menu”>
<ul>
<li>News</li>
<li>Sports</li>
<li>Weather</li>
</ul>
</div>
<div id=“content”>
<h2>News Section</h2>
<div class=“article”>
<h2>News Article</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta
lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
</div>
<div class=“article”>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta
lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
</div>
</div>
<div id=“footer”>
<p>© 2016 Monday Times. All rights reserved.</p>
</div>
</body>
</html>
Try it Yourself »
Change to HTML5 Doctype
Change the doctype:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>
to the HTML5 doctype:
Example
<!DOCTYPE html>
Try it Yourself »
Change to HTML5 Encoding
Change the encoding information:

<meta http-equiv=“Content-Type” content=“text/html;charset=utf-8”>
to HTML5 encoding:
Example
<meta charset=“utf-8”>
Try it Yourself »
Add The HTML5Shiv
The new HTML5 semantic elements are supported in all modern browsers. In addition,
you can “teach” older browsers how to handle “unknown elements”.
However, IE8 and earlier, does not allow styling of unknown elements. So, the
HTML5Shiv is a JavaScript workaround to enable styling of HTML5 elements in versions
of Internet Explorer prior to version 9.
Add the HTML5Shiv:
Example
<!—[if lt IE 9]>
<script src=“https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js”></script>
<![endif]—>
Try it Yourself »
Read more about the HTML5Shiv in HTML5 Browser Support.
Change to HTML5 Semantic Elements
The existing CSS contains id’s and classes for styling the elements:
body {
font-size: 0.9em;
}
div#header, div#footer {
padding: 10px;
color: white;
}
div#content {
margin: 5px;
padding: 10px;
}
div.article {
margin: 5px;
padding: 10px;
}
div#menu ul {
padding: 0;
}
div#menu ul li {
display: inline;
margin: 5px;
}
Replace with equal CSS styles for HTML5 semantic elements:
body {
font-size: 0.9em;
}
header, footer {
padding: 10px;
color: white;
}
section {
margin: 5px;
padding: 10px;
}
article {
margin: 5px;
padding: 10px;
}
nav ul {
padding: 0;
}
nav ul li {
display: inline;
margin: 5px;
}
Finally, change the elements to HTML5 semantic elements:
Example
<body>
<header>
<h1>Monday Times</h1>
</header>
<nav>
<ul>
<li>News</li>
<li>Sports</li>
<li>Weather</li>
</ul>
</nav>
<section>
<h2>News Section</h2>
<article>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem.
Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
</article>
<article>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem.
Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
</article>
</section>
<footer>
<p>© 2014 Monday Times. All rights reserved.</p>
</footer>
</body>
Try it Yourself »
The Difference Between <article> <section> and <div>
There is a confusing (lack of) difference in the HTML5 standard, between <article>
<section> and <div>.
In the HTML5 standard, the <section> element is defined as a block of related elements.
The <article> element is defined as a complete, self-contained block of related elements.
The <div> element is defined as a block of children elements.
How to interpret that?
In the example above, we have used <section> as a container for related <articles>.
But, we could have used <article> as a container for articles as well.
Here are some different examples:
<article> in <article>:
<article>
<article>
<h2>London</h2>
Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</article>
<article>
<h2>Paris</h2>
</article>
<article>
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</article>
</article>
Try it Yourself »
<div> in <article>:
<article>
<div class=“city”>
<h2>London</h2>
Kingdom,
</div>
<h2>Paris</h2>
</div>
<h2>Tokyo</h2>
</div>
</article>
Try it Yourself »
<div> in <section> in <article>:
<article>
<section>
<h2>London</h2>
Kingdom,
</div>
<h2>Paris</h2>
</div>
<h2>Tokyo</h2>
</div>
</section>
<section>
<h2>Famous Countries</h2>
<div class=“country”>
<h2>England</h2>
Kingdom,
</div>
<h2>France</h2>
</div>
<h2>Japan</h2>
</div>
</section>
</article>
Try it Yourself »
HTML Coding Conventions
Web developers are often uncertain about the coding style and syntax to use in HTML.
Between 2000 and 2010, many web developers converted from HTML to XHTML.
With XHTML, developers were forced to write valid and “well-formed” code.
HTML5 is a bit more sloppy when it comes to code validation.
Be Smart and Future Proof
A consistent use of style, makes it easier for others to understand your HTML.
In the future, programs like XML readers, may want to read your HTML.
Using a well-formed-“close to XHTML” syntax, can be smart.
Always keep your code tidy, clean, and well-formed.
Use Correct Document Type
Always declare the document type as the first line in your document:
<!DOCTYPE html>
If you want consistency with lower case tags, you can use:
<!doctype html>
Use Lower Case Element Names
HTML5 allows mixing uppercase and lowercase letters in element names.

We recommend using lowercase element names because:
Mixing uppercase and lowercase names is bad
Developers normally use lowercase names (as in XHTML)
Lowercase look cleaner
Lowercase are easier to write
Bad:
<SECTION>
<p>This is a paragraph.</p>
</SECTION>
Very Bad:
<Section>
</SECTION>
Good:
<section>
</section>
Close All HTML Elemeno
s
Ino

HTML5o
,
youo

donot have o close all elemeno
s (for example he <p> elemeno
).
We ecommeno
closino
all HTML elemeno
s.
Bado
:
<sectio
< This is a arago
ra h.
< This is a arago
ra h.
</sectio
Goodo
:
<sectio
< This is a arago
ra h.</
< This is a arago
ra h.</
</sectio
Close Empty HTML Elements
In HTML5, it is optional to close empty elements.

Allowed:
<meta charset=“utf-8”>
Also Allowed:
<meta charset=“utf-8” />
However, the closing slash (/) is REQUIRED in XHTML and XML.
If you expect XML software to access your page, it is a good idea to keep the closing
slash!
Use Lower Case Attribute Names
HTML5 allows mixing uppercase and lowercase letters in attribute names.

We recommend using lowercase attribute names because:
Mixing uppercase and lowercase names is bad
Developers normally use lowercase names (as in XHTML)
Lowercase look cleaner
Lowercase are easier to write
Bad:
<div CLASS=“menu”>
Good:
<div class=“menu”>
Quote Attribute Values
HTML5 allows attribute values without quotes.

We recommend quoting attribute values because:
Mixing uppercase and lowercase values is bad
Quoted values are easier to read
You MUST use quotes if the value contains spaces
Very bad:
This will not work, because the value contains spaces:
<table class=table striped>
Bad:
<table class=striped>
Good:
<table class=“striped”>
Image Attributes
Always add the “alt” attribute to images. This attribute is important when the image for
some reason cannot be displayed. Also, always define image width and height. It reduces
flickering because the browser can reserve space for the image before loading.
Bad:
<img src=“html5.gif”>
Good:
<img src=“html5.gif” alt=“HTML5”style=“width:128px;height:128px”>
Spaces and Equal Signs
HTML5 allows spaces around equal signs. But space-less is easier to read, and groups
entities better together.
Bad:
<link rel = “stylesheet” href = “styles.css”>
Good:
<link rel=“stylesheet” href=“styles.css”>
Avoid Long Code Lines
When using an HTML editor, it is inconvenient to scroll right and left to read the HTML
code.
Try to avoid code lines longer than 80 characters.
Blank Lines and Indentation
Do not add blank lines without a reason.

For readability, add blank lines to separate large or logical code blocks.
For readability, add two spaces of indentation. Do not use the tab key.
Do not use unnecessary blank lines and indentation. It is not necessary to indent every
element:
Unnecessary:
<body>
<h2>Tokyo</h2>
<p>
Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.
It is the seat of the Japanese government and the Imperial Palace,
and the home of the Japanese Imperial Family.
</p>
</body>
Better:
<body>
<h2>Tokyo</h2>
and the most populous metropolitan area in the world.
It is the seat of the Japanese government and the Imperial Palace,
and the home of the Japanese Imperial Family.</p>
</body>
Table Example:
<table>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
<tr>
<td>A</td>
<td>Description of A</td>
</tr>
<tr>
<td>B</td>
<td>Description of B</td>
</tr>
</table>
List Example:
<ol>
<li>London</li>
<li>Paris</li>
<li>Tokyo</li>
</ol>
Omitting <html> and <body>?
In the HTML5 standard, the <html> tag and the <body> tag can be omitted.
The following code will validate as HTML5:
Example
<!DOCTYPE html>
<head>
<title>Page Title</title>
</head>
<h1>This is a heading</h1>
Try it Yourself »
We do not recommend omitting the <html> and <body> tags.
The <html> element is the document root. It is the recommended place for specifying the
page language:
<!DOCTYPE html>
<html lang=“en-US”>
Declaring a language is important for accessibility applications (screen readers) and search
engines.
Omitting <html> or <body> can crash DOM and XML software.
Omitting <body> can produce errors in older browsers (IE9).
Omitting <head>?
In the HTML5 standard, the <head> tag can also be omitted.

By default, browsers will add all elements before <body>, to a default <head> element.
You can reduce the complexity of HTML, by omitting the <head> tag:
Example
<!DOCTYPE html>
<html>
<title>Page Title</title>
<body>
<h1>This is a heading</h1>
</body>
</html>
Try it Yourself »
We do not recommend omitting the <head> tag.
Omitting tags is unfamiliar to web developers. It needs time to be established as a
guideline.
Meta Data
The <title> element is required in HTML5. Make the title as meaningful as possible:
<title>HTML5 Syntax and Coding Style</title>
To ensure proper interpretation, and correct search engine indexing, both the language and
the character encoding should be defined as early as possible in a document:
<!DOCTYPE html>
<html lang=“en-US”>
<head>
<title>HTML5 Syntax and Coding Style</title>
</head>
HTML Comments
Short comments should be written on one line, like this:

<!— This is a comment —>
Comments that spans more than one line, should be written like this:
<!—
This is a long comment example. This is a long comment example.
This is a long comment example. This is a long comment example.
—>
Long comments are easier to observe if they are indented two spaces.
Style Sheets
Use simple syntax for linking to style sheets (the type attribute is not necessary):
<link rel=“stylesheet” href=“styles.css”>
Short rules can be written compressed, on one line, like this:
p.intro {font-family: Verdana; font-size: 16em;}
Long rules should be written over multiple lines:
body {
font-family: “Arial Black”, Helvetica, sans-serif;
font-size: 16em;
color: black;
}
Place the opening bracket on the same line as the selector
Use one space before the opening bracket
Use two spaces of indentation
Use semicolon after each property-value pair, including the last
Only use quotes around values if the value contains spaces
Place the closing bracket on a new line, without leading spaces
Avoid lines over 80 characters
Loading JavaScript in HTML
Use simple syntax for loading external scripts (the type attribute is not necessary):
<script src=“myscript.js”>
Accessing HTML Elements with JavaScript
A consequence of using “untidy” HTML styles, might result in JavaScript errors.

These two JavaScript statements will produce different results:
Example
var obj = getElementById(“Demo”)
var obj = getElementById(“demo”)

Try it Yourself »
Visit the JavaScript Style Guide.
Use Lower Case File Names
Some web servers (Apache, Unix) are case sensitive about file names: “london.jpg”
cannot be accessed as “London.jpg”.
Other web servers (Microsoft, IIS) are not case sensitive: “london.jpg” can be accessed as
“London.jpg” or “london.jpg”.
If you use a mix of upper and lower case, you have to be extremely consistent.
If you move from a case insensitive to a case sensitive server, even small errors will break
your web!
To avoid these problems, always use lower case file names.
File Extensions
HTML files should have a .html or .htm extension.

CSS files should have a .css extension.
JavaScript files should have a .js extension.
Differences Between .htm and .html
There is no difference between the .htm and .html extensions. Both will be treated as
HTML by any web browser or web server.
The differences are cultural:
.htm “smells” of early DOS systems where the system limited the extensions to 3
characters.
.html “smells” of Unix operating systems that did not have this limitation.
Technical Differences
When a URL does not specify a filename (like http://www.w3schools.com/css/), the server
returns a default filename. Common default filenames are index.html, index.htm,
default.html, and default.htm.
If your server is configured only with “index.html” as default filename, your file must be
named “index.html”, not “index.htm.”
However, servers can be configured with more than one default filename, and normally
you can set up as many default filenames as needed.
Anyway, the full extension for HTML files is .html, and there’s no reason it should not be
used.
The HTML <canvas> element is used to draw graphics on a web page.
The graphic to the left is created with <canvas>. It shows four elements: a red rectangle, a
gradient rectangle, a multicolor rectangle, and a multicolor text.
What is HTML Canvas?
The HTML <canvas> element is used to draw graphics, on the fly, via scripting (usually
JavaScript).
The <canvas> element is only a container for graphics. You must use a script to actually
draw the graphics.
Canvas has several methods for drawing paths, boxes, circles, text, and adding images.
Browser Support
The numbers in the table specify the first browser version that fully supports the <canvas>
element.
Element
<canvas> 4.0 9.0 2.0 3.1 9.0

Canvas Examples
A canvas is a rectangular area on an HTML page. By default, a canvas has no border and
no content.
The markup looks like this:
<canvas id=“myCanvas” width=“200” height=“100”></canvas>
Note: Always specify an id attribute (to be referred to in a script), and a width and height
attribute to define the size of the canvas.
To add a border, use the style attribute:
Basic Canvas Example
<canvas id=“myCanvas” width=“200” height=“100” style=“border:1px solid #000000;”>
</canvas>
Try it Yourself »
Drawing with JavaScript
var c = document.getElementById(“myCanvas”);
var ctx = c.getContext(“2d”);
ctx.fillStyle = “#FF0000”;
ctx.fillRect(0,0,150,75);
Try it Yourself »
Draw a Line
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
Try it Yourself »
Draw a Circle
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
Try it Yourself »
Draw a Text
ctx.font = “30px Arial”;
ctx.fillText(“Hello World”,10,50);
Try it Yourself »
Stroke Text
ctx.font = “30px Arial”;
ctx.strokeText(“Hello World”,10,50);
Try it Yourself »
Draw Linear Gradient
// Create gradient
var grd = ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,“red”);
grd.addColorStop(1,“white”);
// Fill with gradient

ctx.fillStyle = grd;
Try it Yourself »
Draw Circular Gradient
// Create gradient
var grd = ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,“red”);
grd.addColorStop(1,“white”);
// Fill with gradient

ctx.fillStyle = grd;
Try it Yourself »
Draw Image
var img = document.getElementById(“scream”);
ctx.drawImage(img,10,10);
Try it Yourself »
What is SVG?
SVG stands for Scalable Vector Graphics

SVG is used to define graphics for the Web
SVG is a W3C recommendation
The HTML <svg> Element
The HTML <svg> element (introduced in HTML5) is a container for SVG graphics.
SVG has several methods for drawing paths, boxes, circles, text, and graphic images.
Browser Support
The numbers in the table specify the first browser version that fully supports the <svg>
element.
Element
<svg> 4.0 9.0 3.0 3.2

SVG Circle
Example
<!DOCTYPE html>
<html>
<body>
<svg width=“100” height=“100”>

<circle cx=“50” cy=“50” r=“40” stroke=“green” stroke-width=“4”fill=“yellow” />
</svg>
</body>
</html>
Try it Yourself »
SVG Rectangle

Example

<rect width=“400” height=“100”style=“fill:rgb(0,0,255);stroke-
width:10;stroke:rgb(0,0,0)” />
</svg>

Try it Yourself »
SVG Rounded Rectangle
Example

<rect x=“50” y=“20” rx=“20” ry=“20” width=“150” height=“150”
style=“fill:red;stroke:black;stroke-width:5;opacity:0.5” />
</svg>

Try it Yourself »
SVG Star
Example

<polygon points=“100,10 40,198 190,78 10,78 160,198”
style=“fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;” />
</svg>

Try it Yourself »
SVG Logo
SVG
Example
<svg height=“130” width=“500”>

<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” />
<stop offset=“100%” style=“stop-color:rgb(255,0,0);stop-opacity:1” />
</linearGradient>
</defs>
<ellipse cx=“100” cy=“70” rx=“85” ry=“55” fill=“url(#grad1)”/>
<text fill=”#ffffff” font-size=“45” font-family=“Verdana”x=“50” y=“86”>SVG</text>
Sorry, your browser does not support inline SVG.
</svg>

Try it Yourself »
Differences Between SVG and Canvas
SVG is a language for describing 2D graphics in XML.

Canvas draws 2D graphics, on the fly (with a JavaScript).
SVG is XML based, which means that every element is available within the SVG DOM.
You can attach JavaScript event handlers for an element.
In SVG, each drawn shape is remembered as an object. If attributes of an SVG object are
changed, the browser can automatically re-render the shape.
Canvas is rendered pixel by pixel. In canvas, once the graphic is drawn, it is forgotten by
the browser. If its position should be changed, the entire scene needs to be redrawn,
including any objects that might have been covered by the graphic.
Comparison of Canvas and SVG
The table below shows some important differences between Canvas and SVG:
Canvas SVG
Resolution dependent Resolution independent

No support for event Support for event handlers
handlers Best suited for applications with large
Poor text rendering rendering areas (Google Maps)
capabilities Slow rendering if complex (anything that uses
You can save the resulting the DOM a lot will be slow)
image as .png or .jpg Not suited for game applications
Well suited for graphic-
intensive games

What is Multimedia?
Multimedia comes in many different formats. It can be almost anything you can hear or
see.
Examples: Images, music, sound, videos, records, films, animations, and more.
Web pages often contain multimedia elements of different types and formats.
In this chapter you will learn about the different multimedia formats.
Browser Support
The first web browsers had support for text only, limited to a single font in a single color.
Later came browsers with support for colors and fonts, and images!
Audio, video, and animation have been handled differently by the major browsers.
Different formats have been supported, and some formats require extra helper programs
(plug-ins) to work.
Hopefully this will become history. HTML5 multimedia promises an easier future for
multimedia.
Multimedia Formats
Multimedia elements (like audio or video) are stored in media files.

The most common way to discover the type of a file, is to look at the file extension.
Multimedia files have formats and different extensions like: .swf, .wav, .mp3, .mp4, .mpg,
.wmv, and .avi.
Common Video Formats
MP4 is the new and upcoming format for

internet video.
MP4 is recommended by YouTube.
MP4 is supported by Flash Players.
MP4 is supported by HTML5.
Format File Description
MPEG .mpg MPEG. Developed by the Moving Pictures Expert Group.

.mpeg The first popular video format on the web. Used to be
supported by all browsers, but it is not supported in
HTML5 (See MP4).
AVI .avi AVI (Audio Video Interleave). Developed by Microsoft.

Commonly used in video cameras and TV hardware.
Plays well on Windows computers, but not in web
browsers.
WMV .wmv WMV (Windows Media Video). Developed by Microsoft.

Commonly used in video cameras and TV hardware.
Plays well on Windows computers, but not in web
browsers.
QuickTime .mov QuickTime. Developed by Apple. Commonly used in

video cameras and TV hardware. Plays well on Apple
computers, but not in web browsers. (See MP4)
RealVideo .rm RealVideo. Developed by Real Media to allow video

.ram streaming with low bandwidths. It is still used for online
video and Internet TV, but does not play in web browsers.
Flash .swf Flash. Developed by Macromedia. Often requires an extra
.flv component (plug-in) to play in web browsers.
Ogg .ogg Theora Ogg. Developed by the Xiph.Org Foundation.

Supported by HTML5.
WebM .webm WebM. Developed by the web giants, Mozilla, Opera,

Adobe, and Google. Supported by HTML5.
MPEG-4 .mp4 MP4. Developed by the Moving Pictures Expert Group.

or MP4 Based on QuickTime. Commonly used in newer video
cameras and TV hardware. Supported by all HTML5
browsers. Recommended by YouTube.
Only MP4, WebM, and Ogg video are supported by the HTML5 standard.
Audio Formats
MP3 is the newest format for compressed recorded music. The term MP3 has become
synonymous with digital music.
If your website is about recorded music, MP3 is the choice.
Format File Description
MIDI .mid MIDI (Musical Instrument Digital Interface). Main

.midi format for all electronic music devices like synthesizers
and PC sound cards. MIDI files do not contain sound,
but digital notes that can be played by electronics. Plays
well on all computers and music hardware, but not in
web browsers.
RealAudio .rm RealAudio. Developed by Real Media to allow

.ram streaming of audio with low bandwidths. Does not play
in web browsers.
WMA .wma WMA (Windows Media Audio). Developed by

Microsoft. Commonly used in music players. Plays
well on Windows computers, but not in web browsers.
AAC .aac AAC (Advanced Audio Coding). Developed by Apple

as the default format for iTunes. Plays well on Apple
computers, but not in web browsers.
WAV .wav WAV. Developed by IBM and Microsoft. Plays well on

Windows, Macintosh, and Linux operating systems.
Supported by HTML5.
Ogg .ogg Ogg. Developed by the Xiph.Org Foundation.

Supported by HTML5.
MP3 .mp3 MP3 files are actually the sound part of MPEG files.
MP3 is the most popular format for music players.
Combines good compression (small files) with high
quality. Supported by all browsers.
MP4 .mp4 MP4 is a video format, but can also be used for audio.
MP4 video is the upcoming video format on the
internet. This leads to automatic support for MP4 audio
by all browsers.
Only MP3, WAV, and Ogg audio are supported by the HTML5 standard.
HTML Video Example. Courtesy of Big Buck Bunny.
Try it Yourself »
Playing Videos in HTML
Before HTML5, a video could only be played in a browser with a plug-in (like flash).
The HTML5 <video> element specifies a standard way to embed a video in a web page.
Browser Support
The numbers in the table specify the first browser version that fully supports the <video>
element.
Element
<video> 4.0 9.0 3.5 4.0 10.5

The HTML <video> Element
To show a video in HTML, use the <video> element:

Example
<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>
Try it Yourself »
How it Works
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 page might flicker while the video loads.
The <source> element allows you to specify alternative video files which the browser
may choose from. The browser will use the first recognized format.
The text between the <video> and </video> tags will only be displayed in browsers that
do not support the <video> element.
HTML <video> Autoplay
To start a video automatically use the autoplay attribute:

Example
<video width=“320” height=“240” autoplay>
<source src=“movie.mp4” type=“video/mp4”>
<source src=“movie.ogg” type=“video/ogg”>
Your browser does not support the video tag.
</video>
Try it Yourself »
The autoplay attribute does not work in mobile devices like iPad and iPhone.
HTML Video - Browser Support
In HTML5, there are 3 supported video formats: MP4, WebM, and Ogg.
The browser support for the different formats is:
Browser MP4 WebM Ogg
Internet Explorer YES NO NO
Chrome YES YES YES
Firefox YES YES YES
Safari YES NO NO
Opera YES (from Opera 25) YES YES

HTML Video - Media Types
File Format Media Type
MP4 video/mp4
WebM video/webm
Ogg video/ogg
HTML Video - Methods, Properties, and Events
HTML5 defines DOM methods, properties, and events for the <video> element.
This allows you to load, play, and pause videos, as well as setting duration and volume.
There are also DOM events that can notify you when a video begins to play, is paused, etc.
Example: Using JavaScript

Play/Pause Big Small Normal

Video courtesy of Big Buck Bunny.
Try it Yourself »
For a full DOM reference, go to our HTML5 Audio/Video DOM Reference.
HTML5 Video Tags
Tag Description
<video> Defines a video or movie
<source> Defines multiple media resources for media elements, such as

<video> and <audio>
<track> Defines text tracks in media players

Audio on the Web
Before HTML5, audio files could only be played in a browser with a plug-in (like flash).
The HTML5 <audio> element specifies a standard way to embed audio in a web page.
Browser Support
The numbers in the table specify the first browser version that fully supports the <audio>
element.
Element
<audio> 4.0 9.0 3.5 4.0 10.5

The HTML <audio> Element
To play an audio file in HTML, use the <audio> element:

Example
<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>
Try it Yourself »
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.
HTML Audio - Browser Support
In HTML5, there are 3 supported audio formats: MP3, Wav, and Ogg.
The browser support for the different formats is:
Browser MP3 Wav Ogg
Internet Explorer YES NO NO
Chrome YES YES YES
Firefox YES YES YES
Safari YES YES NO
Opera YES YES YES

HTML Audio - Media Types
File Format Media Type
MP3 audio/mpeg
Ogg audio/ogg
Wav audio/wav
HTML Audio - Methods, Properties, and Events
HTML5 defines DOM methods, properties, and events for the <audio> element.
This allows you to load, play, and pause audios, as well as set duration and volume.
There are also DOM events that can notify you when an audio begins to play, is paused,
etc.
For a full DOM reference, go to our HTML5 Audio/Video DOM Reference.
HTML5 Audio Tags
Tag Description
<audio> Defines sound content
<source> Defines multiple media resources for media elements, such

as <video> and <audio>
The purpose of a plug-in is to extend the functionality of a web browser.

HTML Helpers (Plug-ins)
Helper applications (plug-ins) are computer programs that extend the standard
functionality of a web browser.
Examples of well-known plug-ins are Java applets.
Plug-ins can be added to web pages with the <object> tag or the <embed> tag.
Plug-ins can be used for many purposes: display maps, scan for viruses, verify your bank
id, etc.
To display video and audio: Use the <video> and <audio> tags.
The <object> Element
The <object> element is supported by all browsers.

The <object> element defines an embedded object within an HTML document.
It is used to embed plug-ins (like Java applets, PDF readers, Flash Players) in web pages.
Example
<object width=“400” height=“50” data=“bookmark.swf”></object>
Try it Yourself »
The <object> element can also be used to include HTML in HTML:
Example
<object width=“100%” height=“500px” data=“snippet.html”></object>
Try it Yourself »
Or images if you like:
Example
<object data=“audi.jpeg”></object>
Try it Yourself »
The <embed> Element
The <embed> element is supported in all major browsers.

The <embed> element also defines an embedded object within an HTML document.
Web browsers have supported the <embed> element for a long time. However, it has not
been a part of the HTML specification before HTML5.
Example
<embed width=“400” height=“50” src=“bookmark.swf”>
Try it Yourself »
Note that the <embed> element does not have a closing tag. It can not contain alternative
text.
The <embed> element can also be used to include HTML in HTML:
Example
<embed width=“100%” height=“500px” src=“snippet.html”>
Try it Yourself »
Or images if you like:
Example
<embed src=“audi.jpeg”>
he easiest way to play videos in HTML, is to use YouTube.
Struggling with Video Formats?
Earlier in this tutorial, you have seen that you might have to convert your videos to
different formats to make them play in all browsers.
Converting videos to different formats can be difficult and time-consuming.
An easier solution is to let YouTube play the videos in your web page.
YouTube Video Id
YouTube will display an id (like XGSy3_Czz8k), when you save (or play) a video.
You can use this id, and refer to your video in the HTML code.
Playing a YouTube Video in HTML
To play your video on a web page, do the following:

Upload the video to YouTube
Take a note of the video id
Define an <iframe> element in your web page
Let the src attribute point to the video URL
Use the width and height attributes to specify the dimension of the player
Add any other parameters to the URL (see below)
Example - Using iFrame (recommended)
<iframe width=“420” height=“315”
src=“https://www.youtube.com/embed/XGSy3_Czz8k”>
</iframe>
Try it Yourself »
YouTube Autoplay
You can have your video start playing automatically when a user visits that page by adding
a simple parameter to your YouTube URL.
Note: Take careful consideration when deciding to autoplay your videos. Automatically
starting a video can annoy your visitor and end up causing more harm than good.
Value 0 (default): The video will not play automatically when the player loads.
Value 1: The video will play automatically when the player loads.
YouTube - Autoplay
src=“https://www.youtube.com/embed/XGSy3_Czz8k?autoplay=1”>
</iframe>
Try it Yourself »
YouTube Playlist
A comma separated list of videos to play (in addition to the original URL).
YouTube Loop
Value 0 (default): The video will play only once.

Value 1: The video will loop (forever).
YouTube - Loop
src=“https://www.youtube.com/embed/XGSy3_Czz8k?
playlist=XGSy3_Czz8k&loop=1”>
</iframe>
Try it Yourself »
YouTube Controls
Value 0: Player controls does not display.

Value 1 (default): Player controls display.
YouTube - Controls
src=“https://www.youtube.com/embed/XGSy3_Czz8k?controls=0”>
</iframe>
Try it Yourself »
YouTube - Using <object> or <embed>
Note: YouTube <object> and <embed> were deprecated from January 2015. You should
migrate your videos to use <iframe> instead.
Example - Using <object> (deprecated)
<object width=“420” height=“315”
data=“http://www.youtube.com/embed/XGSy3_Czz8k”>
</object>
Try it Yourself »
Example - Using <embed> (deprecated)
<embed width=“420” height=“315”
src=“http://www.youtube.com/embed/XGSy3_Czz8k”>
Try it Yourself »

Learn To Code HTML5

Uploaded by

Copyright:

Available Formats

Learn To Code HTML5

Uploaded by

Document Information

Original Title

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

Learn To Code HTML5

Uploaded by

Copyright:

Available Formats

HTML

The DOCTYPE declaration for HTML5 is very simple:

The most interesting new HTML5 elements are:

New HTML5 API’s (Application Programming Interfaces)

The most interesting new API’s in HTML5 are:

The following HTML4 elements have been removed in HTML5:..

Removed Element Use Instead

<strike> CSS, <s>, or <del>

1989 Tim Berners-Lee invented www

1991 Tim Berners-Lee invented HTML

1993 Dave Raggett drafted HTML+

1995 HTML Working Group defined HTML 2.0

1997 W3C Recommendation: HTML 3.2

1999 W3C Recommendation: HTML 4.01

2000 W3C Recommendation: XHTML 1.0

2008 WHATWG HTML5 First Public Draft

2012 WHATWG HTML5 Living Standard

2014 W3C Recommendation: HTML5

2016 W3C Candidate Recommendation: HTML 5.1

HTML5 is supported in all modern browsers.

The HTML5Shiv is placed within the <head> tag.

HTML5 offers new elements for better document structure:

<article> Defines an article in the document

<aside> Defines content aside from the page content

<bdi> Defines a part of text that might be formatted in a different

<dialog> Defines a dialog box or window

<figcaption> Defines a caption for a <figure> element

<figure> Defines self-contained content, like illustrations, diagrams,

<footer> Defines a footer for the document or a section

<header> Defines a header for the document or a section

<main> Defines the main content of a document

<mark> Defines marked or highlighted text

<nav> Defines navigation links in the document

<progress> Defines the progress of a task

<rp> Defines what to show in browsers that do not support ruby

<rt> Defines an explanation/pronunciation of characters (for East

<ruby> Defines a ruby annotation (for East Asian typography)

<section> Defines a section in the document

<summary> Defines a visible heading for a <details> element

<time> Defines a date/time

<wbr> Defines a possible line-break

Read more about HTML5 Semantics.

<datalist> Defines pre-defined options for input controls

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

<output> Defines the result of a calculation

New Input Types New Input Attributes

HTML5 allows four different syntaxes for attributes.

Empty <input type=“text” value=“John” disabled>

Unquoted <input type=“text” value=John>

Double-quoted <input type=“text” value=“John Doe”>

Single-quoted <input type=“text” value=‘John Doe’>

<canvas> Draw graphics, on the fly, via scripting (usually JavaScript)

<svg> Draw scalable vector graphics

Read more about HTML5 Canvas.

<audio> Defines sound 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