Web Design and

development
Lecture 6
Course Instructor: Wardah Mahmood
Email Id: wardah.mahmood@riphah.edu.pk
HTML5
HTML5
• HTML5 is the latest and most enhanced version of HTML. Technically, HTML is not a
programming language, but rather a mark up language.
• HTML5 is the next major revision of the HTML standard superseding HTML 4.01, XHTML
1.0, and XHTML 1.1. HTML5 is a standard for structuring and presenting content on the
World Wide Web.
• HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the Web
Hypertext Application Technology Working Group (WHATWG).
What is HTML5?
• HTML5 is a markup language used for structuring and presenting content on the World
Wide Web. It is the fifth and current major version of the HTML standard.
• It was published in October 2014 by the World Wide Web Consortium (W3C) to improve
the language with support for the latest multimedia, while keeping it both easily
readable by humans and consistently understood by computers and devices such as web
browsers, parsers, etc.
HTML5 Browser Support
• The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support
many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5
functionality.
• The mobile web browsers that come pre-installed on iPhones, iPads, and Android phones
all have excellent support for HTML5.
HTML5 Features
HTML5 comes with lots of flexibility and would support the followings −
• Uppercase tag names.
• Quotes are optional for attributes.
• Attribute values are optional.
• Closing empty elements are optional.
New Features
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>.
New HTML API’s
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
HTML5 New Elements
• HTML5 offers new elements for better document structure:
Tag Description
<article> Defines an article in a document
<aside> Defines content aside from the page content
<bdi> Isolates a part of text that might be formatted in a different direction from
other text outside it
<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
<footer> Defines a footer for a document or section
HTML5 New Elements
<header> Defines a header for a document or section

<main> Defines the main content of a document

<mark> Defines marked/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

<progress> Represents 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 a document

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

<time> Defines a date/time

<wbr> Defines a possible line-break
HTML5 Semantic Elements
HTML5 Semantic Elements
• Semantics is the study of the meanings of words and phrases in a language.
• Semantic elements = elements with a 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 <article> - Clearly defines its
content.
HTML5 <section> Element
• The <section> element defines a section in a document.
• A section is a thematic grouping of content, typically with a heading.

<section>
<h1>About the Author</h1>
<p>Author is well known software engineer....</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 read it
independently from the rest of the web site. For Example: Forum post, Blog post,
Newspaper article

<article>
<h1>HTML5</h1>
<p>HTML5 is a core technology markup language of the
Internet used for structuring and presenting content for the
World Wide Web. As of October 2014 this is the final and
complete fifth revision of the HTML standard of the World
Wide Web Consortium (W3C).</p>
</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.

<article>
<header>
<h1>HTML5</h1>
<p>An Introduction to HTML5</p>
</header>
<p>HTML5 is a core technology markup language of the Internet
used for structuring and presenting content for the World Wide
Web.</p>
</article>
HTML5 <footer> Element
• The <footer> element specifies a footer for a document or section.
• A <footer> element should contain information about its containing element.
• You can have several <footer> elements in one document.

<article>
. . .
<p>HTML5 is a core technology markup language of the Internet
used for structuring and presenting content for the World Wide
Web.</p>
<footer>
<p>Posted By: Someone Smart</p>
</footer>
</article>
HTML5 <nav> Element
• The <nav> element defines a set of navigation links.
• Not all groups of links on a page need to be in a <nav> element only sections that consist
of major navigation blocks are appropriate for the <nav> element.

<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="simple_tags.html">Simple Tags</a></li>
<li><a href="lists.html">Lists</a></li>
<li><a href="tables.html">Tables</a></li>
<li><a href="forms.html">Forms</a></li>
</ul>
</nav>
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.

<article>
<h1>HTML5</h1>
<p>HTML5 is used for structuring and presenting content for
the World Wide Web</p>

<aside>
<p>Learn More: <a href="http://www.w3.org">W3C</a></p>
</aside>
</article>
HTML5 <figure> & <figcaption>
• The purpose of a <figcaption> is to add a visual explanation to an image.
• With HTML5, images and captions can be grouped together in <figure> elements.

<figure>
<img src="html5.png" alt="HTML5" width="200" height="350" />
<figcaption>HTML5 - The Latest Version of HTML</figcaption>
</figure>
HTML5 <main> Element
• The <main> tag specifies the main content of a document.
• The content inside the <main> element should be unique to the document. It should
not contain any content that is repeated across documents such as sidebars, navigation
links, copyright information, site logos, and search forms.
• There must not be more than one <main> element in a document.
• The <main> element must NOT be a descendant of an <article>, <aside>, <footer>,
<header>, or <nav> element.
HTML5 <main> Element
<body>
<header>
<h1>Website Heading</h1>
</header>

<main>
...
</main>

<footer>
<p>&copy; HTML5 Developers.</p>
</footer>
</body>
HTML5 <mark> Element
• The <mark> tag defines marked text.
• Use the <mark> tag if you want to highlight parts of your text.

<article>
<h1>HTML5</h1>
<p>HTML5 is used for <mark>structuring</mark> and presenting
content for the World Wide Web</p>
</article>
HTML Form controls
HTML5 <datalist> Element
• The <datalist> element specifies a list of pre-defined options for an <input>.
• Users will see a drop-down list of pre-defined options as they input data.
• The list attribute of the <input> element, must refer to the id attribute of the <datalist>
element.

<form action="">
<input type="text" list="browsers" />
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Safari">
</datalist>
</form>
HTML5 <output> Element
• The HTML <output> element represents the result of a calculation or user action.

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
<input type="range" name="b" value="50" /> +
<input type="number" name="a" value="10" /> =
<output name="result"></output>
</form>

See Example: HTML5 output

HTML5 Input Types
• HTML5 added several new input types.
<input type="text" name="something" />
• NOTE: Input types, not supported by old web browsers, will behave as input type text.

• date • color
• month • number
• week • range
• time • email
• datetime-local • search
• url • tel
Input Type: number
• The <input type="number"> is used for input fields that should contain a numeric value.
• You can set restrictions on the numbers.
• Depending on browser support, the restrictions can apply to the input field.

<form action="">
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5" /><br />
Weight (10,20,30...100):
<input type="number" name="weight" min="10" max="100"
step="10" value="40" /><br />

<input type="submit" />

</form>
Input Type: date
• The <input type="date"> is used for input fields that should contain a date.
• Depending on browser support, a date picker can show up in the input field.

<form action="">
Enter a date:
<input type="date" name="bday1" /><br />

Enter a date between 2010-01-01 & 2015-12-31:

<input type="date" name="bday4" min="2010-01-01" max="2015-12-
31" /><br />
</form>
Input Type: color
• The <input type="color"> is used for input fields that should contain a color.
• Depending on browser support, a color picker can show up in the input field.

<form action="">
Select your favorite color:
<input type="color" name="favcolor" value="#ff0000" />
<input type="submit" />
</form>
Input Type: range
• The <input type="range"> is used for input fields that should contain a value within a
range.
• Depending on browser support, the input field can be displayed as a slider control.

<form action="">
Points:
<input type="range" name="points" min="0" max="10" />
<input type="submit" />
</form>
Input Type: email
• The <input type="email"> is used for input fields that should contain an e-mail address.
• Depending on browser support, the e-mail address can be automatically validated when
submitted.

<form action="">
E-mail:
<input type="email" name="email" />
<input type="submit" />
</form>
HTML5 Attributes
• HTML5 added the following attributes for <input>:

• autocomplete • list
• autofocus • min and max
• form • multiple
• formaction • pattern (regexp)
• formenctype • placeholder
• formmethod • required
• formnovalidate • step
• formtarget
• height and width
The pattern Attribute
• The pattern attribute specifies a regular expression that the <input> element's value is
checked against.
• The pattern attribute works with the following input types: text, search, url, tel, email,
and password.

<form action="">
Country code:
<input type="text" name="country_code" pattern="[A-Za-z]{3}"
title="Three letter country code" />
<input type="submit" />
</form>
The placeholder Attribute
• The placeholder attribute specifies a hint that describes the expected value of an input
field (a sample value or a short description of the format).
• The hint is displayed in the input field before the user enters a value.
• The placeholder attribute works with the following input types: text, search, url, tel,
email, and password.

<form action="">
<input type="text" name="fn" placeholder="First name" /><br />
<input type="text" name="ln" placeholder="Last name" /><br />
<input type="submit" value="Submit" />
</form>
The 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.
• The required attribute works with the following input types: text, search, url, tel, email,
password, date pickers, number, checkbox, radio, and file.

<form action="">
Username: <input type="text" name="usrname" required />
<input type="submit" />
</form>
HTML5 Multimedia
Elements
HTML5 Video
• Before HTML5, there was no standard for showing videos on a web page.
• Before HTML5, videos could only be played with a plug-in (like flash).
• The HTML5 <video> element specifies a standard way to embed a video in a web page.
HTML5 Video
• HTML5 <video> element supports 3 video formats: MP4, WebM, and Ogg:

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

HTML5 Video
• The controls attribute adds video controls, like play, pause, and volume.
• Text between the <video> and </video> tags will only display in browsers that do not
support the <video> element. To start a video automatically use the autoplay attribute
• Multiple <source> elements can link to different video files. The browser will use the first
recognized format.

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

<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
• Before HTML5, there was no standard for playing audio files on a web page.
• Before HTML5, audio files could only be played with a plug-in (like flash).
• The HTML5 <audio> element specifies a standard way to embed audio in a web page.
HTML5 Audio
• HTML5 <audio> element supports 3 audio formats: MP3, Wav, and Ogg:

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

HTML5 Audio
• The controls attribute adds audio controls, like play, pause, and volume.
• Text between the <audio> and </audio> tags will display in browsers that do not support
the <audio> element. To start a audio automatically use the autoplay attribute
• Multiple <source> elements can link to different audio files. The browser will use the first
recognized format.

<audio controls autoplay>

<source src="sound.ogg" type="audio/ogg" />
<source src="sound.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>