CS 50.12 HTML 5 :: Interactive Web Pages

HTML5 Documents

Read Chapters 1 and 2 in our textbook

watch video of class demonstration

Code Examples

Converting an XHMTL file to a HTML5 document

Step 1 :: Here is the, original XHTML file

Step 2 :: Create an HTML5 document which uses <header>,<nav> and <footer>

Step 3 :: Style the main content div using <section>, <article>, <aside> with some CSS added.

Step 4 :: Refine the code with the use of <hgroup>,<time>, <fig>, <figcaption> elements & the datetime and pubdate attributes.

Outline Model

HTML5 standard inclued an "outline algorithm" which provides a way for how the browser to display "sectioning elements" as a page outline. This is useful for screen readers and if you publish your content in multiple locations.

Sectioning Tags, Elements:

<article>, <aside>, <section>, <nav> <h1-6>

The first heading tag <h1.....h6> will create the title of a section, the remaining headings will create sub sections.

Currently no browser supports the outline algorithm so you can use this site to simulate an outline.

http://gsnedders.html5.org/outliner/

Simple Outline Sample :: Complex Outline Sample

Revised Content Model

In the old days elements where either inline, block. XHTML required us to place all content within blocklevel elements. Well that model has been abandoned and we now have 7 content model categories:

Metadata :: content that sets up the presentation, behavior of the rest of the data, they are often in the <head> of the document.
Element >> base, command, link, meta, noscript, script, style, title

Embedded :: any content that imports other resources into the document
Element >> audio, canvas, embed, iframe, img, math, object, svg, video

Interactive :: any content specifically intended to have user interaction
Element >> a, audio, button, detail, embed, iframe, img, input, keygen, label, menu, object, select, textarea, video.

Heading :: defines the header of a section
Elements >> h1......h6 , hgroup

Phrasing :: the text of the document, as well as elements used to markup the text within paragraph level structures.
Elements >> a abbr area audio b bdi bdo br button canvas cite code command datalist del (if it contains only phrasing content) dfn em embed i iframe img input ins (if it contains only phrasing content) kbd keygen label link (if the itemprop attribute is present) map (if it contains only phrasing content) mark math meta (if the itemprop attribute is present) meter noscript object output progress q ruby s samp script select small span strong sub sup svg textarea time u var video wbr

Flow :: all elements that would be included in the normal flow of the document. (almost all HTML5 tags) . If it can be placed inthe body tag it is a flow content element. Flow does not control the way it is displayed (not like the old inline, block elements)
Elements >> a abbr address area (if it is a descendant of a map element) article aside audio b bdi bdo blockquote br button canvas cite code command datalist del details dfn div dl em embed fieldset figure footer form h1 h2 h3 h4 h5 h6 header hgroup hr i iframe img input ins kbd keygen label link (if the itemprop attribute is present) map mark math menu meta (if the itemprop attribute is present) meter nav noscript object ol output p pre progress q ruby s samp script section select small span strong style (if the scoped attribute is present) sub sup svg table textarea time u ul var video wbr

Sectioning :: the scope of headings and footers (this definition has me totally baffled :->)
Elements >> article, aside, nav, section

Tags can be in more than one type of content.

Here is a Venn Diagram of the new model