HTML5
P.R.Joe Dhanith
Department of
CSE
HTML
• HTML is a language for describing web
pages.
• HTML stands
for Hyper Text Markup Language
• HTML is a markup language
• A markup language is a set of markup tags
• The tags describe document content
• HTML documents contain HTML tags and
plain text
• HTML documents are also called web pages
HTML TAGS
HTML markup tags are usually called HTML tags,
HTML tags are keywords (tag names) surrounded
by angle brackets like <html>
HTML tags normally come in pairs like <b> and
</b>
The first tag in a pair is the start tag, the second tag
is the end tag
The end tag is written like the start tag, with
a forward slash before the tag name
Start and end tags are also called opening
tags and closing tags
The HTML <head> Element
The <head> element is a container for all
the head elements.
The HTML <meta> Element
The <meta> tag provides metadata about
the HTML document. Metadata will not
be displayed on the page, but will be
machine parsable.
The HTML <title> Element
The <title> tag defines the title of the
document.
HTML Headings
HTML headings are defined with the
<h1> to <h6> tags.
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
HTML Paragraphs
HTML paragraphs are defined with the
<p> tag.
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
HTML Links
HTML links are defined with the <a> tag.
<a
href="http://www.w3schools.com">This
is a link</a>
HTML Images
HTML images are defined with the
<img> tag.
<img src="w3schools.jpg"
alt="W3Schools.com" width="104"
height="142">
HTML Line Breaks
Use the <br> tag if you want a line break
(a new line) without starting a new
paragraph:
(eg)<p>This is<br>a para<br>graph with
line breaks</p>
HTML Formatting Tags
HTML uses tags like <b> and <i> for
formatting output, like bold or italic text.
HTML Comment Tags
You can add comments to your HTML
source by using the following syntax:
(eg)<!-- Write your comments here -->
HTML STYLE
CSS was introduced together with HTML 4, to provide
a better way to style HTML elements.
(eg)<!DOCTYPE html>
<html>
<body style="background-color:yellow;">
<h2 style="background-color:red;">This is a
heading</h2>
<p style="background-color:green;">This is a
paragraph.</p>
</body>
</html>
HTML Tables
Tables are defined with the <table> tag.
A table is divided into rows with
the <tr> tag. (tr stands for table row)
A row is divided into data cells with
the <td> tag. (td stands for table data)
A row can also be divided into headings
with the <th> tag. (th stands for table
heading)
HTML TABLE-Example
<table style="width:300px">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
HTML Lists
The most common HTML lists are ordered and
unordered lists:
An ordered list:
The first list item
The second list item
The third list item
An unordered list:
List item
List item
List item
HTML Unordered Lists
An unordered list starts with the <ul> tag.
Each list item starts with the <li> tag.
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
HTML Ordered Lists
An ordered list starts with the <ol> tag.
Each list item starts with the <li> tag.
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
HTML Forms and Input
HTML Forms are used to select different
kinds of user input.
HTML Forms - The Input Element
The <input> element is used to select user
information.
<form>
First name: <input type="text"
name="firstname"><br>
Last name: <input type="text"
name="lastname">
</form>
Radio Buttons
<input type="radio"> defines a radio button.
Radio buttons let a user select ONLY ONE
of a limited number of choices:
<form>
<input type="radio" name="sex"
value="male">Male<br>
<input type="radio" name="sex"
value="female">Female
</form>
Checkboxes
<input type="checkbox"> defines a
checkbox. Checkboxes let a user select
ZERO or MORE options of a limited
number of choices.
<form>
<input type="checkbox" name="vehicle"
value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle"
value="Car">I have a car
</form>
Submit Button
<input type="submit"> defines a submit
button.
<form name="input"
action="action.html">
Username: <input type="text"
name="user">
<input type="submit" value="Submit">
</form>
Introduction
HTML5 is the latest standard for HTML.
The previous version of HTML, HTML
4.01, came in 1999, and the internet has
changed significantly since then.
HTML5 was designed to replace both
HTML 4, XHTML, and the HTML DOM
Level 2.
Applications
It was specially designed to deliver rich
content without the need for additional
plugins. The current version delivers
everything from animation to graphics,
music to movies, and can also be used to
build complicated web applications.
HTML5 is also cross-platform. It is designed
to work whether you are using a PC, or a
Tablet, a Smartphone, or a Smart TV.
The HTML5 <!DOCTYPE>
In HTML5 there is only one <!doctype>
declaration, and it is very simple:
<!DOCTYPE html>
A Minimum HTML5 Document
Below is a simple HTML5 document, with the minimum of
required tags:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
<body>
Content of the document......
</body>
</html>
HTML5 Semantic Elements
Semantic = Meaning.
Semantic elements = Elements with meaning.
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 <img> - Clearly defines its content.
New Semantic Elements in HTML5
HTML5 offers new semantic elements to clearly define different parts
of a web page:
<header>
<nav>
<section>
<article>
<aside>
<figure>
<figcaption>
<footer>
<details>
<summary>
<mark>
<time>
HTML5 <section> Element
The <section> element defines a section
in a document.
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature
(WWF) is....</p>
</section>
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 distribute it independently
from the rest of the web site.
Examples of where an <article> element can be
used:
Forum post
Blog post
News story
Comment
Article-Example
<article>
<h1>Internet Explorer 9</h1>
<p>Windows Internet Explorer 9
(abbreviated as IE9) was released to
the public on March 14, 2011 at
21:00 PDT.....
</p>
</article>
HTML5 <nav> Element
The <nav> element defines a set of
navigation links.
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>
HTML5 <aside> Element
The <aside> element defines some content aside
from the content it is placed in (like a sidebar).
<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>
HTML5 <header> Element
The <header> element specifies a header for a document or
section.
<article>
<header>
<h1>Internet Explorer 9</h1>
<p><time pubdate datetime="2011-03-
15"></time></p>
</header>
<p>Windows Internet Explorer 9 (abbreviated as
IE9) was released to
the public on March 14, 2011 at 21:00 PDT.....</p>
</article>
HTML5 <footer> Element
The <footer> element specifies a footer
for a document or section.
<footer>
<p>Posted by: Hege Refsnes</p>
<p><time pubdate datetime="2012-03-
01"></time></p>
</footer>
HTML5 <figure> and <figcaption> Elements
The <figure> tag specifies self-contained
content, like illustrations, diagrams,
photos, code listings, etc.
The <figcaption> tag defines a caption
for a <figure> element.
Figure and Figcaption-Example
<figure>
<img src="img_pulpit.jpg" alt="The
Pulpit Rock" width="304"
height="228">
<figcaption>Fig1. - The Pulpit Pock,
Norway.</figcaption>
</figure>
HTML5 New Input Types
HTML5
has several new input types for forms. These new features allow better
input control and validation.
color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week
Input Type: color
The color type is used for input fields that
should contain a color.
Select a color from a color picker:
Select your favorite color:
<input type="color" name="favcolor">
Input Type: date
The date type allows the user to select a
date.
Define a date control:
Birthday:
<input type="date" name="bday">
Input Type: datetime
The datetime type allows the user to select
a date and time (with time zone).
Define a date and time control (with time
zone):
Birthday (date and time):
<input type="datetime"
name="bdaytime">
Input Type: datetime-local
The datetime-local type allows the user to
select a date and time (no time zone).
Define a date and time control (no time
zone):
Birthday (date and time):
<input type="datetime-local"
name="bdaytime">
Input Type: email
The email type is used for input fields that
should contain an e-mail address.
Define a field for an e-mail address (will
be automatically validated when
submitted):
E-mail:
<input type="email" name="email">
Input Type: month
The month type allows the user to select a
month and year.
Define a month and year control (no time
zone):
Birthday (month and year):
<input type="month" name="bdaymonth">
Input Type: number
The number type is used for input fields
that should contain a numeric value.
Define a numeric field (with restrictions):
Quantity (between 1 and 5):
<input type="number" name="quantity"
min="1" max="5">
Attributes for Number
Use the following attributes to specify
restrictions:
max - specifies the maximum value
allowed
min - specifies the minimum value allowed
step - specifies the legal number intervals
value - Specifies the default value
Input Type: range
The range type is used for input fields that
should contain a value from a range of
numbers.
Define a control for entering a number
whose exact value is not important (like a
slider control):
<input type="range" name="points"
min="1" max="10">
Attributes for Number
Use the following attributes to specify
restrictions:
max - specifies the maximum value
allowed
min - specifies the minimum value allowed
step - specifies the legal number intervals
value- Specifies the default value
Input Type: search
The search type is used for search fields (a
search field behaves like a regular text field).
Define a search field (like a site search, or
Google search):
Search Google:
<input type="search" name="googlesearch">
Input Type: tel
Define a field for entering a telephone
number:
Telephone:
<input type="tel" name="usrtel">
Input Type: time
The time type allows the user to select a
time.
Define a control for entering a time (no
time zone):
Select a time:
<input type="time" name="usr_time">
Input Type: url
The url type is used for input fields that
should contain a URL address.
Define a field for entering a URL:
Add your homepage:
<input type="url" name="homepage">
Input Type: week
The week type allows the user to select a
week and year.
Define a week and year control (no time
zone):
Select a week:
<input type="week" name="week_year">
HTML5 New Form Elements
HTML5 has the following new form
elements:
<datalist>
<keygen>
<output>
HTML5 <datalist> Element
The <datalist> element specifies a list of
pre-defined options for an <input> element.
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
HTML5 <keygen> Element
The purpose of the <keygen> element is
to provide a secure way to authenticate
users.
<form action="demo_keygen.asp" method="get">
Username: <input type="text" name="usr_name">
Encryption: <keygen name="security">
<input type="submit">
</form>
HTML5 <output> Element
The <output> element represents the result of
a calculation (like one performed by a script).
<form oninput="x.value=parseInt(a.value)
+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+
<input type="number" id="b" value="50">=
<output name="x" for="a b"></output>
</form>
HTML5 New Form Attributes
HTML5 has several new attributes for
<form> and <input>.
New attributes for <form>
autocomplete
novalidate
New attributes for <input>
autocomplete
autofocus
form
formaction
formenctype
formmethod
formnovalidate
formtarget
height and width
list
min and max
multiple
pattern (regexp)
placeholder
required
step
<form> / <input> autocomplete Attribute
The autocomplete attribute specifies whether a form or
input field should have autocomplete on or off.
<form action="demo_form.asp" autocomplete="on">
First name:<input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
E-mail: <input type="email" name="email"
autocomplete="off"><br>
<input type="submit">
</form>
<form> novalidate Attribute
The novalidate attribute is a boolean attribute.
When present, it specifies that the form-data
(input) should not be validated when
submitted.
<form action="demo_form.asp" novalidate>
E-mail: <input type="email" name="user_email">
<input type="submit">
</form>
<input> autofocus Attribute
The autofocus attribute is a boolean
attribute.
When present, it specifies that an <input>
element should automatically get focus
when the page loads.
First name:<input type="text"
name="fname" autofocus>
<input> formaction Attribute
The formaction attribute specifies the URL of a file
that will process the input control when the form is
submitted.
<form action="demo_form.asp">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit"><br>
<input type="submit"
formaction="demo_admin.asp"
value="Submit as admin">
</form>
<input> formnovalidate Attribute
The novalidate attribute is a boolean attribute.
When present, it specifies that the <input> element
should not be validated when submitted.
<form action="demo_form.asp">
E-mail: <input type="email"
name="userid"><br>
<input type="submit" value="Submit"><br>
<input type="submit" formnovalidate
value="Submit without validation">
</form>
<input> height and width Attributes
The height and width attributes specify
the height and width of an <input>
element.
<input type="image"
src="img_submit.gif" alt="Submit"
width="48" height="48">
<input> list Attribute
The list attribute refers to a <datalist> element that
contains pre-defined options for an <input> element.
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input> min and max Attributes
The min and max attributes specify the minimum and
maximum value for an <input> element.
Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31">
Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02">
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1"
max="5">
<input> multiple Attribute
The multiple attribute is a boolean
attribute.
When present, it specifies that the user is
allowed to enter more than one value in
the <input> element.
Select images: <input type="file"
name="img" multiple>
<input> placeholder Attribute
The placeholder attribute specifies a short
hint that describes the expected value of
an input field (e.g. a sample value or a
short description of the expected format).
<input type="text" name="fname"
placeholder="First name">
<input> required Attribute
The required attribute is a boolean
attribute.
When present, it specifies that an input
field must be filled out before submitting
the form.
Username: <input type="text"
name="usrname" required>
<input> step Attribute
The step attribute specifies the legal
number intervals for an <input> element.
Example: if step="3", legal numbers
could be -3, 0, 3, 6, etc.
<input type="number" name="points"
step="3">
Frames
<frameset cols="20%,*">
<frame name="first" src="C:\Users\joe\
Desktop\new9.html">
<frameset rows="20%,*">
<frame name="first" src="C:\Users\joe\
Desktop\new9.html">
<frame name="first" src="C:\Users\joe\
Desktop\new9.html">
</frameset>
</frameset>
HTML5 Canvas
The HTML5 <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.
Create a Canvas
A canvas is a rectangular area on an
HTML page, and it is specified with the
<canvas> element.
<canvas id="myCanvas" width="200"
height="100"></canvas>
Canvas-Example
<canvas id="myCanvas" width="200"
height="100"
style="border:1px solid #000000;">
</canvas>
HTML5 Inline SVG
HTML5 has support for inline SVG.
SVG stands for Scalable Vector Graphics
SVG is used to define vector-based graphics for
the Web
SVG defines the graphics in XML format
SVG graphics do NOT lose any quality if they
are zoomed or resized
Every element and every attribute in SVG files
can be animated
SVG is a W3C recommendation
Embed SVG Directly Into HTML Pages
<!DOCTYPE html>
<html>
<body>
<svg width="300" height="200">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:lime;stroke:purple;stroke-width:5;fill-
rule:evenodd;" />
</svg>
</body>
</html>
HTML5 Video
Before HTML5, there was no standard for
showing videos/movies on web pages.
Before HTML5, videos could only be
played with a plug-in (like flash). However,
different browsers supported different plug-
ins.
HTML5 defines a new element which
specifies a standard way to embed a video or
movie on a web page: the <video> element.
HTML5 Video-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>
HTML5 Audio
HTML5 provides a standard for playing audio
files.
Before HTML5, there was no standard for
playing audio files on a web page.
Before HTML5, audio files had to be played
with a plug-in (like flash). However, different
browsers supported different plug-ins.
HTML5 defines a new element which
specifies a standard way to embed an audio
file on a web page: the <audio> element.
HTML5 Audio-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>
HTML - Plug-ins
The purpose of a plug-in, is to extend the
functionality of the HTML browser.
The <embed> Element
The <embed> element is supported in all
major browsers.
The <embed> element defines a container
for an external application or interactive
content (a plug-in).
Many web browsers have supported the
<embed> element for a long time.
However, it has not been a part of the
HTML specification before HTML5.
Embed-Example
<embed width="400" height="50"
src="bookmark.swf">
HTML Audio - Using <embed>
The <embed> tag defines a container for
external (non-HTML) content.
<embed height="50" width="100"
src="horse.mp3">
