1 / 23

HTML5 and CSS3

Neal Stublen nstublen@jccc.edu. HTML5 and CSS3. Chapter 3 More HTML5 Semantics. Applying Headings. What headings should we apply to the HTML5 Herald page?. Content Models. Metadata content Document title, author, etc. Data not necessarily presented on the page Flow content

gasha
Download Presentation

HTML5 and CSS3

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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/

More Related