HTML5, CSS3 PROBruce D. Kyle MCP MCSDPrincipal Instructor@brucedkylebrucedkyle@nextechu.com

Prerequisites & Context

• Pre-course announcement

• Builds on your HTML4 experience

• Passed online HTML exam– HTML page structure– Elements and attributes

• Previous class – Dev Tools• This class – Semantic Tags• Next class – HTML5 Forms

Context

• Previous class – Dev Tools• This class – Semantic Tags• Next class – HTML5 Forms

Copyright 2014 NextechU LLCImages licensed from Getty Images

SEMANTIC TAGSNew Elements

Class Objectives

• Tell why semantic tags are a big deal

• Know when to use semantic tags on your Web page

• Identify semantic tags on a Web page

• Determine which browsers (devices) support semantic tags

• Provide backward compatibility for legacy browsers

<h1>Articles on: Fruit</h1>

<h2>Apple</h2><p>The apple is the pomaceous fruit of the apple tree...</p>

<h2>Orange</h2><p>The orange is a hybrid of ancient cultivated origin, possibly between pomelo and tangerine...</p>

<h2>Banana</h2><p>Bananas come in a variety of sizes and colors when ripe, including yellow, purple, and red...</p>

Where is the article?

<h1>Articles on: Fruit</h1>

<h2>Apple</h2><p>The apple is the pomaceous fruit of the apple tree...</p>

<h2>Orange</h2><p>The orange is a hybrid of ancient cultivated origin, possibly between pomelo and tangerine...</p>

<h2>Banana</h2><p>Bananas come in a variety of sizes and colors when ripe, including yellow, purple, and red...</p>

Where is the article?

<section>  <h1>Articles on: Fruit</h1>

  <article>    <h2>Apple</h2>    <p>The apple is the pomaceous fruit of the apple tree...</p>  </article>

  <article>    <h2>Orange</h2>    <p>The orange is a hybrid of ancient cultivated origin, possibly between pomelo and tangerine...</p>  </article>

  <article>    <h2>Banana</h2>    <p>Bananas come in a variety of sizes and colors when ripe, including yellow, purple, and red...</p>  </article>    </section>

Why new elements?

HTML 4

<div id="nav">

<div class="header">

<div id="footer">

Why new elements?

HTML 4 HTML5

<nav>

<header>

<footer>

<div id="nav">

<div class="header">

<div id="footer">

Semantic Tags

• article• aside• audio• canvas• command• datalist• details• embed• figcaption• figure

• footer• header• hgroup• keygen• mark• meter• nav• output• progress• rp

• rt• ruby• section• source• summary• time• video• wbr

Semantic Tags

• article• aside• audio• canvas• command• datalist• details• embed• figcaption• figure

• footer• header• hgroup• keygen• mark• meter• nav• output• progress• rp

• rt• ruby• section• source• summary• time• video• wbr

DEMOSemantic Tag

When to use section and article

<section>• Independent• Block of related

content (articles)

• Would the content would make sense on its own in a feed reader? If so use <article>

• Is the content related? If so use <section>• Finally if there’s no semantic relationship use

<div>

<article>• Self-contained

composition in a document, page, application, or site

• Like a blog article and its content

<div>• The content

!

Why Use Semantic Tags?

Semantics are for you, not the other way around

Developer comprehension

Lighter Code Repurposing

Accessibility

Search Engine Optimization

But CanIuse?

But CanIuse?

Modernizr

EXERCISE

Quiz

Which is a semantic tag?

<h1>

<section>

<header>

<a>

Quiz

Who gets the most out of semantic tags?

A) Bill GatesB) W3CC) GoogleD) You

Which is a semantic tag?

<h1>

<section>

<header>

<a>

Quiz

What JavaScript library helps you with backward compatibility?A) jQueryB) QC) ModernizrC) My mom’s JavaScript libraryWho gets the most out

of semantic tags?

A) Bill GatesB) W3CC) GoogleD) You

Which is a semantic tag?

<h1>

<section>

<header>

<a>

Quiz

What JavaScript library helps you with backward compatibility?A) jQueryB) QC) ModernizrC) My mom’s JavaScript library

Which is a semantic tag?

Who gets the most out of semantic tags?

A) Bill GatesB) W3CC) GoogleD) You

<h1>

<section>

<header>

<a>

What site tells me if I can use a HTML5 feature?

A) CanIUse.comB) CanITryItOut.com

Class Objectives

• Tell why semantic tags are a big deal

• Know when to use semantic tags on your Web page

• Inspect semantic tags to a Web page

• Find which browsers (devices) support semantic tags

• Provide backward compatibility for legacy browsers

References

• NextechPress: – HTML5 TUTORIAL – GETTING STARTED WITH SEMANTIC TAGS– HTML5 TUTORIAL – CHANGES IN HTML4 TO HTML5

• W3C: Semantics, structure, and APIs of HTML documents– Elements

• Adobe: Using semantic HTML• Dive into HTML5• MSDN: Using HTML5's New Semantic Tags Today

YOUR QUESTIONS

HTML5, CSS3 PROBruce D. Kyle MCP MCSDPrincipal Instructor@brucedkylebrucedkyle@nextechu.com

BONUS

How browsers handle unknown elements

• All browsers render unknown elements inline, i.e. as if they had a display:inline CSS rule.

• You probably want it to act like:article, aside, figure, footer, header, hgroup, menu, nav, section {

display: block; }

Except for IE before IE9

Note: But prior to IE9, IE ignored tags it did not know about. So you may want to use some JavaScript to replace your semantic elements.

<!--[if lt IE 9]><script> var e = ("abbr,article,aside,audio,canvas,datalist,details," + "figure,footer,header,hgroup,mark,menu,meter,nav,output," + "progress,section,time,video").split(','); for (var i = 0; i < e.length; i++) { document.createElement(e[i]); }</script><![endif]-->

Except for IE before IE9

Note: But prior to IE9, IE ignored tags it did not know about. So you may want to use some JavaScript to create elements.

<!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

Or just use Modernizr, which includes html5shiv