• a revised code set that builds upon HTML4 to add new capabilities.
• has bunch of new elements & attributes that can be accessed through
• adds some important new tags to make audio, video, and application
integration smoother and more reliable. e.g. <audio>, <video>,
• removes support for some of the older tags. <font>, <frame>,
Why Code in HTML5?
• It enables cleaner, easier-to-write code.
• Better rendering on devices that vary in size from mobile phones to huge
• Better images, more interactivity, video, audio, animations, and better support
for various image and file formats
• Clean Document Type <!DOCTYPE html>
• Integration of Audio & Video
• Drag & Drop
• Using the new Elements
• Drawing with Canvas Elements
• Getting Data with New Web Form
• Remember with Browser History
• Edit Pages on the Fly
• Inter document Messaging
• Making use of Web Storage
• Geolocation API
New Web Form Controls
Type Control Type Type Control Type
color A color picker range A slider control
date A date control tel A text field
datetime A date and time control time A time control
email A text field url A text field
month A month control week A week control
number A text field
Block Elements - Headings
• <h1> to <h6>
• The Block Elements <hgroup> is new element to HTML 5
• It allows us to group headings together
• For a heading and sub-heading
• It can only contain <h1> - <h6> elements.
hgroup has now been
removed from the HTML5
The HTML 5 <nav> Element
• HTML 5 introduces a new <nav> element for grouping together hyperlinks.
• NOT all links of a document should be inside a <nav> element.
• The <nav> element is intended only for major block of navigation links.
The HTML5 <video> and <audio> Elements
• HTML5 provides <video> and <audio> elements to easily embed media into a web
• Both elements can feature attributes for controlling playback.
• auto play, preload, looping
• Doesn’t depend on external media players
• Only modern browsers support these elements
The HTML5 <video> Elements
• Different browsers support different video file formats.
• The <video> element can feature nested <source> elements.
• Each source element specifies a different file format.
• The browser uses the format they can play.
The HTML5 <audio> Element
• The <audio> element works in a very similar way to the <video> element.
• Again we need different <source> elements for different browsers.
HTML5 New Form Elements
• HTML 5 provides some new form controls (e.g. date, time, email, etc.) and
attributes (e.g. placeholder, required, etc.).
• Few browsers support all these new features.
• If a browser does not recognize the new input type, it will display a plain text
HTML5 - Attributes
• The autofocus attribute places the user’s cursor in a form control when the
• The placeholder attribute is used to place some descriptive text in a form
• The required attribute means the user has to fill in the form before it gets
sent to the server.
HTML5 – Number Types
• The number type defines a ‘spinbox’.
• The range type defines a ‘slider’.
• The min and max attributes allow us to restrict the numbers that can be
HTML5 – Date Picker
• We can specify a type of date, datetime, month,
week or time.
these features on a web page.
HTML5 – The email and url Types
• These types allow browsers to validate user input.
• Check the user has entered a valid email address/URL
• Useful for smart phones
• Dynamically changes the keyboard for the input type.
• The keyboard features the @ symbol when the input type is email.
New HTML5 Semantic Elements
• Semantic elements = Elements with meaning.
• <div>, <span> tell nothing about content.
• HTML 5 features new semantic elements we can use instead of the <div>.
• CSS3 is the latest standard for CSS.
• CSS3 specification is still under development by W3C.
• Some important CSS3 modules are :
2. Text Effects
CSS3 Media Queries
• Media Queries is a CSS3 module allowing content rendering to adapt to
conditions such as screen resolution (e.g. smartphone vs. high definition
• CSS 3 extends the concept of media queries.
• Provide different style sheets based on screen resolution.