HTML5 AND CSS3Neal Stublen

nstublen@jccc.edu

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”>&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>

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/