SlideShare a Scribd company logo
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.
@shayhoweHTML Semantics
STRUCTURAL
@shayhoweHTML Semantics
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>
@shayhoweHTML Semantics
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
TEXT
@shayhoweHTML Semantics
BOLDING TEXT
B
<b>...</b>
Stylistically offset without importance.
Strong
<strong>...</strong>
Strong emphasis.
@shayhoweHTML Semantics
ITALICIZING TEXT
I
<i>...</i>
Alternative voice or tone.
Em
<em>...</em>
Stressed emphasis.
@shayhoweHTML Semantics
UNDERLINING TEXT
U
<u>...</u>
An unarticulated annotation.
Ins
<ins  cite="#"  datetime="2011-­‐08-­‐24">...</ins>
Text added to the document.
@shayhoweHTML Semantics
STRIKING TEXT
S
<s>...</s>
No longer accurate or relevant.
Del
<del  cite="#"  datetime="2011-­‐08-­‐24">...</del>
Text deleted from the document.
@shayhoweHTML Semantics
NAVIGATION & ACTIONS
Nav
<nav>...</nav>
Major navigational links.
Menu
<menu>...</menu>
Group of controls, commonly within web apps.
@shayhoweHTML Semantics
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>
@shayhoweHTML Semantics
HYPERLINK DOWNLOAD
Boolean
<a  href="logo.png"  download>
    Company  Logo
</a>
With a value
<a  href="logo.png"  download="Company-­‐Logo">
    Company  Logo
</a>
@shayhoweHTML Semantics
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.
@shayhoweHTML Semantics
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
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
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>
@shayhoweHTML Semantics
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
INDICATING PROGRESS
You  are  <progress>50%</progress>  complete.
<progress  min="0"  max="100"  value="50">Hold  
    tight,  your  getting  there.</progress>
@shayhoweHTML Semantics
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
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.
@shayhoweHTML Semantics
USING PSEUDO SELECTORS
HTML
<p>Hello  <abbr  title="and">&amp;</abbr>  
    welcome...</p>
CSS
p:first-­‐letter  {
    font-­‐size:  40px;
}
abbr[title="and"]  {
    font:  italic  18px  Baskerville,  serif;    
}
Hello & welcome...
@shayhoweHTML Semantics
LIST
@shayhoweHTML Semantics
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
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
IMAGES
@shayhoweHTML Semantics
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
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
VIDEO
@shayhoweHTML Semantics
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
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
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
AUDIO
@shayhoweHTML Semantics
AUDIO
<audio  src="song.mp3"></audio>
<audio  src="song.mp3"  autoplay  controls  loop  
    preload="auto"></audio>
@shayhoweHTML Semantics
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
IFRAMES
@shayhoweHTML Semantics
FALLBACK
<iframe  src="page.html"  height="200"
    width="600">
    <a  href="page.html">View  embedded  webpage.</a>
</iframe>
@shayhoweHTML Semantics
SANDBOX ATTRIBUTE
No form submission
No JavaScript
No external link targets
Restricted local access
No plug-ins
@shayhoweHTML Semantics
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
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
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
FORMS
@shayhoweHTML Semantics
COLOR
<input  type="color"  name="color">
@shayhoweHTML Semantics
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
EMAIL
<input  type="email"  name="email"  multiple>
@shayhoweHTML Semantics
NUMBER
<input  type="number"  name="cost"  min="10"  
    max="100">
@shayhoweHTML Semantics
RANGE
<input  type="range"  name="rating"  min="0"  
    max="10">
@shayhoweHTML Semantics
TEL
<input  type="tel"  name="phone">
@shayhoweHTML Semantics
SEARCH
<input  type="search"  name="query">
@shayhoweHTML Semantics
URL
<input  type="url"  name="website">
@shayhoweHTML Semantics
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
AUTOMATION
Autocomplete
<form  action="foo"  autocomplete="off">
<input  type="text"  name="destination"  
    autocomplete="off">
Autofocus
<input  type="text"  name="destination"  
    autofocus>
@shayhoweHTML Semantics
ASSISTANCE
Placeholder
<input  type="text"  name="destination"  
    placeholder="Chicago">
Title
<input  type="text"  name="destination"  
    title="Please  enter  your  destination.">
@shayhoweHTML Semantics
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
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
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">
@shayhoweHTML Semantics
VALIDATION
HTML
<input  type="text"  name="destination"  required>
CSS
input:required:after  {
    color:  red;
    content:  "002A";
}
input:required:valid:after  {
    color:  green;
    content:  "2713";
}
@shayhoweHTML Semantics
GET INVOLVED
@shayhoweHTML Semantics
QUESTIONS?
Thank you!
@shayhoweHTML Semantics

More Related Content

HTML5 Semantics