Introduction to
HTML5
• What is New in HTML5?
The DOCTYPE declaration for HTML5 is very simple:
• <!DOCTYPE html>
The character encoding (charset) declaration is also
very simple:
• <meta charset="UTF-8">
• The default character encoding in HTML5 is UTF-
8. (U from Universal Character Set +
Transformation Format—8-bit)
Example
New HTML5 Elements
• 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>.
HTML5 Browser Support
• In addition, all browsers, old and new,
automatically handle unrecognized elements
as inline elements.
Define Semantic Elements as Block Elements
• HTML5 defines eight new semantic elements.
• All these are block-level elements.
• To secure correct behavior in older browsers,
you can set the CSS display property for these
HTML elements to block:
header, section, footer, aside,
nav, main, article, figure {
display: block;
}
Add New Elements to HTML
• You can also add new elements to an HTML
page with a browser trick.
• This example adds a new element
called <myHero> to an HTML page, and
defines a style for it:
• Ex1
Syntax For HTML5Shiv
• The HTML5Shiv is placed within
the <head> tag.
• The HTML5Shiv is a javascript file that is
referenced in a <script> tag.
• You should use the HTML5Shiv when you are
using the new HTML5 elements such
as: <article>, <section>, <aside>, <nav>, <foote
r>.
Syntax:
• <head>
<!--[if lt IE 9]>
<script src="/js/[Link]"></script>
<![endif]-->
</head>
• Example
New Elements in HTML5
• New Semantic/Structural Elements
• HTML5 offers new elements for better document structure:
HTML5 - New Attribute Syntax
• This example demonstrates the different syntaxes
used in an <input> tag:
• Type Example
• Empty<input type="text" value="John" disabled>
• Unquoted <inputtype="text" value=John>
• Double-quoted <inputtype="text" value="John
Doe">
• Single-quoted <input type="text" value='John
Doe'>
• In HTML5, all four syntaxes may be used,
depending on what is needed for the attribute.
HTML5 Graphics
HTML5 Semantic Elements
• Semantics is the study of the meanings of
words and phrases in a language.
• Semantic elements = elements with a
meaning.
• What are Semantic Elements?
• A semantic element clearly describes its
meaning to both the browser and the
developer.
• Examples of non semantic elements:
<div>
<span> - Tells nothing about its content.
• Examples of semantic elements:
<form>,
<table>,
<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.“
• A home page could normally be split into
sections for introduction, content, and contact
information.
• Ex:
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.
• Examples of where an <article> element can be used:
• Forum post
• Blog post
• Newspaper article
• Ex
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.
• Ex
HTML5 <footer> Element
• The <footer> element specifies a footer for a
document or section.
• A <footer> element should contain information
about its containing element.
• A footer typically contains the author of the
document, copyright information, links to
terms of use, contact information, etc.
• You may have several <footer> elements in one
document. Ex
HTML5 <nav> Element
• The <nav> element defines a set of navigation
links.
• Notice that NOT all links of a document should
be inside a <nav> element. The <nav> element
is intended only for major block of navigation
links.
• Ex
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.
• EX
HTML5 <figure> and <figcaption> Elements
• The purpose of a figure caption is to add a
visual explanation to an image.
• In HTML5, an image and a caption can be
grouped together in a <figure> element:
• Ex
<Video> tag
• The <video> tag specifies video, such as a
movie clip or other video streams.
• Currently, there are 3 supported video formats
for the <video> element: MP4, WebM, and
Ogg:
• Any text between the <video> and </video>
tags will be displayed in browsers that do not
support the <video> element.