HTML5 Semantics
- 4. WHY SEMANTICS?
Unambiguous, shared meaning
Give content significant value and meaning.
Accessibility
Provide information to assistive technologies.
Search & globalization
Improve visibility and internalization.
Interoperability
Allow exchange and use of information.
@shayhoweHTML Semantics
- 7. STRUCTURAL ELEMENTS
<body>
<header>
<nav>...</nav>
</header>
<article>
<section>...</section>
</article>
<aside>...</aside>
<footer>...</footer>
</body>
@shayhoweHTML Semantics
- 8. ARIA ROLES
<body>
<header role="banner">
<nav role="navigation">...</nav>
</header>
<article role="article">
<section role="region">...</section>
</article>
<aside role="complementary">...</aside>
<footer role="contentinfo">...</footer>
</body>
@shayhoweHTML Semantics
- 17. HYPERLINK REL ATTRIBUTE
Possible Values
<a href="legal.html" rel="copyright">
Privacy Policy/Terms of Use
</a>
@shayhowe
license
next
prev
prev
section
subsection
start
stylesheet
tag
alternate
appendix
bookmark
chapter
contents
contents
copyright
glossary
help
index
HTML Semantics
- 19. QUOTATIONS
Q
<p><a href="#">Steve Jobs</a> once said, <q
cite="#">Stay hungry, stay foolish.</q></p>
Short, inline quotation.
Blockquote
<blockquote cite="#">
<p>Design is a funny word...</p>
<p><a href="#">Steve Jobs</a> in <cite><a
href="#">Fortune Magazine</a></cite></p>
</blockquote>
Longer, extended quotation.
@shayhoweHTML Semantics
- 20. LANGUAGE SUPPORT
English
q:lang(en) {
quotes: "201C" "201D" "2018" "2019";
}
“English quote with a ‘nested’ quote.”
French
q:lang(fr) {
quotes: "AB" "BB";
}
«French quote with a «nested» quote.»
@shayhoweHTML Semantics
- 22. GAUGING SCALE
<meter>7 out of 10 stars</meter>
<meter max="10">7 stars</meter>
<meter min="0" max="105" low="5" high="65"
optimum="45" value="47">The car is moving at
a decent average mile per hour.</meter>
@shayhoweHTML Semantics
- 23. INDICATING PROGRESS
You are <progress>50%</progress> complete.
<progress min="0" max="100" value="50">Hold
tight, your getting there.</progress>
@shayhoweHTML Semantics
- 24. REPRESENTING TIME
<time datetime="15:00">3pm</time>
<time datetime="2011-‐08-‐24">August 24th, 2011</
time>
<time datetime="2011-‐08-‐24T15:00">August 24th,
2011 at 3pm</time>
<time datetime="2011-‐08-‐24" pubdate>August
24th, 2011</time>
<time>2011-‐08-‐24</time>
@shayhoweHTML Semantics
- 26. USING PSEUDO SELECTORS
HTML
<p>Hello <abbr title="and">&</abbr>
welcome...</p>
CSS
p:first-‐letter {
font-‐size: 40px;
}
abbr[title="and"] {
font: italic 18px Baskerville, serif;
}
Hello & welcome...
@shayhoweHTML Semantics
- 28. SETTING A START
<ol start="30">
<li>30</li>
<li>31</li>
<li>32</li>
<li>33</li>
</ol>
<ol start="30">
<li>30</li>
<li>31</li>
<li value="40">40</li>
<li>41</li>
</ol>
@shayhoweHTML Semantics
- 29. REVERSING A LIST
<ol reversed>
<li>4</li>
<li>3</li>
<li>2</li>
<li>1</li>
</ol>
<ol reversed>
<li>4</li>
<li>3</li>
<li value="30">30</li>
<li>29</li>
</ol>
@shayhoweHTML Semantics
- 31. FIGURE & FIGCAPTION
<figure>
<img src="shay.jpg" height="300" width="200">
<figcaption>Shay Howe, the Man</figcaption>
</figure>
<figure>
<img src="june.jpg" height="200" width="200">
<img src="july.jpg" height="200" width="200">
<figcpation>Summer Months</figcaption>
</figure>
@shayhoweHTML Semantics
- 32. ALT VS. TITLE TEXT
Alternate Text
Replace an image, should it not be available
Title Text
Provide a description of an image
<img src="june.jpg" height="200" width="200"
alt="June is a summer month with 30 days,
coming after May and before July"
title="Month of June">
@shayhoweHTML Semantics
- 34. VIDEO
<video src="movie.webm" height="390"
width="640">
</video>
<video src="movie.webm" height="390"
width="640" poster="poster.jpg"
preload="auto" autoplay controls loop muted>
</video>
@shayhoweHTML Semantics
- 35. VIDEO FALLBACKS
<video height="390" width="640" poster="poster.jpg">
<source src="movie.webm"
type='video/webm; codecs="vp8, vorbis"'>
<source src="movie.mp4"
type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'>
<source src="movie.ogv"
type='video/ogg; codecs="theora, voris"'>
<object type="application/x-‐shockwave-‐flash"
data="player.swf">
<img src="poster.jpg" alt="" title="Movie Poster">
<p><strong>Download Movie:</strong>
<a href="movie.webm" download>WebM</a>,
<a href="movie.mp4" download>MPEG-‐4</a>,
<a href="movie.ogv" download>Ogg</a>.</p>
</object>
</video>
@shayhoweHTML Semantics
- 36. VIDEO TRACKS
<video height="390" width="640" poster="poster.jpg">
<source src="movie.webm"
type='video/webm; codecs="vp8, vorbis"'>
<source src="movie.mp4"
type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'>
<source src="movie.ogv"
type='video/ogg; codecs="theora, voris"'>
<track kind="captions" label="English Captions"
src="english-‐cc.vtt" srclang="en" default>
<track kind="subtitles" label="English Subtitles"
src="english-‐st.vtt" srclang="en">
<track kind="subtitles" label="French Subtitles"
src="french-‐st.vtt" srclang="fr">
</video>
@shayhoweHTML Semantics
- 39. AUDIO FALLBACKS
<audio controls>
<source src="song.oga"
type='audio/ogg; codecs="vorbis"'>
<source src="song.m4a"
type='audio/mp4; codecs="mp4a.40.2"'>
<p><strong>Download Song:</strong>
<a href="song.oga" download>Ogg</a>
<a href="song.m4v" download>ACC</a>.</p>
</audio>
@shayhoweHTML Semantics
- 42. SANDBOX ATTRIBUTE
No form submission
No JavaScript
No external link targets
Restricted local access
No plug-ins
@shayhoweHTML Semantics
- 43. SANDBOX VALUES
allow-forms
Allow form submissions
allow-scripts
Allow scripts to execute
allow-same-origin
Treat content as if it is from the local server
allow-top-navigation
Allow links to open in other browsing contexts
@shayhoweHTML Semantics
- 44. SANDBOX VALUES
Boolean
<iframe src="page.html" sandbox>
Single Value
<iframe src="page.html" sandbox="allow-‐forms">
Multiple Values
<iframe src="page.html"
sandbox="allow-‐scripts allow-‐same-‐origin">
@shayhoweHTML Semantics
- 45. SEAMLESS ATTRIBUTE
Links open in parent window
CSS and JS are inherited
Screen readers read content inline
<iframe src="page.html" seamless>
<a href="page.html">View embedded webpage.</a>
</iframe>
@shayhoweHTML Semantics
- 48. DATE & TIME
date: 2012-‐05-‐21
datetime: 2012-‐05-‐24T12:00:00+01
month: 2012-‐05
time: 12:00:00
week: 2012-‐W21
<input type="datetime-‐local"
name="event">
@shayhoweHTML Semantics
- 55. DATALIST
<input type="text" name="city" list="cities">
<datalist id="cities">
<option value="Chicago">
<option value="Los Angeles">
<option value="New York">
</datalist>
@shayhoweHTML Semantics
- 58. DISABLING INPUTS
Inputs
<input type="text" name="destination" disabled>
Groups of inputs
<fieldset disabled>
<input type="text" name="destination">
<input type="number" name="cost">
</fieldset>
@shayhoweHTML Semantics
- 59. INCREMENTAL STEPS
Numbers
<input type="number" name="cost" min="10"
max="100" step="2">
<input type="range" name="rating" min="0"
max="10" step=".5">
Time
<input type="date" name="event"
min="2012-‐05-‐01" max="2012-‐08-‐32" step="2">
@shayhoweHTML Semantics