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.
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.
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 rests on eight foundations:

Semantics

Offline & Storage

Device Access

Connectivity

MultiMedia

3D & Effects

Performance & Integration

CSS3 & Styling

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 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.

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.


Canvass

CSS3

SVG

WebGL

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.


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.

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.

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.

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.
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.

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.
 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.
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.
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.”
Well done!
You have completed 100% of the lesson
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

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
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”.
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.
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!

Learn the new and obsolete HTML elements

Structure your page with new elements

Complete the Challenge: Create the structure for your restaurant finder app!

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.
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?
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>
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.

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
<article>
Description
Defines an independent section of writing
<aside>
<footer>
<header>
<hgroup>
<nav>
<section>
<bdi>
Defines info separate from main content
Defines bottom information of page or article
Defines a headline
Defines a group of headlines
Defines a navigation list
Defines a major portion of a page or article
Indicates text selected for separate formatting
<command>
<details>
<mark>
<summary>
<ruby>
<rt>
<rp>
Defines a command button
Defines extra info that can be hidden
Defines highlighted text
Defines headline for a <details> element
Defines Ruby notation for East Asian alphabets
Defines pronunciation and explanation for some East Asian characters
Defines what to display for browsers without Ruby support
<time>
<wbr>
Defines date and time
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
<source>
Defines multimedia resources for <audio> and <video> elements
<embed>
<track>
<figure>
Defines container for a plug-in or external application
Defines text tracks for <audio> or <video> elements
Defines image content
<figcaption>
<canvas>
Forms Elements:
<datalist>
Defines a caption for a <figure> element
Creates graphics using scripting language entry of a form
Defines options for field
<keygen>
<output>
Defines a field to generate key-pairs for forms
Defines a calculation result
<progress>
<meter>
Indicates progress on a task
Defines a scalar measure or gauge
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
<b>
New Description
Represents words with extra attention like keywords (does not mean increased importance or changed voice or mood)

<i>
<noscript>
<s>
<small>
<u>
Represents text with alternative voice or mood
Presents fallback markup when scripting is not supported (not used in XML)
Represents contents that are inaccurate or irrelevant
Represents side comments (like small print)
Represents text needing attention like misspellings or Chinese proper name marks
You no longer need to indicate JavaScript. JavaScript is assumed as the default script type.
<meta http-equiv=”Content-Type” content=”text/html;charset=utf-8” />
Becomes
<meta charset=”utf-8”>
<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.
<!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.
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.
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.
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.
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.
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.
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.
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.
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
<header>
HTML4
<div class=”header”>

Page title
</header>
<nav>
Page links
</nav>
<articles> Blog entry #1
</article>
<article> Blog entry #2
</articles>
<section class=”thought”>
Random thoughts
<section>
<footer>
Page copyright
</footer>
Page title
</div>
<div class=”navigation”>
Page links
</div>
<div class=”article”> Blog entry #1 </div>
<div class=”article”> Blog #2 </div>
<div class=thought”>
Random thoughts
</div>
<div class=”footer”>
Page copyright
</div>
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;
}

Well done!
You have completed 100% of the lesson
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