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.

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>

Flow content

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 content descendants, no sectioning content descendants, and no header, footer, or address element descendants.

“The address element represents the 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-address-element

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 represents a 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.”

Source: http://www.w3.org/html/wg/drafts/html/master/grouping-content.html#the-blockquote-element

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

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 would be listed explicitly in the document's outline.”

Source: http://www.w3.org/html/wg/drafts/html/master/sections.html#the-section-element

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 in-context 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 a forum post, a magazine or newspaper article, a blog entry, a user-submitted 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>

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 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/grouping-content.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 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: Show/Hide Block Element Icon or JustEdit Icon

Choosing to show the elements presents a view in the Editor that includes dashed lines and labels for the element.

Example of Block Elements


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 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:

In addition, HTML5 has none of the presentational attributes that were in HTML4 as their functions are better handled by CSS:

For more information about HTML5:

HTML5 Primer

For even more information about HTML5:

HTML5 Powered with Connectivity / Realtime, CSS3 / Styling, Device Access, Graphics, 3D & Effects, Multimedia, Performance & Integration, Semantics, and Offline & Storage

 To get a badge:

HTML5 Powered