HTML5 and CSS3

1. Neal Stublen nstublen@jccc.edu HTML5 and CSS3

2. Chapter 3More HTML5 Semantics

3. Applying Headings • What headings should we apply to the HTML5 Herald page?

4. Content Models • Metadata content • Document title, author, etc. • Data not necessarily presented on the page • Flow content • Anything that affects the document’s flow (not the script, link, meta tags) • Sectioning content • A logical block of content

5. Content Models • Heading content • Section headers (e.g. h1, h2, etc.) • Phrasing content • Inline text content • Embedded content • Objects, video • Interactive content • Form elements, links

6. 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

7. But Now… • Multiple sections/articles on a page • Each section/article should be able to stand alone with its own headings <section> <h1>Search Results</h1> <article> <h1>Article Title</h1> <h2>Subtitle</h2>

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

9. 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”

10. Merged Headings <h1>Title</h1> <h2>Subtitle</h2> Outline sees: 1. Title 1. Subtitle

11. Merged Headings <hgroup> <h1>Title</h1> <h2>Subtitle</h2> </hgroup> Outline sees: 1. Title

12. Applying Headings Again • How should we modify the headings on the HTML5 Herald page?

13. The figure element • The figure and figcaption elements provide a way to indicate a figure that supports other content

14. 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

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

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

17. The time element • Indicates a specific calendar date, time or timespan • datetime attribute • Machine-readable time format <time datetime=“2014-06-23T18:00:00-6:00”>Today at 6pm</time> <time datetime=“2014-06-23”>First day of class</time> <time datetime=“P65S”>1:05 min</time>

18. time element updates • You might use JavaScript to update the time element’s descriptive text <time datetime=“2014-06-22”>&nbsp;</time> <time datetime=“2014-06-23”>&nbsp;</time> <time datetime=“2014-06-24”>&nbsp;</time> <time datetime=“2014-06-22”>Yesterday</time> <time datetime=“2014-06-23”>Today</time> <time datetime=“2014-06-24”>Tomorrow</time>

19. Links and Block Elements • Placing block elements within links is now acceptable <a href=“#”><div>Block</div></a>

20. Bold and Italic Text • Prefer <strong> and <em>, not <b> and <i> • Intent is to use CSS to control presentation and HTML to control structure • <strong> tags can be nested to add further importance • <em> tag indicates “reading emphasis” • Look for the <em>big</em>, yellow balloon. • Look for the big, <em>yellow</em> balloon.

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

22. The details element • The details element provides a collapsible area to hide/reveal content

23. HTML5 Validation • http://validator.w3.org/