HTML5, CSS3 PROBruce D. Kyle MCP MCSDPrincipal Instructor@[email protected]
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@[email protected]
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