Upgrade to Pro — share decks privately, control downloads, hide ads and more …

HTML Semantics

HTML Semantics

Semantics have been an underlining part of HTML for years, using elements, attributes, and values to reinforce the meaning of content. In the wake of popularity, HTML5 has expanded the library of semantic options and cleaned up former semantic options along the way. These improved semantics advocate accessibility and progressive enhancement, providing more intuitive user interfaces and mobile supplementation. One problem still looms, semantics are only of benefit when used properly. Adoption at large is necessary, and essential to building a better web.

Shay Howe

May 21, 2012
Tweet

More Decks by Shay Howe

Other Decks in Technology

Transcript

  1. 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. @shayhowe HTML Semantics
  2. 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
  3. STRUCTURAL ELEMENTS <body>    <header>        <nav>...</nav>  

     </header>    <article>        <section>...</section>    </article>    <aside>...</aside>    <footer>...</footer> </body> @shayhowe HTML Semantics
  4. 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> @shayhowe HTML Semantics
  5. UNDERLINING TEXT U <u>...</u> An unarticulated annotation. Ins <ins  cite="#"

     datetime="2011-­‐08-­‐24">...</ins> Text added to the document. @shayhowe HTML Semantics
  6. STRIKING TEXT S <s>...</s> No longer accurate or relevant. Del

    <del  cite="#"  datetime="2011-­‐08-­‐24">...</del> Text deleted from the document. @shayhowe HTML Semantics
  7. NAVIGATION & ACTIONS Nav <nav>...</nav> Major navigational links. Menu <menu>...</menu>

    Group of controls, commonly within web apps. @shayhowe HTML Semantics
  8. 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> @shayhowe HTML Semantics
  9. HYPERLINK DOWNLOAD Boolean <a  href="logo.png"  download>    Company  Logo </a>

    With a value <a  href="logo.png"  download="Company-­‐Logo">    Company  Logo </a> @shayhowe HTML Semantics
  10. 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
  11. 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. @shayhowe HTML Semantics
  12. 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. @shayhowe HTML Semantics
  13. 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.» @shayhowe HTML Semantics
  14. 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> @shayhowe HTML Semantics
  15. 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> @shayhowe HTML Semantics
  16. INDICATING PROGRESS You  are  <progress>50%</progress>  complete. <progress  min="0"  max="100"  value="50">Hold

         tight,  your  getting  there.</progress> @shayhowe HTML Semantics
  17. 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> @shayhowe HTML Semantics
  18. 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. @shayhowe HTML Semantics
  19. 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... @shayhowe HTML Semantics
  20. 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> @shayhowe HTML Semantics
  21. 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> @shayhowe HTML Semantics
  22. 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> @shayhowe HTML Semantics
  23. 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"> @shayhowe HTML Semantics
  24. 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> @shayhowe HTML Semantics
  25. 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> @shayhowe HTML Semantics
  26. 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> @shayhowe HTML Semantics
  27. 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> @shayhowe HTML Semantics
  28. SANDBOX ATTRIBUTE No form submission No JavaScript No external link

    targets Restricted local access No plug-ins @shayhowe HTML Semantics
  29. 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 @shayhowe HTML Semantics
  30. 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"> @shayhowe HTML Semantics
  31. 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> @shayhowe HTML Semantics
  32. 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"> @shayhowe HTML Semantics
  33. DATALIST <input  type="text"  name="city"  list="cities"> <datalist  id="cities">    <option  value="Chicago">

       <option  value="Los  Angeles">    <option  value="New  York"> </datalist> @shayhowe HTML Semantics
  34. AUTOMATION Autocomplete <form  action="foo"  autocomplete="off"> <input  type="text"  name="destination"    

     autocomplete="off"> Autofocus <input  type="text"  name="destination"      autofocus> @shayhowe HTML Semantics
  35. ASSISTANCE Placeholder <input  type="text"  name="destination"      placeholder="Chicago"> Title <input

     type="text"  name="destination"      title="Please  enter  your  destination."> @shayhowe HTML Semantics
  36. 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> @shayhowe HTML Semantics
  37. 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"> @shayhowe HTML Semantics
  38. 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"> @shayhowe HTML Semantics
  39. VALIDATION HTML <input  type="text"  name="destination"  required> CSS input:required:after  {  

     color:  red;    content:  "\002A"; } input:required:valid:after  {    color:  green;    content:  "\2713"; } @shayhowe HTML Semantics