Scribd
Upload
11 views

FU_Lecture_HTML5_01

The document provides an overview of HTML5, detailing its simplified syntax, new elements, and enhanced functionalities such as multimedia support and offline storage. It outlines the evolution of HTML from its inception to HTML5 and emphasizes the importance of semantic meaning in web content. Additionally, it introduces new structural elements like <header>, <nav>, <article>, and <footer>, explaining their roles and usage in modern web development.

Uploaded by

Chị Anh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
11 views

FU_Lecture_HTML5_01

The document provides an overview of HTML5, detailing its simplified syntax, new elements, and enhanced functionalities such as multimedia support and offline storage. It outlines the evolution of HTML from its inception to HTML5 and emphasizes the importance of semantic meaning in web content. Additionally, it introduces new structural elements like <header>, <nav>, <article>, and <footer>, explaining their roles and usage in modern web development.

Uploaded by

Chị Anh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 30

HTML5

Agenda

 Simplified and Loose Syntax

 New Elements and Attributes

 Embedded Media

 Canvas

 Offline Storage

 Drag and Drop


Agenda

 Geo-Location

 New Selector

 Decorations

 New Column Layout

 Transformation (Rotate, Resize…etc)

 Animation (Fade In/Fade Out)


History
1991 HTML
1994 HTML 2
1996 CSS 1 + JavaScript
1997 HTML 4
1998 CSS 2
2000 XHTML 1
2002 Tableless Web Design
2005 AJAX
2009 HTML 5
Introduction

HTML5 ~= HTML + CSS + JS


Simplified and Loose Syntax
HTML5 has many features which you’ve likely heard about or seen in
various blog posts. With all of the publicity HTML5 has begun to hold weight
as a marketing term and businesses are paying attention. In the near future
we’ll see businesses want to leverage HTML5 to send a message that they are
innovative and competitive.
Unfortunately many of the HTML5 features are not fully implemented
in the newest versions of modern browsers. Older browsers lack any HTML5
support. This leaves us with a key question: “To what extent can I use HTML5
inside my enterprise application?”
Simplified and Loose Syntax
All of the techniques that are shown in this section (DOCTYPE,
Encoding, Script, Style, and Link) work in current and past browsers. Only
use the old syntax if you have a specific reason to do so.
 Simplified DOCTYPE

<!DOCTYPE html>
 Simplified Encoding

<meta charset="utf-8">
 Simplified Script, Style, and Link elements
<link rel="stylesheet" href="site.css" />
<style> h1 { color: red; } </style>
<script src="common.js"></script>
New or Enhanced Functions In HTML5
• Improved semantics • Video and audio
• Forms • Web sockets
• Canvas drawing • Geolocation (not strictly part of
HTML5, but being developed in
• Drag and drop conjunction with it)
• Local storage
• History
• Page to page messaging
• Microdata
• Desktop notifications
New or Enhanced Functions In HTML5
• HTML5 is not just about interactive creations with JavaScript APIs and
video/audio coolness. There are more than 20 new elements designed to
help you author your webpages, adding semantics to deliver more
accessible, reusable content.
• Later on we’ll examine new HTML5 form controls and multimedia
elements, but for now we’ll focus on the basics of creating a basic website
template with the new elements.
• The basic page structure as defined by HTML5 appears on the next page
Basic Page Structure
<header>

<nav>

<aside>
<article>

<section>

<section>

<section>

<footer>
New Structural Elements In HTML5
• We’ve already seen some basic HTML5 pages in the introductory sets of
notes, we’ll do a quick review of the basic markup in an HTML5
document and clarify the differences from the older versions and what is
and is not required in HTML5.
• The doctype should be the very first line in an HTML document. Called a
Document Type Definition (DTD), the doctype is a web standard’s
requirement and it tells the browser how to process the document, which is
why it must be the first thing in HTML document.
• The next page shows the old style XHTML doctype and the new HTML5
doctype.
New Structural Elements In HTML5
XHTML Strict 1.0 doctype:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

HTML5 doctype:
<!doctype html>
New Structural Elements In HTML5
The first line you should include inside the head of an HTML5 document is the
charset declaration, which tells the browser how the document should be
interpreted; in this case, you want to send it an HTML document.
In XHTML, this looked like this:
<meta http-equiv=“Content-Type” content=“text/html”; charset=utf-8”>
In HTML5, it is again, much simpler, and looks like this:
<meta charset=“utf-8” />
New Structural Elements In HTML5
HTML5 helps you to reduce the amount of markup from your pages, and calls to
JavaScript and CSS links are also reduced in size.
In XHTML, they looked like this:
<script type=“text/javascript” src=“myscript.js”> </script>
<link rel=“stylesheet” type=“text/css” href=“mystyles.css” />
In HTML5, they’re again much simpler, and look like this:
<script src=“myscript.js”></script>
<link rel=“stylesheet” href=“mystyles.css” />
New Structural Elements In HTML5
You can markup in either lowercase, or uppercase, or a combination of the two.
You can markup with either quotation marks on attribute values, or omit
quotation marks on attribute values, or a combination of the two.
For void elements, such as a <link> element, you can omit the closing slash or
include it.
All below are equivalent:
<link rel=“stylesheet” href=“mystyles.css” />
<LINK REL=“STYLESHEET” HREF=“MYSTYLES.CSS” />
<liNK reL=“styleSHEET” href=mystyles.css>
New Structural Elements In HTML5
In 2005, Google analyzed more than 1 billion web pages to find out what
class names were being used by developers and web authors. This provided
the basis for the new elements in HTML5.
The following are the 20 most popular class names at the time:
footer menu Title Small Text
Content Header Nav Copyright Button
Main Search Msonormal Date Smalltext
Body Style1 Top White link

Although several of these items are presentational (for example, white, style1,
msnormal), the others make up the elements included in the HTML5
specification.
New Structural Elements In HTML5
So why use these new elements?
HTML5 allows you to give your content semantic meaning, so, for example, if
you have navigation on your page, you can use the nav element because that
element provides meaning to its content.
As an example, let’s start at the top of a “typical” web page. The header element
is often the first thing on a web page, and it usually contains things like a logo,
the website name, or the main site navigation.
Things like a search form or a table of contents are also often included in the
header element.
New Structural Elements In HTML5
The HTML5 specification states that the <header> element can contain
navigation aids, but it is also possible for the navigation aids to be placed outside
of the <header>.
You are also not restricted to just a single <header> elements per page, and it
does not have to be at the top of a page.
You cannot place a <header> inside a <footer>, <address>, or another <header>
element.
The markup example on the next page illustrates this concept.
New Structural Elements In HTML5
The <hgroup> element allows you to add further information to your
<header> elements.
This element is used to group more than one related h1-6 headings. It can
contain only <h1>…<h6> elements. If your site has a subheading or a
tagline, you would use this element to group them together.
Although it is a useful grouping option, the <hgroup> element is primarily
intended to tell the document outline (we’ll learn about this later) which of
the headings is the most important. In the example, on the next page, the
document outline will exclude all headings within the hgroup except the
highest one, which in this case, is the h1 heading.
As you can see in the markup, the h2 heading is relevant to the h1 heading,
and so on, so the use of the hgroup makes sense. If you have a single
heading element, there would be no need to use the hgroup.
New Structural Elements In HTML5
The <nav> element, as you might expect from it name, is for navigational
content. It is used to link to other pages within the site or to other parts of
the page, like a table of contents, for example.
The most common use of a <nav> element is for the main navigation on a
website. It is common practice to use an unordered list to code navigation
content.
The following page illustrates both the traditional way of marking up
navigation and the way to do this in HTML5. Notice that there isn’t much
difference between the two, but it is profound from a semantic point of
view.
New Structural Elements In HTML5
<ul id=“nav”>
<li><a href=“#”>Home</a> </li>
<li><a href=“#”>About</a> </li>
<li><a href=“#”>News</a> </li>
<li><a href=“#”>Contact Us</a> </li>
</ul>

Traditional Way of Marking Up Navigational Content

<nav>
<ul>
<li><a href=“#”>Home</a> </li>
<li><a href=“#”>About</a> </li>
<li><a href=“#”>News</a> </li>
<li><a href=“#”>Contact Us</a> </li>
</ul>
</nav>

Navigational Content Markup In HTML5 Using <nav> Element


New Structural Elements In HTML5
As the example on the next page illustrates, the <nav> element can also be
placed in the <header> element. In HTML5 the <header> element allows
for introductory and navigational content.
Navigational content does not have to be placed in a <header> element, and
sometimes its placement might depend more on styling issues.
It is quite common to see a navigation menu in the footer of a page,
sometimes duplicating the main site navigation.
New Structural Elements In HTML5
• There is a big accessibility win when using the <nav> element. Assistive
technologies such as screen readers, will be able to search and
immediately use groups of navigation rather than waiting for them to
appear on screen.
• Traditionally, developers have used “skip” or “jump” links of the very first
things in an HTML document, and they are usually links to other main
navigation or main content.
• However, using the <nav> element means that developers will be able to
drop such “skip” menus.
• The only problem at the moment is that most assistive technologies have
limited support for HTML5 elements.. However, they will soon catch up.
New Structural Elements In HTML5
• The <article> element and the <section> element (discussed later) are
arguably the two most important new HTML5 structural elements.
However, they are also two of the more confusing new elements.
• The <article> element is an independent block of content; it is content
that could exist in its own right and content that is reusable.
• Consider content you see in an RSS feed; the content is nearly always
individual articles. You could take them out of the feed, and they make
sense on their own.
• The HTML5 specification suggests some examples of how an article
element can be used, such as a forum post, a magazine or newspaper
article, a blog entry, or a user-submitted comment.
New Structural Elements In HTML5
• The <section> element is an area of content or an area of a page that
nearly always requires a heading. It should be used to group an entire
“section” of content. A section can be broken down into further sections if
required.
• It is not to be used as a general wrapper for styling purposes (i.e., a <div>
element).
• A <section> element can contain <article> elements, and <article>
elements can have their content split into multiple <section> elements.
• Before we look at an example using these new elements, we’ll consider a
couple of related new structural element, the <aside> element and the
<footer> element.
New Structural Elements In HTML5
• The <aside> element is for a group of content that is “tangentially” related
to its surrounding content, such as a list of most popular posts, blog
categories, or recent comments. This type of content is related to the main
page content, but it is also separate from it.
• In current web development, it is common for there to be a “sidebar” on
the page. This does not necessarily mean that it is physically on the side
of the page, but it often contains things such as related links or a list of
categories.
• The correct use of the <aside> element depends on where you put it. If it
is inside an article, the <aside> content should tangentially relate to the
article content, such as a glossary. If the <aside> is is outside of an article
or section, its content must be related to the page, such as related links, the
site owner’s Twitter feed, etc.
New Structural Elements In HTML5
• The <footer> element, as its name suggests, is typically located
at the bottom of the page. However, that is not always the case,
although the it will often be found there.
• The <footer> element is intended for content about its section,
including information about the author or site owner, copyright
data, and site terms and conditions.
• If a <footer> element is inside an <article> or <section>, it could
contain the date the article was published, tags, categories, and
other metadata.
• The HTML5 specification suggests a solution to a very common
web element: the copyright notice on a page:
<footer> <small>&copy; Copyright MJL 2012</small> </footer>
New Structural Elements In HTML5
• The previous example of the copyright would most likely be located just
before the closing </body> tag. Notice how the use of the <small> tag is
recommended.
• Like the <header> element, you can use a <footer> element more than
once per page.
• You can put a <footer> element inside an <article> element.
• The following example builds a page with many aspects of the <article>,
<section>, <aside>, and <footer> elements utilized.
New Structural Elements In HTML5
<article>

<header>
<nav>

<section>

<section> <aside>
<footer>

<article>

<header>
<nav>

<section>

<section> <aside>
<footer>
New Structural Elements In HTML5
• The next few pages present an example webpage that utilizes all of the
new HTML5 structural elements that were presented in this set of notes.
• The page that is created represents a layout for a news page. It includes
some basic CSS to position the various elements, but I didn’t include
anything too advanced as far as the CSS is concerned; we’ll get more into
that later.
• Since the markup is fairly long, I’ve abbreviated some of the more
repetitive parts here. The full markup is available on the course website.

You might also like