HTML5
HTML5 is the latest and most enhanced version of HTML.
HTML5 is a co-operation between the World Wide Web Consortium (W3C) and
the Web Hypertext Application Technology Working Group (WHATWG).
New HTML5 elements(tags):
New Semantic elements like <header>, <footer>, <article>, <section> etc.
New values of input element like number, date, time, email, range.
New graphic elements: <svg> and <canvas>.
New multimedia elements: <audio> and <video>.
Semantic elements: elements with a meaning.
<form>, <table>, <header>,<article> - Clearly defines its content.
Non-semantic elements: <div> - Tells nothing about its content.
HTML5 Document Structure:
The DOCTYPE declaration for HTML5: <!DOCTYPE html>
All HTML documents must start with a <!DOCTYPE> declaration.
The declaration is not an HTML tag. It is an "information" to the browser about
what document type to expect.
In HTML5, the <!DOCTYPE> declaration is simple: <!DOCTYPE html>
In older documents (HTML 4 or XHTML), the declaration is more complicated
because the declaration must refer to a DTD (Document Type Definition).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
The character encoding (charset) declaration: <meta charset="UTF-8">
New semantic elements in HTML5 :
<article>
<aside>
<figcaption>
<figure>
<footer>
<header>
<nav>
<section>
<summary>
HTML5
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>......</title>
</head>
<body>
<header>......</header>
<nav>......</nav>
<article>
<section> ......</section>
</article>
<aside>......</aside>
<footer>......</footer>
</body>
</html>
Defines header for a document.
<header>
Introductory content.
<nav> Defines a set of navigation links.
<article> Defines an article in a document
Independent, self-contained content.
<section> A home page splits into sections for
introduction, content, and contact information.
<aside> Defines some content aside from the content it
is placed in (like a sidebar).
<figure> Defines the image
<figcaption> Defines a caption for a <figure> element
Defines footer for a document.
<footer>
Author of the document, copyright information,
contact information.
Page 2
HTML5
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>...</title>
</head>
<body>
<header>
<h1>HTML5 Document Structure Example</h1>
</header>
<nav>
<a href = "https://www.google.com/html"> HTML Tutorial</a>
<a href = "https://www.google.com/css"> CSS Tutorial</a>
<a href = "https://www.google.com/javascript"> JavaScript Tutorial</a>
</nav>
<article>
<section>
<p>Once article can have multiple sections</p>
</section>
<section>
<h1>Cricket</h1>
<p>Cricket is a bat-and-ball game played between two
teams</p> </section>
</article>
<aside>
<p>This is aside part of the web page</p>
</aside>
<footer>
<p>Posted by: harivandana</p>
<p>Contact information:
<a href="www.harivandanacollege.org">education@demo.com</a></p>
</footer>
</body>
</html>
Page 3
HTML5
HTML5 Attributes
HTML5 added the following attributes for <input>:
Autocomplete
autofocus
form
formaction
formmethod
formnovalidate
formtarget
height and width
list
min and max
multiple
pattern (regexp)
placeholder
required
step
and the following attributes for <form>:
autocomplete
novalidate
Page 4
HTML5
1. autocomplete attribute
A form or input field should have autocomplete on or off.
When autocomplete is on, the browser automatically completes the
input values based on values that the user has entered before.
It is possible to have autocomplete "on" for the form, and "off" for
specific input fields, or vice versa.
Example:
<form 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>
2. novalidate attribute
The form data should not be validated when it submitted.
User can enter any value.
Example:
<form novalidate>
URL: <input type="url" name=”user_url”><br> E-
mail: <input type="email" name="user_email">
<input type="submit">
</form>
Page 5
HTML5
3. autofocus attribute
The input field should automatically get focused (selected for input)
when the page loads.
Example:
<form>
Last name: <input type="text" name="lname"><br> <input
type="submit">
</form>
4. form attribute id
It allows user to reference a specific form by its ID on any orphaned field.
Example:
<body>
<form id="reg_form">
First name: <input type="text" name="fname"><br> <input type="submit"
value="Submit">
First name:<input type="text" name="fname"
autofocus><br>
</form>
<p>The "Last name" field is outside the form, but still part of the
form.</p>
Last name: <input type="text" name="lname" form="reg_form">
</body>
Page 6
HTML5
5. formaction attribute
It specifies where to send the form-data when a form is submitted.
The formaction attribute overrides the action attribute of the <form>.
It is used with type="submit" and type="image".
Example:
<form action="Form1.html">
First name: <input type="text" name="fname"><br>
Last name : <input type="text" name="lname"><br>
<input type="submit" value="Submit--open
Form1"><br> <input type="submit"
formaction="Form2.html" value="Submit--open
Form2">
</form>
6. formmethod attribute
It overrides a form's method (get or post) with the specified method.
Example:
<form action="/action_page.php" method="get">
First name: <input type="text" name="fname" ><br>
Page 7
HTML5
Last name : <input type="text" name="lname"><br>
<input type="submit" value="Submit using GET">
<input type="submit" formmethod="post" value="Submit using
POST"> </form>
7. formtarget attribute
It specifies that where to display the response after submitting
the form.
It overrides the target attribute of the <form> element.
Example:
<form action="page1.php" target=”_blank”>
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit as normal">
<input type="submit" formtarget="_blank" value="Submit to a new tab">
</form>
Page 8
HTML5
8. formnovalidate attribute
Removes all validation of the <form>.
Example:
<form>
E-mail: <input type="email" name="userid"><br>
<input type="submit" value="Submit with validation"><br>
<input type="submit" formnovalidate value="Submit without validation">
</form>
9. height and width attributes
The height and width attributes are used with <input type=”image”>
Example:
<form action="/action_page.php">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="image" src="arrow.png" alt="Submit" width="48"
height="48">
</form>
Page 9
HTML5
10. list attribute
The list attribute refers to a <datalist>. When page loads it looks like a textbox.
After selecting, it will display a listbox.
Example:
<form>
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer" >
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
11. min and max attributes
It specify the minimum and maximum values for an <input> element.
It works with the following input types:
number, range, date, datetime-local, month, time and week.
Example:
Page 10
HTML5
<form>
Enter a date after 1980-01-15:
<input type="date" name="bday" min="1980-01-15"><br>
Enter a month before january, 2015:
<input type="month" name="bday" max="2015-01"><br>
Quantity (between 1 and 20):
<input type=”number” name=”num” min=”1” max=”20”><br>
<input type="submit">
</form>
12. multiple attribute
It allows user to enter more than one value in the <input> element.
It works with the following input types: email, and file.
Example:
<form>
Select images: <input type="file" name="img" multiple>
</form>
Page 11
HTML5
13. pattern attribute
It works with the following input types:
text, search, url, tel, email, and password.
It allows us to define our own rule to validate the input value using
Regular Expressions (RegEx). Again, if the value does not match the
specified pattern, the input will throw an error.
Example:
<form>
Country code:
<input type="text" pattern="[A-Za-z]{3}" title="Three letter country code">
<input type=”password” pattern=”{.8}” title=”min 8 character password”>
<input type="submit">
</form>
14. placeholder attribute
It displays a hint that describes the expected value of an input field. (e.g.,
you click on the field, and you begin to type, the text simply disappears.)
Example:
<form>
<input type="text" name="fname" value="First name"><br>
<input type="password" name="pwd" placeholder="Password">
<input type="submit">
</form>
Page 12
HTML5
15. required attribute
The input field must be filled out before submitting the form.
Example:
<form>
Username: <input type="text" name="usrname" required>
<input type="submit">
</form>
16. step attribute
It specifies the legal number intervals for an <input> element.
It works with the following input types:
number, range, date, datetime-local, month, time and week.
Example: if step="5", legal numbers could be -5, 0, 5, 10, etc.
<form >
<input type="number" name="points" step="5">
<input type="month" name="mnth" step="3">
<input type="submit">
</form>
Page 13
HTML5
Web Form (HTML5 Input Types):
HTML5 added several new input types:
color
date
time
datetime-local
week
month
number
range
email
search
tel
url
1. Input Type Color
< input type="color"> allows user to select a color.
Example:
<form action="action.php">
Select your favourite colour:
<input type="color" name="favcolor" value="#ff0000">
<input type="submit">
</form>
Page 14
HTML5
2. Input Type Date
<input type = "date"> allows user to enter a date.
Example:
<form>
Birthdate:
<input type="date" name="bday">
<input type=”submit”>
</form>
3. Input Type Time
The <input type="time"> allows the user to select a time (no time zone).
Example:
<form>
Select a time:
<input type="time" name="usr_time" value="12:05”>
</form>
Page 15
HTML5
4. Input Type Datetime-local
The <input type="datetime-local"> allows user to enter date and time.
Based on browser supporting AM and PM will be displayed.
Example:
<form>
Birthday (date and time):
<input type="datetime-local" name="bdaytime">
<input type="submit" value="Send">
</form>
5. Input Type Week
<input type="week"> allows the user to select a week and year.
Example:
<form>
Select a week:
<input type="week" name="year_week">
</form>
Page 16
HTML5
6. Input Type Month
<input type="month"> allows the user to select a month and year.
Example:
<form>
Joining (month and year):
<input type="month"
name="jmonth"> </form>
7. Input Type Number
<input type="number"> defines a numeric input field.
Example:
<form>
Enter number:
<input type="number" name="num" ><br>
Between 1 to 100 :
<input type="number" name="quantity" min="1" max="100"><br>
<input type=”submit”>
</form>
Page 17
HTML5
8. Input Type Range
<input type="range"> allows user to enter a number using a slider control.
Default range is 0 to 100.
Example:
<form method="get">
Points:
<input type="range" name="points" min=”-30”
max=”30”> <input type="submit">
</form>
Output:
9. Input Type Email
<input type="email"> allows user to enter Email address.
It can be automatically validated when submitted.
Example:
<form>
E-mail : <input type="email" name="email">
<input type="submit">
</form>
Page 18
HTML5
10. Input Type Search
<input type="search"> is used for search fields (a search field behaves like a
regular text field).
<form>
Google Search : <input type="search">
</form>
11. Input Type Url
The <input type="url> allows user to enter a URL address.
Example:
<form>
Add your homepage:
<input type="url" name="homepage">
</form>
Page 19
HTML5
Audio Controls
To play an audio file in webpage, use the <audio> element.
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.
supported audio formats: MP3, WAV, and OGG
Example:
<!DOCTYPE html>
<html>
<body>
<audio controls>
<source src="E:\songs\poem.mp3">
</audio>
</body>
</html>
Video Controls
To show a video in HTML, use the <video> element
The controls attribute adds video controls, like play, pause, and volume.
Set width and height attributes.
To start a video automatically use the autoplay attribute
Example:
<!DOCTYPE html>
<html>
<body>
<video width="400" height="500" autoplay>
<source src="E:\Video\Sunlight.mp4">
</video>
</body>
</html>
Page 20
