HTML5 and CSS3
description
Transcript of HTML5 and CSS3
HTML5 AND CSS3Neal Stublen
CHAPTER 3
MORE HTML5 SEMANTICS
Content Models Metadata content
Data not necessarily presented on the page○ title, link, meta, style
Flow contentAnything that affects the document’s flow
○ header, footer, p○ Not script, link, meta
Sectioning contentA logical block of content
○ article, aside, nav, section
Content Models Heading content
Section headers○ h1, h2, etc.
Phrasing contentInline text content
○ em, strong Embedded content
Objects, video○ img, object, embed
Interactive contentForm elements, links
Document Outlines A document/page outline could be
generated from heading tags (h1 to h6)
TitleSection 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
<section> <h1>Search Results</h1> <article> <h1>Article Title</h1> <h2>Subtitle</h2>
Applying Headings What headings should we apply to the
HTML5 Herald page?
Sectioning Documents Each “sectioning” element creates a
new node in the outlinediv, 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
<h1>Title</h1><h2>Subtitle</h2>
Outline sees:1. Title 1. Subtitle
Merged Headings<hgroup><h1>Title</h1><h2>Subtitle</h2></hgroup>
Outline sees:1. Title
hgroup is Obsolete Remember HTML5 continues to go
through changes hgroup has been removed from the
HTML specificationHowever, it’s still good to knowYou 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 actionmax and value attributes
Possible examples:Completing a survey (question x of y)
The meter element Used to indicate a measurement
min, max, and value attributeslow, high, and optimal values
Possible examples:Available storage space
The time element Indicates a specific calendar date, time or
timespandatetime 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>
time element updates You might use JavaScript to update the time
element’s descriptive text
<time datetime=“2014-06-22”> </time><time datetime=“2014-06-23”> </time><time datetime=“2014-06-24”> </time>
<time datetime=“2014-06-22”>Yesterday</time><time datetime=“2014-06-23”>Today</time><time datetime=“2014-06-24”>Tomorrow</time>
Links and Block Elements Placing block elements within links is
now acceptable
<a href=“#”><div>Block</div></a>
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.
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.
The details element The details element provides a
collapsible area to hide/reveal content
HTML5 Validation Check markup for conformance to the
HTML5 specificationhttp://validator.w3.org/