Lesson 1: HTML5 Introduction

Introduction to HTML5
Many of your answers may fall into the categories listed below.
 Indecipherable code

 Dependence on good internet connection (poor/no internet connection)

 Need for better user interaction

 Communication latency

 Need for 3rd-party plug-in software

 Need for more realistic 3D graphics and effects

 Mediocre or slow performance

 Desire for better, flexible styling across devices

Due to many of the challenges you just listed, the newest, revised version of HTML and CSS were
created: HTML5 & CSS3.

Introduction to HTML5
This lesson will provide an overview of the various technologies that comprise HTML5 and will also
set the stage for topics that will be covered later in the course.
It is worth noting that HTML5 covers a wide range of topics, and this course provides a good starting
point to begin your HTML5 journey. This course will be covering several exciting features of HTML5 in the
following modules, but keep in mind that much more can be done with HTML5 than what is covered in
this course.
Note: Some people use the term “HTML5” when referring to a suite of related technologies including
HTML5, CSS3, and Javascript.

HTML5 History
The World Wide Web Consortium (W3C) is a non-governmental, member society consisting of full-time
staff and member organizations that work with the public to develop web standards.
The Web Hypertext Application Technology Working Group (WHATWG) was founded in 2004 with
individual community members from Opera, Apple, and Mozilla. With an open mailing list, it is a
community interested in developing specifications for evolving web technologies such as HTML. A
specification is a document that defines HTML, all its aspects, how it works, and how to display it.
In 2004, WHATWG began work on a new, fifth HTML specification—HTML5. Three years later in
2007, when W3C wanted to create its own HTML specification, Apple, Opera, and Mozilla proposed that
W3C use WHATWG’s HTML5 specification as the starting point. They did, and W3C called it HTML5. In
January 2011, WHATWG renamed its own, new, living HTML5 standard to HTML, representing the fact
that it will never be considered “complete,” and will always continue to be updated. However, W3C
continues to work on its 5th-version under the name HTML5.
 Note: It is very important to understand that the W3C HTML5 specification is not yet a standard, thus
different browsers support HTML5 features to varying degrees. Developers should check resources such
as www.caniuse.com to find out which features work for what browsers before writing code.

HTML5 Modules
HTML5 rests on eight foundations:
 Semantics
 Offline & Storage
 Device Access
 Connectivity
 MultiMedia
 3D & Effects
 Performance & Integration
 CSS3 & Styling

Semantics
 Form fields
 New Markup
 Microdata
Giving meaning to structure, semantics are front and center with HTML5. A richer set of tags
along withmicrodata (document annotation that provides extra semantics) are enabling a more
useful, data-driven web for both developers and users.

You will learn more about the bold topics shown on this slide in upcoming lessons.

CSS3
 CSS3 styles and animations
 Media Queries
CSS3 delivers a wide range of stylization and effects, enhancing a website without sacrificing
semantic structure or performance.
We will be covering several new CSS3 properties in this course along with CSS3 animations
and media queries.

MultiMedia
 Audio
 Video
 MultiMedia API
 WebRTC
Audio and video are first class citizens in the HTML5 web, living in harmony with your apps and
sites. Lights, camera, action!
We will only focus on the topics shown in bold on this slide during this course. To find out
more about the use of tracks with audio and visual files, as well as WebRTC for real-time
communication, be sure to view the items listed in the References section at the end of the
lesson.
3D, Graphics, & Effects
 Canvass
 CSS3
 SVG
 WebGL
Between Scalable Vector Graphics (SVG), Canvas (a new HTML5 element), the
Web Graphics Library (WebGL), and CSS3 3D features, you're sure to amaze
users with stunning visuals natively rendered through the browser.

We will focus only on the topics shown in bold on this slide during this course.
Check out the References section at the end of the lesson to find out more about
SVG and WebGL.

Device Access
 Geolocation
 Audio/videoinputs
 Tilt orientation
Application Programming Interfaces (APIs) are a set of routines, functions, protocols, and
message formats used by application programs to communicate with a database system, an
operating system, or any other type of control system. Beginning with the Geolocation API, web
applications can present rich, device-aware features and experiences. Incredible device access
innovations are being developed and implemented, from audio/video input access to
microphones and cameras, to local data such as contacts and events, and even tilt orientation.

We will focus only on geolocation in this course. You can find out more about title orientation,
audio and visual inputs, and local data through the References section at the end of the lesson.

Offline & Storage

 Application cache
 Client-side Storage
 File System API
 Indexed database
 Web SQL database
 Web storage
o Session storage
o Local storage
Web Apps can start faster and work even if there is no internet connection, thanks to the HTML5 offline
storage capabilities such as application cache and client-side storage.

We will cover the topics shown in bold on this slide during this course.

Connectivity
 Server sent events
 WebSockets
 WebRTC

More efficient connectivity means more real-time chats, faster games, and better
communication.JavaScript interfaces that define connections for passing messages between server
computers and client computers (WebSockets) and automatic web updates from servers (Server-sent
Events) are pushing (pun intended) data between client and server more efficiently than ever
before. WebRTC (real-time communication) is enabling fast interaction.

The topic of connectivity will not be discussed any further in this course.

Performance & Integration

 Web Workers
 XML Http Request 2
Make your Web Apps and dynamic web content perform faster with a variety of techniques and
technologies such as Web Workers (independent web scripts running in the background) and
XMLHttpRequest 2 (an API that sends HTTP requests to web servers and loads the response
back into the script). No user should ever wait on your watch.

We will not cover these topics during this course. To learn about these topics, check out the
References section at the end of the lesson.

Browser Support
 Check browser support before implementing
 Graceful degradation
 Progressive enhancement
Note: the presentations for this course are best viewed on Chrome browser

HTML5 is at the absolute cutting edge of the technology landscape. A lot of features mentioned in the
specification have either been implemented inconsistently for various browsers, or in some cases have
not been implemented at all. The inconsistencies in browser implementation of various features is one of
the biggest challenges of working with HTML5 today.
Developers should always check for the level of browser support before implementing a feature.
Websites such as www.caniuse.com provide an updated snapshot of which feature is working on which
browser.
 It is also important to note that in some cases, especially for CSS3 properties, some browsers don't
implement the feature, while those that do might implement it differently. This means that developers
have to write additional code to make the feature work on all browsers.
Given that all browsers have not implemented all features in HTML5, it is important that you write
code intended for browsers that do not understand a particular piece of HTML5. This will become your
fallback code and will tell browsers what to do, or show for the features that are not recognized by the
browser.
Also remember, even when a browser does implement a particular part of the HTML5 specification, a
user may have an older version of a browser—another good reason to have fallback code, so the HTML5
display degrades gracefully, or still shows a good HTML5 display (graceful) when certain HTML5 code is
not implemented by the browser (degrades).
Another thing to keep in mind is that CSS3 is even more unevenly implemented across browsers. For
this reason it is best to use CSS2.1 to drive your style and then use CSS3 to enhance it. (This is
progressive enhancement.) Whenever you use CSS3, ask yourself this question: If the CSS3 doesn’t
work or isn’t understood by the browser, will the style look bad? If the answer is yes, then CSS3 is driving
your style. Instead use it only to enhance the style.
Note: The presentation for this course works best with the Chrome browser, and it is suggested that
you use Chrome while taking this course.

Case Study: Eat Street Application

You are the web designer for a small technology firm.

Your boss’s assignment this week: create a restaurant finder app called ‘eat street’ using the
latest features from HTML5 and CSS3.

In this course, you work at a web technology company that has undergone hard economic times.
The CEO, your boss, is considering letting you go because he doesn’t have the income to pay everyone
and the company has had negative profits the last two quarters. The CEO is pondering whether or not to
shut down. At the end of the week, the CEO will also make a decision whether he will keep employing
you or let you go. It all depends on the latest app you are making. There are two groups coming in to see
the app: one potential customer is considering purchasing the app from your company, the other is
considering purchasing the company and turning it around if they like the app.

You are under a deadline: Your boss wants you to create a fully-functional, HTML5-based
restaurant finder app called Eat Street by the end of the week to present to both potential customers.

Through each lesson, you will work on a different part of the app as it grows in functionality,
closer and closer to the specifications of your boss.

Course Project
 Requirements: Create an application that applies concepts from the modules covered in
this course as specified in the rubric.
 Assessment:
 Grading: Your instructor will grade your projects based on this rubric
 Pass score: You need a minimum of 25 points to pass this course and to get a
certificate
Note: You must upload your project on a server so that it can be accessed over internet. The project will
be considered invalid without this.

At the end of the course, students will be required to create an application that applies the concepts from
each of the modules covered in this course (similar to the way that our restaurant finder case study
application does).
Students should ideally start planning for their project as soon as the course starts and build on the
implementation as the course progresses. It is ideal to form groups on the first day of the class so
students can start brainstorming ideas for the application.
Note that it can be hard to come up with an application concept that encompasses all the concepts
covered in the course. It is best not to force-fit a functionality just to gain points, instead you should focus
on creating an application that you are really interested in with the help of the tools learnt in the class. We
also encourage you to read up on HTML5 topics that are not covered in the class. Implementing features
not covered in the class can earn you some bonus points.
You should discuss your project idea with your instructor who can help you make the right choices for
your application.
The project can be developed individually or in groups of two. In case the class has odd number of
students, one group can be of three students.
The instructors will use this rubric to grade the project.
Students need a minimum of 25 out of 45 points on the project to pass this course and to get a certificate.
Students can get 35 points for feature implementations as specified in the rubric and, can get an
additional 10 points for using HTML5 features that were not covered in the course and for creating an
outstanding application.
The project must be uploaded on a web server and should be accessible on the internet for it to be
considered valid.
One option is to upload the application on Google App Engine. Following are the steps required to
upload the application:
Create an Application in App Engine:
1. Go to http://appengine.google.com/ and sign in with your Gmail account if you are not signed in
already.
2. Click the Create Application button.
3. Choose an application identifier.
This will be part of the URL of your application, so it needs to be unique. Your app will be available online
at http://<your-unique-application-name>.appspot.com.
4. Edit your app.yaml file so that your application name matches the one you created
exactly. Change “application: helloworld” to “application: <your-unique-application-name>.”
Deploy your App
5. Download GoogleAppEngineLauncher for your environment from here.
6. In GoogleAppEngineLauncher, select the <your-unique-application-name> application from the list.
7. Click the blue deploy button. It make take a few moments for your app to upload and start.
8. Visit http://<your-unique-application-name>.appspot.com.
Congratulations! You have just deployed live code to the web. Now anyone can visit this URL to see your
app.

Upcoming Course Topics

 HTML5 Semantics
  HTML5 Forms
 CSS#
 HTML5 Audio and Video
 HTML5 Canvas
 HTML5 Geolocation
 HTML5 Offline Support

Now that you have an overview of HTML5, let us take a quick look at the topics that will be covered in this
course.

Resources
General Resources:
 W3C
 WHATWG
 HTML5 rocks
 Dive into HTML5

Browser Support:
 CanIUse
 HTML5Test
 HTML5Readiness

Browser Support Utilities:

 Modernizr
 -prefix-free

Here is a list of resources that you can use throughout this course as you create your restaurant finder
app and work on your project.
General Resources
W3C - The World Wide Web Consortium, its work, and its recommendations.

WHATWG - The Web Hypertext Application Technology Working Group and its current work.

HTML5 Rocks - An HTML5 advocacy and developer information website and repository of tools,
resources, and communities.

Dive into HTML5 - An online book on the newest HTML specification, HTML5.
Browser Support
CanIUse - A website giving detailed browser comparison according to the specific HTML5, CSS3, and
Javascript feature.
HTML5Test - A website that scores your browser in detail, based on your browser’s ability to implement
the HTML5 specification.

HTML5Readiness - A website that compares the readiness of various browsers to implement the HTML5
specification.
 Browser Support Utilities:
Modernizr - A Javascript library that helps to detect HTML5 and CSS3 features in the user’s browser.
-prefix-free - A utility that lets you use only unprefixed CSS properties everywhere. It works behind the
scenes, adding the current browser’s prefix to any CSS code, only when it’s needed.

The Future
With your web browser, most of you are used to incorporating powerful third-party technologies such as
Flash. But now, HTML5 is more powerful than ever. The power and capability of HTML will only continue
to increase with future revisions and specifications, lessening the need to depend on other technologies
and software. Perhaps sometime in the future, all you will need is your browser and HTML. Then you
might say “I’ve seen the FUTURE. It’s in my BROWSER.”

Congratulations - end of lesson reached

Well done!
You have completed 100% of the lesson

Topic Outline

Lesson 1: HTML5 Introduction

Lesson 2: HTML5 Semantics

Lesson 3: HTML5 Forms
Not available unless: The activity Lesson 2: HTML5 Semantics is marked complete
Lesson 4: Cascading Style Sheets 3 (CSS3)
Not available unless: The activity Lesson 3: HTML5 Forms is marked complete

 Lesson 5: HTML5 Audio and Video

Not available unless: The activity Lesson 4: Cascading Style Sheets 3 (CSS3) is marked complete

 Lesson 6: HTML5 Canvas

Not available unless: The activity Lesson 5: HTML5 Audio and Video is marked complete

 Lesson 7: HTML5 Geolocation

Not available unless: The activity Lesson 6: HTML5 Canvas is marked complete

 Lesson 8: HTML5 Offline Support

Not available unless: The activity Lesson 7: HTML5 Geolocation is marked complete

Lesson 2: HTML5 Semantics

Copyright
Contents

 Opening
 Quiz
 HTML5 Semantics
 HTML5 Semantic Tags for Structure
 Challenge
 Roadmap
 Key Terms
 Linguistics
 Semantic Units
 Semantic Issues
 New Elements
 Obsolete & Repurposed Elements
 Simplicity: <script>
 Simplicity: charset
 Simplicity: <html>
 Simplicity: <doctype>
 <section>
 <article>
 <header>
 <hgroup>
 <footer>
 <nav>
 <aside>
 HTML5 vs. HTML4
 Browser Support

Opening

Quiz
Please answer the question below based on the HTML code in this slide. Choose only one option.
What’s the problem with this HTML code?

A) There are too many divS.

B) The divS have no inherent meaning.

C) It looks good to me.

D) I thought this was an HTML5 course.

E) “Bottom” and “top” should be named “footer” and “header”.

HTML5 Semantics Tags for Structure

Amongst other difficulties, deciphering the meaning of a <div> element when reading HTML code has
always been an issue. For this reason HTML developers introduced several new tags in HTML5 to
improve upon the last major version, HTML4.

In this module, you will learn to:

Distinguish between new and obsolete HTML elements.

Choose the best element for good semantics.
Structure pages with new elements.

Challenge
In this course, you work at a web technology company that has undergone hard economic times. The
CEO, your boss, is considering letting you go because he doesn’t have the income to pay everyone, and
the company has had negative profits the last two quarters. The CEO is pondering whether or not to shut
down. At the end of the week, the CEO will also make a decision about whether he will keep employing
you or let you go. It all depends on the latest app you are making. There are two groups coming in to see
the app: one potential customer is considering purchasing the app from your company, the other is
considering purchasing the company and turning it around if they like the app.

The are coming in tomorrow to see the progress on the structure of the app which uses HTML5. To
be ready to show them the structure tomorrow afternoon, you have to finish it by TOMORROW
MORNING!

Roadmap
 Learn the new and obsolete HTML elements
 Structure your page with new elements
 Complete the Challenge: Create the structure for your restaurant finder app!

Key Terms
 Semantics
 Semantics in HTML
 Element
 Tag

Throughout this lesson, the terms shown on this slide are used. Since this is a semantics class,
let's make sure that everyone has the same understanding about what they mean.

Linguistics
In linguistics, semantics is the study of meaning.
 As was seen in the quiz, each div has a different meaning, though the HTML5 code uses the
same <div> tag in each case.

Therefore, semantics in HTML refers to the process and result of giving structure and meaning to web
page content.

Questions to Consider
What are some ways that structure and meaning were given to each div in the quiz?
How can semantics be improved?

Semantic Units

Tags – found between ‘<’ and ‘>’ signs, a command that describes how a portion of a page should be
formatted or defines a hyperlink

Example: <div>, <p>

Elements – HTML segment that includes an opening (start) tag, sometimes a closing (end) tag, and all
test in between.

Example: <div>Do you like my new div? </dvi>

<p>This is first paragraph.

</p>

Two units of HTML semantic structure are tags and elements.

Tags are commands enclosed within “<>” signs. Tags describe how a web page should be formatted
or define a hyperlink. Examples include <div> (which has no specific meaning) and <p> which means
paragraph.

Elements include a start (opening) tag, the content to be formatted, and an end (closing) tag. Some
elements do not use end tags. Let’s create <p> and <div> elements.

<p>This is a p element.</p>

<div>This is a div element.</div>

Semantic Issues
In 2005, Google conducted a survey in an effort to make improvements upon earlier versions of HTML. In
this survey, Google analyzed one billion pages to discover what class names were used on <div>
elements as well as other elements.

Three years later in 2008, Opera MAMA conducted its own survey. Opera MAMA analyzed three
million URLs to discover what the most-used class names and IDs were.

Both surveys resulted in two findings. First, developers lacked specific elements to mark up web
pages. Secondly, because of the first problem, developers just used the <div> element and gave meaning
to each <div> element using descriptive classes and IDs.
New Elements
Because of the problems discussed in the previous slide, HTML architects created a host of new
elements in the new specification.

This lesson will focus on the structural elements highlighted in green on this slide. It will also cover
some of the other elements shown in the table during the course.

The table below briefly describes the elements.

Structural Elements:
Element Description
<article> Defines an independent section of writing

<aside> Defines info separate from main content

<footer> Defines bottom information of page or article

<header> Defines a headline

<hgroup> Defines a group of headlines

<nav> Defines a navigation list

<section> Defines a major portion of a page or article

<bdi> Indicates text selected for separate formatting

<command> Defines a command button

<details> Defines extra info that can be hidden

<mark> Defines highlighted text

<summary> Defines headline for a <details> element

<ruby> Defines Ruby notation for East Asian alphabets

Defines pronunciation and explanation for some East Asian

<rt>
characters

<rp> Defines what to display for browsers without Ruby support

<time> Defines date and time

<wbr> Defines a possible line-break

Other elements were also introduced. Some ease the use of forms, some help with graphics, others help
with content like videos, images, or audio.

Media, Content & Graphics Elements:

Element Description
<audio> Defines audio content
 <video> Defines video content

Defines multimedia resources for <audio> and <video>

<source>
elements

<embed> Defines container for a plug-in or external application

<track> Defines text tracks for <audio> or <video> elements

<figure> Defines image content

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

<canvas> Creates graphics using scripting language

Forms Elements:
Defines options for field
<datalist>
entry of a form

Defines a field to generate key-pairs

<keygen>
for forms

<output> Defines a calculation result

<progress> Indicates progress on a task

<meter> Defines a scalar measure or gauge

Obsolete & Repurposed Elements

There are also elements that are no longer used in HTML5.

In this slide, the first row represents elements that are not a part of the HTML5 specification. Their
function is better handled by CSS.

The second row shows the <noscript> element which is still in HTML5; however it is important to note
it is not used in XML (Extensible Markup Language).

The third row represents elements that are not part of the HTML5 specification and are not handled
by CSS either.

The last row represents elements that are still part of the HTML5 specification but have a new
purpose. The table below lists only a few examples of such repurposed elements as well as the
<noscript> element.

Element New Description

Represents words with extra attention like keywords (does not mean increased
<b>
importance or changed voice or mood)
 <i> Represents text with alternative voice or mood

<noscript> Presents fallback markup when scripting is not supported (not used in XML)

<s> Represents contents that are inaccurate or irrelevant

<small> Represents side comments (like small print)

<u> Represents text needing attention like misspellings or Chinese proper name marks

Simplicity: < script >

You no longer need to indicate JavaScript. JavaScript is assumed as the default script type.

Simplicity: charset
<meta http-equiv=”Content-Type” content=”text/html;charset=utf-8” />

Becomes

<meta charset=”utf-8”>

Simplicity: < html >

<html xmlns=http://www.w3.org/1999/xhtml lang+”en”

Xml:lang+”en”>

Becomes

<html>

or

<html lang=”en”>

Now, the lang attribute takes the empty string or by default chooses English, just like xml:lang. Neither
needs to be defined anymore. The xmlns attribute is still allowed in HTML5 but no longer needed.

Simplicity: < doctype >

<!DOCTYPE HTML PUBLIC

‘-//W3C//DTD HTML 4.01//EN”

“http://www.w3.org/TR/html4/strict.dtd’>

Becomes
<!DOCTYPE html>

In order to indicate to browsers that the document uses HTML5, you simply write <!doctype html> to start
the document. This triggers standards mode, which means that long-standing HTML will be interpreted in
an HTML5-compliant way while ignoring unsupported HTML5 code.

Note: HTML5 is not based on SGML (Standard Generalized Markup Language) which required more
information in the <!doctype> element. Therefore, the new simpler version works for HTML5.

< section >

A specific, major portion of a page: introduction, news, enhancements, etc.

The <section> element represents a major portion of a page or article such as news or the introduction.

On the Android blog website, any paragraph with a heading, any group of paragraphs, or even a
picture or a group of pictures could be created inside a <section> element.

< article >

Independent, self-contained information: blog post, search result, article, chapter, slide, ect.

The <article> element represents independent, stand-alone information that is independently

redistributable like a blog post, a chapter, or a news article.

On the Android blog website, each blog entry can be represented with the <article> element.

< header >

The headline or header of a page, section, or article.

The <header> element represents the headline or title of a page, section, or article.

The page heading, the blog posts headings, and any paragraph headings can be represented with
the <header> element on the Android blog website.

< hgroup >

A group of one or more h1-h6 elements – Example: to group a section title and an accompanying
subtitle.

Instructor Notes: Refer to Google’s Android blog website.

<hgroup> is used to group together related heading elements. It can only contain a group of <h1>–
<h6> elements.

On the Android blog website, the multiple-line, multiple-font size headings of the page and the blog
posts can be represented with the <hgroup> element.

Note: Remember there may be no visual difference between using an <hgroup> tag versus a
<header> tag. But semantically there is a difference; In other words, it has a different meaning. When
someone is reading through HTML5 code, it is much more meaningful and helpful to see an <hgroup> tag
and realize that the element contains multiple headings versus reading a <header> tag and assuming it
contains one headline or title. The <header> tag would require the code reader to read inside the element
in order to know there are multiple headings. The <hgroup> tag already carries that meaning and conveys
it to the code reader instantly.

< footer >

The footer of a page, article, or section: copyrights, privacy links, footnotes, related links, etc.

The <footer> element represents information at the bottom of a page, section, or article such as copyright
information, footnotes, or related links.

The copyright and link at the bottom of the Android blog web page can be represented with the
<footer> element.

< nav >

Navigational group usually within a header: navigation links, previous/next page, popular tags, etc.

The <nav> element represents a navigation list for a page such as popular links, previous/ next page, or a
navigation panel for a website.

The navigation panels in the footer of the Android blog web page can be represented with the <nav>
element.

< aside >

A sidebar or information outside main content of page: adverts, quotes, secondary navigations lists, etc.

The <aside> element represents information not directly related to the main content of the page. Good
uses of the <aside> element include quotes, side or secondary navigations, or advertisements.

The social networking links on the side of the Android blog web page can be represented with the
<aside> element.

HTML5 vs. HTML4

Now you can see a comparison between HTML5 and HTML4. It is clear how these new structural
elements give meaning to different parts of the web page compared to the <div> element which offers no
information.

Questions to Consider
Since the presentation slides were created with HTML5, which element do you think is used to create
each slide in the presentation?

Why does your answer make sense?

HTML5 HTML4
<header> <div class=”header”>
 Page title Page title
</header> </div>

<nav> <div class=”navigation”>

Page links Page links
</nav> </div>
<articles> Blog entry #1 <div class=”article”> Blog entry #1 </div>
</article> <div class=”article”> Blog #2 </div>
<article> Blog entry #2
</articles>
<section class=”thought”> <div class=thought”>
Random thoughts Random thoughts
<section> </div>
<footer> <div class=”footer”>
Page copyright Page copyright
</footer> </div>

Browser Support
Browser that don’t recognize tags will:

 Ignore
 Treat as inline tags
 Render content inside tags with no breaks

Best Practice:

Add the following to ensure block level style:

Section, header, nav, article, aside, footer {display: block;}

Remember that you never know what browser a visitor to your web page is using. If it is a browser or a
version of a browser that doesn’t recognize the new HTML5 tags, there could be problems.

Luckily browsers are smart. If a browser doesn’t recognize a tag, it won’t create an error message on
the page. Instead, the browser will ignore the tags, treating it like inline tags. This means it will render the
content inside the tags with no breaks (as if the opening and closing tags were not there). To prevent this
with older browsers, you can add code to ensure the structural elements you choose receive block-level
style.

section, header, nav, article, aside, footer {

display:block;

Lesson 2: HTML5 Semantics

Congratulations - end of lesson reached
Well done!
You have completed 100% of the lesson

Lesson 3: HTML5 Forms

Contents

 Spot the difference!

 HTML5 Forms
 Challenge
 Roadmap
 Lesson 1: Create Forms with New Elements, Types and Attributes
 Introduction to HTML5 Forms
 New Elements, Types and Attributes
 New Elements
 New <input> Types
 New Attributes
 Lesson Summary
 Lesson 2: Validate and Style Your Forms
 Form Validation
 Constraint Validation API
 Constraint Validation API (cont’d)
 Styling Form Fields with CSS3
 Styling Form Fields with CSS3 (cont’d)
 Lesson Summary