Neal Stublen

Content Models  Metadata content Data not necessarily presented on the page ○ title, link, meta, style  Flow content Anything that affects the document’s flow ○ header, footer, p ○ Not script, link, meta  Sectioning content A logical block of content ○ article, aside, nav, section

Content Models  Heading content Section headers ○ h1, h2, etc.  Phrasing content Inline text content ○ em, strong  Embedded content Objects, video ○ img, object, embed  Interactive content Form elements, links

Document Outlines  A document/page outline could be generated from heading tags (h1 to h6)  Title Section A ○ Part 1 ○ Part 2 Section B ○ Part 1

Document Outlines  A document/page outline could be generated from heading tags (h1 to h6)  Title (h1) Section A (h2) ○ Part 1 (h3) ○ Part 2 (h3) Section B (h2) ○ Part 1 (h3)

But Now…  Multiple sections/articles on a page

But Now…  Multiple sections/articles on a page  Each section/article should be able to stand alone with its own headings Search Results Article Title Subtitle

Applying Headings  What headings should we apply to the HTML5 Herald page?

Sectioning Documents  Each “sectioning” element creates a new node in the outline div, section, aside, article  A heading element implies its own “section”

The hgroup element  The heading elements are often used to create subtitles  Not intended to create a new document outline section  hgroup allows headings to be “merged”

Merged Headings Title Subtitle Outline sees: 1. Title 1. Subtitle

Merged Headings Title Subtitle Outline sees: 1. Title

hgroup is Obsolete  Remember HTML5 continues to go through changes  hgroup has been removed from the HTML specification However, it’s still good to know You may find it used in existing websites and you’ll know what it’s supposed to do

The figure element  The figure and figcaption elements provide a way to indicate a figure that supports other content

The mark element  Indicates content that should be highlighted because of its relevance current user activity  Possible example: Search result content  Most likely implemented by a server- side application

The progress element  Used to indicate progress within some defined action max and value attributes  Possible examples: Completing a survey (question x of y)

The meter element  Used to indicate a measurement min, max, and value attributes low, high, and optimal values  Possible examples: Available storage space

The time element  Indicates a specific calendar date, time or timespan datetime attribute  Machine-readable time format Today at 6pm First day of class 1:05 min

time element updates  You might use JavaScript to update the time element’s descriptive text Yesterday Today Tomorrow

Links and Block Elements  Placing block elements within links is now acceptable Block

Bold and Italic Text  Prefer and, not and Intent is to use CSS to control presentation and HTML to control structure  tags can be nested to add further importance  tag indicates “reading emphasis” Look for the big, yellow balloon.

The cite element  Use the cite element when referencing an article, book, TV show, etc. Please subscribe to The HTML5 Herald to continue receiving great articles.

The details element  The details element provides a collapsible area to hide/reveal content

HTML5 Validation  Check markup for conformance to the HTML5 specification