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 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
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 http://validator.w3.org/