HTML5 Semantics

HTML
SEMANTICS
Shay Howe
@shayhowe
www.shayhowe.com

HTML Semantics
SHAY HOWE
www.shayhowe.com – @shayhowe
@shayhowe

WHY SEMANTICS?
@shayhoweHTML Semantics

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.

STRUCTURAL

STRUCTURAL ELEMENTS
@shayhowe
Header
Introductory or
navigational aids.
Nav
Section with navigational
links.
Article
Independently reusable
content.
Section
Generically, thematic
grouping.
Aside
Tangentially related
content.
Footer
Closing related content.
HTML Semantics

STRUCTURAL ELEMENTS
<body>
<header>
<nav>...</nav>
</header>
<article>
<section>...</section>
</article>
<aside>...</aside>
<footer>...</footer>
</body>

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>

BOLDING TEXT
B
<b>...</b>
Stylistically offset without importance.
Strong
<strong>...</strong>
Strong emphasis.

ITALICIZING TEXT
I
<i>...</i>
Alternative voice or tone.
Em
<em>...</em>
Stressed emphasis.

UNDERLINING TEXT
U
<u>...</u>
An unarticulated annotation.
Ins
<ins cite="#" datetime="2011-‐08-‐24">...</ins>
Text added to the document.

STRIKING TEXT
S
<s>...</s>
No longer accurate or relevant.
Del
<del cite="#" datetime="2011-‐08-‐24">...</del>
Text deleted from the document.

NAVIGATION & ACTIONS
Nav
<nav>...</nav>
Major navigational links.
Menu
<menu>...</menu>
Group of controls, commonly within web apps.

HYPERLINKS
Inline
<p><a href="http://www.shayhowe.com/">Shay
Howe</a> is a front-‐end web designer and
developer.</p>
Block
<a href="http://www.shayhowe.com/">
<h1>Shay Howe</h1>
<p>Front-‐end web designer and developer.</p>
</a>

HYPERLINK DOWNLOAD
Boolean
<a href="logo.png" download>
Company Logo
</a>
With a value
<a href="logo.png" download="Company-‐Logo">
Company Logo
</a>

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

CITATIONS
Cite
<p><cite><a href="#">Steve Jobs</a></cite> by
Walter Isaacson is truly inspirational.</p>
Specifically a reference to a title of work.

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.

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.»

HIGHLIGHTING TEXT
<h1>Search results for 'chicago'</h1>
<ol>
<li>
<a href="http://www.shayhowe.com/">Shay is
from <mark>Chicago</mark>.</a>
</li>
</ol>

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>

INDICATING PROGRESS
You are <progress>50%</progress> complete.
<progress min="0" max="100" value="50">Hold
tight, your getting there.</progress>

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>

HIDING CONTENT
Good
<div hidden>...</div>
Element, and contents, are not yet, or no longer relevant.
Not as Good
<div style="display: none;">...</div>
No value, commonly read by assistive technology.

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...

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>

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>

IMAGES

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>

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">

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>

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>

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>

AUDIO
<audio src="song.mp3"></audio>
<audio src="song.mp3" autoplay controls loop
preload="auto"></audio>

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>

IFRAMES

FALLBACK
<iframe src="page.html" height="200"
width="600">
<a href="page.html">View embedded webpage.</a>
</iframe>

SANDBOX ATTRIBUTE
No form submission
No JavaScript
No external link targets
Restricted local access
No plug-ins

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

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">

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>

COLOR
<input type="color" name="color">

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">

EMAIL
<input type="email" name="email" multiple>

NUMBER
<input type="number" name="cost" min="10"
max="100">

RANGE
<input type="range" name="rating" min="0"
max="10">

TEL
<input type="tel" name="phone">

SEARCH
<input type="search" name="query">

URL
<input type="url" name="website">

DATALIST
<input type="text" name="city" list="cities">
<datalist id="cities">
<option value="Chicago">
<option value="Los Angeles">
<option value="New York">
</datalist>

AUTOMATION
Autocomplete
<form action="foo" autocomplete="off">
<input type="text" name="destination"
autocomplete="off">
Autofocus
autofocus>

ASSISTANCE
Placeholder
placeholder="Chicago">
Title
title="Please enter your destination.">

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>

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">

VALIDATION
Required
<input type="text" name="destination" required>
Pattern
<input type="tel" name="phone"
pattern="^[0-‐9]+[-‐ ]*[0-‐9]+$">
Maxlength
<input type="url" name="website"
maxlength="100">

VALIDATION
HTML
<input type="text" name="destination" required>
CSS
input:required:after {
color: red;
content: "002A";
}
input:required:valid:after {
color: green;
content: "2713";
}

GET INVOLVED

QUESTIONS?
Thank you!

HTML5 Semantics

More Related Content

What's hot (11)

Viewers also liked (20)

Similar to HTML5 Semantics (20)

More from Shay Howe (8)

Recently uploaded (20)

HTML5 Semantics