HTML5
HTML5 Overview
This topic is a mash-up of HTML5 information particularly as it pertains to using the WYSIWYG
Editor in OU Campus. It also contains references to source material from both the W3C and the
WHATWG organization, which includes references to the both previous versions of HTML/XHTML,
the working version of HTML5, and the changes that have taken place. Specifications in place
include:
W3C Main Site: http://www.w3.org/
W3C HTML 5.1 Nightly: The editor’s draft of HTML5, but this is not necessarily stable nor
converged with WHATWG version of HTML5. This page notes:
Implementers should be aware that this specification is not stable. Implementers
who are not taking part in the discussions are likely to find the specification
changing out from under them in incompatible ways.
Source: http://www.w3.org/html/wg/drafts/html/master/Overview.html#contents
HTML5 differences from HTML4 (W3C Working Draft 25 October 2012): http://www.w3.org/TR/
html5-diff/
HTML5 11 Obsolete features: http://www.w3.org/TR/html5/obsolete.html
WHATWG HTML Living Standard: http://www.whatwg.org/specs/web-apps/current-work/
multipage/
The WHATWG Wiki: http://wiki.whatwg.org/wiki/
CSS for presentational elements: http://wiki.whatwg.org/wiki/
Presentational_elements_and_attributes
HTML5 Format Drop-Down
HTML5 schema can be enabled for WYSIWYG by a Level 10 administrator on a site by site
basis. Care should be taken before flipping the switch as the WYSIWYG removes elements and
attributes that are invalid in HTML5. The non-HTML5 schema includes both XHTML and HTML5
elements, but the newly integrated HTML5 elements are not available on the Format menu. For
more information about enabling HTML5 schema:
Site Setup
Once HTML5 schema is enabled the Format drop-down includes additional HTML5 specific
elements. The following table lists the elements available on the Format drop-down, and includes
the HTML markup that is written by the WYSIWYG and a brief description about usage of the
element.
OU Campus
HTML5
Page 1 of 12
HTML5 Schema Reference
Element/HTML
Content Categories
Description
Paragraph
<p></p>
Flow content
Adds the paragraph element for
the text.
Heading 1 through Heading 6
<h1></h1>
<h2></h2>
...
<h6></h6>
Flow content, heading content
Applies any one of the standard
H1–H6 headings.
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Preformatted
<pre></pre>
Flow content
Sets the selected paragraph
format to the style for
preformatted text, such as that
used for code snippets. For
example:
<article>
<h1>Apples</h1>
<h2>Tasty, delicious
fruit!</h2>
<p>The apple.</p>
<section>
<h1>Red Delicious</h1>
<p>These bright red
apples.</p>
</section>
<section>
<h1>Granny Smith</h1>
<p>These make a great
filling.</p>
</section>
</article>
Address
<address></address>
OU Campus
Flow content
HTML5
In the context of the semantic
web, the address element
can be used in the context
where flow content is expected.
It is categorized as flow
content within the content
model, but with no heading
Page 2 of 12
Element/HTML
Content Categories
Description
content descendants,
no sectioning
content descendants,
and no header, footer,
or address element descendants.
“The address element represents th
contact
information
for its
nearest article or body element
ancestor. If
that is the body
element, then
the contact
information
applies to the
document as a
whole.”
Source: http://www.w3.org/
html/wg/drafts/html/master/
sections.html#the-addresselement
Block Quote
<blockquote>
</blockquote>
Flow content
Adds the blockquote element.
According to the specification
the blockquote is not limited
to strictly quoting, but can
be used in conjunction with
other elements such as figure,
figcaption, cite, and even with
article in a forum post. The
following quote and other quotes
in this section use the blockquote
element:
“The blockquote element represent
section that is
quoted from
another source.
Content inside
a blockquote must
be quoted from
another source,
whose address,
if it has one,
may be cited in
the cite attribute.”
OU Campus
HTML5
Page 3 of 12
Element/HTML
Content Categories
Description
Source: http://www.w3.org/html/
wg/drafts/html/master/groupingcontent.html#the-blockquoteelement
And for example, with the use of
cite:
<p>His next piece was
the
aptly named
<cite>Sonnet 130</
cite>:</p>
<blockquote
cite="http://
quotes.example.org
/s/sonnet130.html">
<p>My mistress' eyes are
nothing like the
sun,<br>
Coral is far more red,
than her lips red,<br>
Section
<section>
</section>
Sectioning content, flow content
OU Campus
HTML5
Adds the section element.
“The section
element is
not a generic
container
element. When
an element is
needed only
for styling
purposes or as
a convenience
for scripting,
authors are
encouraged
to use the
div element
instead. A
general rule is
that the section
element is
appropriate
only if the
element's
contents
Page 4 of 12
Element/HTML
Content Categories
Description
would be listed
explicitly in the
document's
outline.”
Source: http://www.w3.org/
html/wg/drafts/html/master/
sections.html#the-sectionelement
Example:
<section>
<h1>Granny Smith</h1>
<p>These juicy, green
apples.</p>
</section>
Article
<article>
</article>
Sectioning content, flow content
Adds the article element. The
following example includes incontext examples for article,
paragraph, and section:
<article> <h1>Apples</
h1> <h2>Tasty, delicious
fruit!</h2> <p>The
apple.</p> <section>
<h1>Red Delicious</h1>
<p>These bright.</p>
</section> <section>
<h1>Granny Smith</h1>
<p>These make pies.</p>
</section> </article>
“The article element represents a
complete, or
self-contained,
composition in
a document,
page,
application, or
site and that
is, in principle,
independently
distributable or
reusable, e.g.,
in syndication.
This could be
OU Campus
HTML5
Page 5 of 12
Element/HTML
Content Categories
Description
a forum post,
a magazine
or newspaper
article, a blog
entry, a usersubmitted
comment, an
interactive
widget or
gadget, or
any other
independent
item of
content.”
Source: http://www.w3.org/
html/wg/drafts/html/master/
sections.html#the-article-element
DIV
<div></div>
OU Campus
Flow content
Adds the div element:
“The div
element has
no special
meaning at all.
It represents
its children. It
can be used
with the class,
lang, and
title attributes
to mark up
semantics
common to
a group of
consecutive
elements.
Authors are
strongly
encouraged
to view the div
element as
an element
of last resort,
for when no
other element
is suitable.
Use of more
appropriate
HTML5
Page 6 of 12
Element/HTML
Content Categories
Description
elements
instead of the
div element
leads to better
accessibility
for readers
and easier
maintainability
for authors.”
Source: http://www.w3.org/html/
wg/drafts/html/master/groupingcontent.html#the-div-element
aside
<aside>
</aside>
Sectioning content, Flow content
The aside element is intended
for related content of the main
content. Examples of usage
might include background
material within a longer news
story, a quote within a longer
article, or even for blogrolls or
side content on a blog.
“The aside element represents a
section of
a page that
consists of
content that
is tangentially
related to the
content around
the aside
element, and
which could
be considered
separate from
that content.
Such sections
are often
represented
as sidebars
in printed
typography.
“The element
can be used for
typographical
effects like
pull quotes or
OU Campus
HTML5
Page 7 of 12
Element/HTML
Content Categories
Description
sidebars, for
advertising,
for groups
of nav elements,
and for other
content that
is considered
separate
from the main
content of the
page.”
Source: http://www.w3.org/
html/wg/drafts/html/master/
sections.html#the-aside-element
figure
<figure>
</figure>
Flow content
Code example:
<figure> <img
src="bubbles-work.jpeg"
alt="Bubbles, sitting in
his
office chair, works on
his
latest project
intently.">
<figcaption>Bubbles at
work
</figcaption> </figure>
Additionally, the ability to show or hide the labeling and demarcation of the elements can be
toggled from the WYSIWYG Toolbar. To view the labeling, click the Show/Hide Block Elements
icon:
or
Choosing to show the elements presents a view in the Editor that includes dashed lines and labels
for the element.
OU Campus
HTML5
Page 8 of 12
HTML5 Highlights
The following list of highlights was gleaned from a w3.org document that expresses the differences
between HTML 4.01 and HTML5. Note that the HTML5 Difference from HTML4 is currently a
working draft and as such the document is considered a work in progress and the information
outlined below is subject to change as the HTML5 specification evolves.
Source: http://www.w3.org/TR/html5-diff/
HTML 4.01 to HTML5 Change Highlights
•
•
•
•
•
•
•
The doctype declaration for the HTML syntax is <!DOCTYPE html> and is case-insensitive.
Void elements (known as "EMPTY" in HTML4) are allowed to have a trailing slash.
Addition of new elements
Addition of new attributes
Many changed elements
Many changed attributes
Several obsolete elements (Not to be used by authors, but user agents will still have to support
them.)
• Several obsolete attributes
• Conceptual change to the content model: “HTML5 does not use the terms ‘block-level’ or
‘inline’ as part of its content model rules, to reduce confusion with CSS. However, it has more
OU Campus
HTML5
Page 9 of 12
categories than HTML4, and an element can be part of none of them, one of them, or several of
them.”
• HTML5 has introduced many new APIs and have extended, changed or obsoleted some
existing APIs.
• Several attributes from HTML4 now apply to all elements. These are called global attributes:
accesskey, class, dir, id, lang, style, tabindex and title.
HTML5 also makes all event handler attributes from HTML4, which take the form onevent, global
attributes, and adds several new event handler attributes for new events it defines. For instance,
the onplay event handler attribute for the play event which is used by the API for the media
elements (video and audio).
More specific differences include:
• Many changes in meaning to existing items to more accurately reflect use. For example, "The
strong element now represents importance rather than strong emphasis."
• The border attribute on table only allows the values "1" and the empty string. In WHATWG
HTML, the border attribute is obsolete.
• The event handler attributes (e.g. onclick) now always use JavaScript as the scripting language.
• The style global attribute now always uses CSS as the styling language.
• The target attribute of the a and area elements is no longer deprecated, as it is useful in Web
applications, e.g. in conjunction with iframe.
• The border attribute on img. It is required to have the value "0" when present. Authors can use
CSS instead.
• The language attribute on script. It is required to have the value "JavaScript" (case-insensitive)
when present and cannot conflict with the type attribute. Authors can omit it as it has no useful
function.
• The name attribute on a. Authors can use the id attribute instead.
Obsolete Attributes
Some attributes from HTML4 are no longer allowed in HTML5. The specification defines how user
agents should process them in legacy documents, but authors must not use them and they will not
validate.
The WHATWG has advice on what to can use instead:
•
•
•
•
rev and charset attributes on link and a
shape and coords attributes on a
longdesc attribute on img and iframe
target attribute on link
• nohref attribute on area
•
•
•
•
•
profile attribute on head
version attribute on html
name attribute on img (use id instead)
scheme attribute on meta
archive, classid, codebase, codetype, declare and standby attributes on object
OU Campus
HTML5
Page 10 of 12
•
•
•
•
valuetype and type attributes on param
axis and abbr attributes on td and th
scope attribute on td
summary attribute on table
In addition, HTML5 has none of the presentational attributes that were in HTML4 as their functions
are better handled by CSS:
• align attribute on caption, iframe, img, input, object, legend, table, hr, div, h1, h2, h3, h4, h5, h6,
p, col, colgroup, tbody, td, tfoot, th, thead and tr.
• alink, link, text and vlink attributes on body.
•
•
•
•
•
background attribute on body.
bgcolor attribute on table, tr, td, th and body.
border attribute on object.
cellpadding and cellspacing attributes on table.
char and charoff attributes on col, colgroup, tbody, td, tfoot, th, thead and tr.
• clear attribute on br.
•
•
•
•
•
•
•
•
•
•
•
•
•
•
compact attribute on dl, menu, ol and ul.
frame attribute on table.
frameborder attribute on iframe.
height attribute on td and th.
hspace and vspace attributes on img and object.
marginheight and marginwidth attributes on iframe.
noshade attribute on hr.
nowrap attribute on td and th.
rules attribute on table.
scrolling attribute on iframe.
size attribute on hr.
type attribute on li, and ul.
valign attribute on col, colgroup, tbody, td, tfoot, th, thead and tr.
width attribute on hr, table, td, th, col, colgroup and pre.
For more information about HTML5:
HTML5 Primer
For even more information about HTML5:
To get a badge:
OU Campus
HTML5
Page 11 of 12
OU Campus
HTML5
Page 12 of 12