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. HTML
    SEMANTICS
    Shay Howe
    @shayhowe
    www.shayhowe.com

    View full-size slide

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

    View full-size slide

  3. WHY SEMANTICS?
    @shayhowe
    HTML Semantics

    View full-size slide

  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.
    @shayhowe
    HTML Semantics

    View full-size slide

  5. STRUCTURAL
    @shayhowe
    HTML Semantics

    View full-size slide

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

    View full-size slide

  7. STRUCTURAL ELEMENTS

       
           ...
       
       
           ...
       
       ...
       ...

    @shayhowe
    HTML Semantics

    View full-size slide

  8. ARIA ROLES

       
           ...
       
       
           ...
       
       ...
       ...

    @shayhowe
    HTML Semantics

    View full-size slide

  9. TEXT
    @shayhowe
    HTML Semantics

    View full-size slide

  10. BOLDING TEXT
    B
    ...
    Stylistically offset without importance.
    Strong
    ...
    Strong emphasis.
    @shayhowe
    HTML Semantics

    View full-size slide

  11. ITALICIZING TEXT
    I
    ...
    Alternative voice or tone.
    Em
    ...
    Stressed emphasis.
    @shayhowe
    HTML Semantics

    View full-size slide

  12. UNDERLINING TEXT
    U
    ...
    An unarticulated annotation.
    Ins
    ...
    Text added to the document.
    @shayhowe
    HTML Semantics

    View full-size slide

  13. STRIKING TEXT
    S
    ...
    No longer accurate or relevant.
    Del
    ...
    Text deleted from the document.
    @shayhowe
    HTML Semantics

    View full-size slide

  14. NAVIGATION & ACTIONS
    Nav
    ...
    Major navigational links.
    Menu
    ...
    Group of controls, commonly within web apps.
    @shayhowe
    HTML Semantics

    View full-size slide

  15. HYPERLINKS
    Inline
    Shay  
       Howe  is  a  front-­‐end  web  designer  and  
       developer.
    Block

    Shay  Howe
    Front-­‐end  web  designer  and  developer.

    @shayhowe
    HTML Semantics

    View full-size slide

  16. HYPERLINK DOWNLOAD
    Boolean

       Company  Logo

    With a value

       Company  Logo

    @shayhowe
    HTML Semantics

    View full-size slide

  17. HYPERLINK REL ATTRIBUTE
    Possible Values

       Privacy  Policy/Terms  of  Use

    @shayhowe
    license
    next
    prev
    prev
    section
    subsection
    start
    stylesheet
    tag
    alternate
    appendix
    bookmark
    chapter
    contents
    contents
    copyright
    glossary
    help
    index
    HTML Semantics

    View full-size slide

  18. CITATIONS
    Cite
    Steve  Jobs  by  
       Walter  Isaacson  is  truly  inspirational.
    Specifically a reference to a title of work.
    @shayhowe
    HTML Semantics

    View full-size slide

  19. QUOTATIONS
    Q
    Steve  Jobs  once  said,      cite="#">Stay  hungry,  stay  foolish.
    Short, inline quotation.
    Blockquote

       Design  is  a  funny  word...
       Steve  Jobs  in          href="#">Fortune  Magazine

    Longer, extended quotation.
    @shayhowe
    HTML Semantics

    View full-size slide

  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.»
    @shayhowe
    HTML Semantics

    View full-size slide

  21. HIGHLIGHTING TEXT
    Search  results  for  'chicago'

       
           Shay  is  
               from  Chicago.
       

    @shayhowe
    HTML Semantics

    View full-size slide

  22. GAUGING SCALE
    7  out  of  10  stars
    7  stars
       optimum="45"  value="47">The  car  is  moving  at  
       a  decent  average  mile  per  hour.
    @shayhowe
    HTML Semantics

    View full-size slide

  23. INDICATING PROGRESS
    You  are  50%  complete.
    Hold  
       tight,  your  getting  there.
    @shayhowe
    HTML Semantics

    View full-size slide

  24. REPRESENTING TIME
    3pm
    August  24th,  2011
    time>
    August  24th,
       2011  at  3pm
    August
       24th,  2011
    2011-­‐08-­‐24
    @shayhowe
    HTML Semantics

    View full-size slide

  25. HIDING CONTENT
    Good
    ...
    Element, and contents, are not yet, or no longer relevant.
    Not as Good
    ...
    No value, commonly read by assistive technology.
    @shayhowe
    HTML Semantics

    View full-size slide

  26. USING PSEUDO SELECTORS
    HTML
    Hello  &  
       welcome...
    CSS
    p:first-­‐letter  {
       font-­‐size:  40px;
    }
    abbr[title="and"]  {
       font:  italic  18px  Baskerville,  serif;    
    }
    Hello & welcome...
    @shayhowe
    HTML Semantics

    View full-size slide

  27. LIST
    @shayhowe
    HTML Semantics

    View full-size slide

  28. SETTING A START

       30
       31
       32
       33


       30
       31
       40
       41

    @shayhowe
    HTML Semantics

    View full-size slide

  29. REVERSING A LIST

       4
       3
       2
       1


       4
       3
       30
       29

    @shayhowe
    HTML Semantics

    View full-size slide

  30. IMAGES
    @shayhowe
    HTML Semantics

    View full-size slide

  31. FIGURE & FIGCAPTION

       
       Shay  Howe,  the  Man


       
       
       Summer  Months

    @shayhowe
    HTML Semantics

    View full-size slide

  32. ALT VS. TITLE TEXT
    Alternate Text
    Replace an image, should it not be available
    Title Text
    Provide a description of an image
       alt="June  is  a  summer  month  with  30  days,  
       coming  after  May  and  before  July"  
       title="Month  of  June">
    @shayhowe
    HTML Semantics

    View full-size slide

  33. VIDEO
    @shayhowe
    HTML Semantics

    View full-size slide

  34. VIDEO
       width="640">

       width="640"  poster="poster.jpg"
       preload="auto"  autoplay  controls  loop  muted>

    @shayhowe
    HTML Semantics

    View full-size slide

  35. VIDEO FALLBACKS

               type='video/webm;  codecs="vp8,  vorbis"'>
               type='video/mp4;  codecs="avc1.4D401E,  mp4a.40.2"'>
               type='video/ogg;  codecs="theora,  voris"'>
               data="player.swf">

    Download  Movie:
       WebM,
       MPEG-­‐4,
       Ogg.


    @shayhowe
    HTML Semantics

    View full-size slide

  36. VIDEO TRACKS

               type='video/webm;  codecs="vp8,  vorbis"'>
               type='video/mp4;  codecs="avc1.4D401E,  mp4a.40.2"'>
               type='video/ogg;  codecs="theora,  voris"'>
               src="english-­‐cc.vtt"  srclang="en"  default>
               src="english-­‐st.vtt"  srclang="en">
               src="french-­‐st.vtt"  srclang="fr">

    @shayhowe
    HTML Semantics

    View full-size slide

  37. AUDIO
    @shayhowe
    HTML Semantics

    View full-size slide

  38. AUDIO

       preload="auto">
    @shayhowe
    HTML Semantics

    View full-size slide

  39. AUDIO FALLBACKS

               type='audio/ogg;  codecs="vorbis"'>
               type='audio/mp4;  codecs="mp4a.40.2"'>
       Download  Song:
    Ogg
    ACC.

    @shayhowe
    HTML Semantics

    View full-size slide

  40. IFRAMES
    @shayhowe
    HTML Semantics

    View full-size slide

  41. FALLBACK
       width="600">
       View  embedded  webpage.

    @shayhowe
    HTML Semantics

    View full-size slide

  42. SANDBOX ATTRIBUTE
    No form submission
    No JavaScript
    No external link targets
    Restricted local access
    No plug-ins
    @shayhowe
    HTML Semantics

    View full-size slide

  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
    @shayhowe
    HTML Semantics

    View full-size slide

  44. SANDBOX VALUES
    Boolean

    Single Value

    Multiple Values
     sandbox="allow-­‐scripts  allow-­‐same-­‐origin">
    @shayhowe
    HTML Semantics

    View full-size slide

  45. SEAMLESS ATTRIBUTE
    Links open in parent window
    CSS and JS are inherited
    Screen readers read content inline

       View  embedded  webpage.

    @shayhowe
    HTML Semantics

    View full-size slide

  46. FORMS
    @shayhowe
    HTML Semantics

    View full-size slide

  47. COLOR

    @shayhowe
    HTML Semantics

    View full-size slide

  48. DATE & TIME
    date:  2012-­‐05-­‐21
    datetime:  2012-­‐05-­‐24T12:00:00+01
    month:  2012-­‐05
    time:  12:00:00
    week:  2012-­‐W21
       name="event">
    @shayhowe
    HTML Semantics

    View full-size slide

  49. EMAIL

    @shayhowe
    HTML Semantics

    View full-size slide

  50. NUMBER
       max="100">
    @shayhowe
    HTML Semantics

    View full-size slide

  51. RANGE
       max="10">
    @shayhowe
    HTML Semantics

    View full-size slide

  52. TEL

    @shayhowe
    HTML Semantics

    View full-size slide

  53. SEARCH

    @shayhowe
    HTML Semantics

    View full-size slide

  54. URL

    @shayhowe
    HTML Semantics

    View full-size slide

  55. DATALIST


       
       
       

    @shayhowe
    HTML Semantics

    View full-size slide

  56. AUTOMATION
    Autocomplete

       autocomplete="off">
    Autofocus
       autofocus>
    @shayhowe
    HTML Semantics

    View full-size slide

  57. ASSISTANCE
    Placeholder
       placeholder="Chicago">
    Title
       title="Please  enter  your  destination.">
    @shayhowe
    HTML Semantics

    View full-size slide

  58. DISABLING INPUTS
    Inputs

    Groups of inputs

       
       

    @shayhowe
    HTML Semantics

    View full-size slide

  59. INCREMENTAL STEPS
    Numbers
       max="100"  step="2">
       max="10"  step=".5">
    Time
       min="2012-­‐05-­‐01"  max="2012-­‐08-­‐32"  step="2">
    @shayhowe
    HTML Semantics

    View full-size slide

  60. VALIDATION
    Required

    Pattern
       pattern="^[0-­‐9]+[\-­‐  ]*[0-­‐9]+$">
    Maxlength
       maxlength="100">
    @shayhowe
    HTML Semantics

    View full-size slide

  61. VALIDATION
    HTML

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

    View full-size slide

  62. GET INVOLVED
    @shayhowe
    HTML Semantics

    View full-size slide

  63. QUESTIONS?
    Thank you!
    @shayhowe
    HTML Semantics

    View full-size slide