$30 off During Our Annual Pro Sale. View Details »

Take Your Markup to 11

Take Your Markup to 11

Advanced HTML techniques, including semantic markup, HTML5 structural elements, microformats, microdata and ARIA Landmark Roles

Emily Lewis

August 07, 2013
Tweet

More Decks by Emily Lewis

Other Decks in Technology

Transcript

  1. Some rights reserved
    markup
    11
    to
    Take your

    View Slide

  2. Web Designer Web Developer
    emilylewisdesign.com
    Author, Microformats Made Simple
    microformatsmadesimple.com
    Co-author, HTML5 Cookbook
    shop.oreilly.com/product/0636920016038.do
    Managing Editor, Web Standards Sherpa
    webstandardssherpa.com
    Co-host, CTRL+CLICK CAST
    ctrlclickcast.com
    Email: [email protected]
    Blog: ablognotlimited.com
    Twitter: @emilylewis

    View Slide

  3. emilylewisdesign.com/TakeYourMarkupTo11

    View Slide

  4. If you can figure out how to do
    something interesting or unique or
    noteworthy, people will find you and
    pay you extra because you're not like
    everyone else ... you're different.
    - Seth Godin
    “ Source: http://youtu.be/JJj_WHCdLtQ?t=3m31s

    View Slide

  5. Don’t Be Average

    View Slide

  6. View Slide

  7. Web Storage
    Geolocation
    Offline Web Apps
    Transforms
    Transitions
    Multiple Backgrounds
    Gradients
    Rounded Corners
    SVG
    Canvas
    Native Media
    PHP
    Objective-C
    C++
    Python
    Ruby
    Java
    JavaScript

    View Slide

  8. Source: http://youtu.be/EbVKWCpNFhY

    View Slide

  9. Source: http://youtu.be/EbVKWCpNFhY

    View Slide

  10. Markup, One Louder
    • Semantics for machine readability
    • Accessible for all users
    • Development efficiencies
    • Syndication
    • SEO and findability
    • User experience enhancements
    • Solid foundation for advanced techniques

    View Slide

  11. POSH
    Plain Old Semantic HTML

    View Slide

  12. POSH
    • Markup that has meaning
    • Markup that describes the content itself, not the
    presentation
    • Elements used for their intended purpose*
    • Valid*

    View Slide

  13. POSH Benefits
    • Web standards
    • Portability for devices
    • Common standard for teams
    • Easier troubleshooting & maintenance
    • More accessible
    • Leaner markup = lighter-weight pages

    View Slide

  14. Not POSH

    !
    ! ! Home
    Products
    Services
    About
    !


    I need me some indented text!

    Also Not POSH

    View Slide

  15. POSH FTW

    ! Home
    Products
    Services
    About

    I need me some indented text!
    p:first-child {text-indent: 25px;}
    POSH & CSS

    View Slide

  16. POSH Basics
    • Use - for headings & to define
    content outline
    • Use for tabular data, not layout
    • List elements (, , ) for lists
    • Drop presentational elements (, ,
    ) in favor of CSS
    • Semantic class and id naming

    View Slide

  17. View Slide

  18. • Use the right technology for the job
    • Pave the cowpaths
    • Our Best Practices Are Killing Us
    stubbornella.org/content/2011/04/28/our-best-practices-are-killing-us/
    • Understanding HTML5 Validation
    impressivewebs.com/understanding-html5-validation/
    Flexibility vs. Pedantry

    View Slide

  19. POSH Resources
    • Keep it Clean: Your Blog and Clean HTML
    webteacher.ws/2012/12/03/keep-it-clean-your-blog-and-clean-html/
    • POSH - Plain Old Semantic HTML
    456bereastreet.com/archive/200711/posh_plain_old_semantic_html/
    • Meaningful Markup: POSH and Beyond
    msdn.microsoft.com/en-us/magazine/ff770012.aspx
    • The Beauty of Semantic Markup
    ablognotlimited.com/articles/tag/Beauty+of+Semantic+Markup+series/
    • Our Pointless Pursuit of Semantic Value
    coding.smashingmagazine.com/2011/11/11/our-pointless-pursuit-of-semantic-value/
    comment-page-1/

    View Slide

  20. HTML5
    5

    View Slide

  21. HTML5
    • Backwards and forward compatible
    • New and redefined semantic elements
    • Obsolete presentational elements
    • Flexible and simplified syntax

    View Slide

  22. Simplified DOCTYPE


    Before
    Now

    View Slide

  23. Flexible Style
    • All coding styles are valid
    • Uppercase tag names
    • Optional quotes for attributes
    • Optional values for attributes
    • Optional closed empty elements

    View Slide

  24. Block-level Links
    Emily Lewis Design
    Beauty Isn’t Skin
    Deep


    Emily Lewis Design
    Beauty Isn’t Skin Deep


    Before
    Now

    View Slide

  25. Semantic Structure








    ? HTML5 Sectioning Element Flowchart
    html5doctor.com/resources/#flowchart

    View Slide

  26. Site Layout

    View Slide

  27. HTML5 Structure

    View Slide

  28. Making the Move

    The Law Office of Jimbob Smith



    News
    Services
    Resources
    About

    Before

    View Slide

  29. Making the Move


    The Law Office of Jimbob Smith




    News
    Services
    Resources
    About



    After

    View Slide

  30. Making the Move


    The Law Office of Jimbob Smith




    News
    Services
    Resources
    About



    After

    View Slide

  31. HTML5 Tips
    • Use as much or as little as you want
    • Be aware of browser limitations
    • display: block
    • document.createElement
    czonline.net/blog/2011/03/22/using-html5-semantic-elements-today/
    • HTML5 Enabling Script
    remysharp.com/2009/01/07/html5-enabling-script/
    • Working Draft, “living standard”
    • Experiment and educate

    View Slide

  32. HTML5 Resources
    • HTML5 for Web Designers
    www.abookapart.com/products/html5-for-web-designers
    • HTML5 Doctor
    html5doctor.com
    • The Importance of HTML5 Sectioning Elements
    coding.smashingmagazine.com/2013/01/18/the-importance-of-sections/
    • Further examples on using the main element
    iandevlin.com/blog/2013/02/html5/further-examples-on-using-the-main-element
    • The Truth About HTML5
    truthabouthtml5.com

    View Slide

  33. Microformats
    More Meaning With

    View Slide

  34. Microformats
    • HTML design patterns for describing common
    content like:
    • People, organizations and places
    • Events
    • Hyperlinks
    • Blog posts
    • Reviews

    View Slide

  35. Microformats Benefits
    • Semantics for machine readability
    • More meaningful search results & better findability

    View Slide

  36. Microformats Benefits
    • Semantics for machine readability
    • More meaningful search results & better findability
    • User experience enhancements
    • Encourages consistency and standards
    • Minimal development effort
    • No need for software or special technologies
    • Enables sharing and re-use of your web content
    elsewhere

    View Slide

  37. hCard

    Emily Lewis



    Emily Lewis Design
    Albuquerque, NM
    abbr> 87107

    [email protected]



    Before

    View Slide

  38. hCard

    Emily Lewis


    class="url">Emily Lewis Design
    class="locality">Albuquerque
    , NM
    abbr> 87107
    class="email">[email protected]



    After

    View Slide

  39. hCard

    Emily Lewis


    class="url">Emily Lewis Design
    class="locality">Albuquerque
    , NM
    abbr> 87107
    class="email">[email protected]



    After

    View Slide

  40. Downloadable vcard
    • H2VX Contacts Conversion Service
    h2vx.com/vcf/
    • Operator add-on for Firefox
    addons.mozilla.org/en-US/firefox/addon/operator/
    • Tails Export add-on for Firefox
    addons.mozilla.org/en-US/firefox/addon/tails-export/
    • Microformats extension for Chrome
    chrome.google.com/extensions/detail/oalbifknmclbnmjlljdemhjjlkmppjjl
    • SafariMicroformats plugin for Safari
    zappatic.net/projects/safarimicroformats

    View Slide

  41. Microformats Resources
    • microformats.org
    • microformats2
    microformats.org/wiki/microformats2
    • microformats2 & HTML5 - The Evolution of Web Data
    tantek.com/presentations/2013/04/microformats2/
    • Extending HTML5 - Microformats
    html5doctor.com/microformats/
    • Getting Semantic With Microformats
    ablognotlimited.com/articles/tag/Getting+Semantic+series/

    View Slide

  42. Microdata
    HTML5 Likes Machine Readability Too

    View Slide

  43. Microdata

    Emily
    Lewis
    Web Designer
    Albuquerque, class="region">NM87107

    Before

    View Slide

  44. Microdata

    Emily Lewis
    dt>
    Web Designer
    itemprop="locality">Albuquerque, title="New Mexico" itemprop="region">NM itemprop="postal-code">87106

    After

    View Slide

  45. Should you use microdata?
    • Availability and quality of parsers, tools,
    resources
    • More complex than microformats
    • schema.org
    • Supported by major search engines
    • Narrow vocabularies

    View Slide

  46. Microdata Resources
    • Schema-org, microformats and more science please
    fberriman.com/2011/12/01/schema-org-microformats-and-more-science-please/
    • Future-Ready Content
    alistapart.com/article/future-ready-content
    • Extending HTML5 - Microdata
    html5doctor.com/microdata/
    • Microformats, HTML5 and Microdata
    ablognotlimited.com/articles/microformats-html5-microdata

    View Slide

  47. ARIA Landmarks
    Accessible Rich Internet Applications

    View Slide

  48. ARIA
    • Set of guidelines from WAI for accessible, rich
    internet applications
    • Includes Landmark Roles to indicate document
    structure and aid navigation
    • Attribute Selectors FTW!
    msdn.microsoft.com/en-us/magazine/gg619394.aspx

    View Slide

  49. Landmark Roles
    • role="banner"
    • role="navigation"
    • role="main"
    • role="search"
    • role="form"
    • role="complementary"
    • role="contentinfo"
    • role="application"

    View Slide

  50. Landmark Roles
    • role="banner"
    • role="navigation"
    • role="main"
    • role="search"
    • role="form"
    • role="complementary"
    • role="contentinfo"
    • role="application"

    View Slide

  51. Landmark Roles
    • role="banner"
    • role="navigation"
    • role="main"
    • role="search"
    • role="form"
    • role="complementary"
    • role="contentinfo"
    • role="application"
    overlap with
    overlap
    overlap
    overlap with

    View Slide

  52. Adding Roles

    The Law Office of Jimbob Smith



    News
    Services
    Resources
    About

    XHTML

    View Slide

  53. Adding Roles


    The Law Office of Jimbob Smith





    News
    Services
    Resources
    About


    HTML5

    View Slide

  54. Adding Roles


    The Law Office of Jimbob Smith





    News
    Services
    Resources
    About


    HTML5

    View Slide

  55. ARIA Resources
    • ARIA Gone Wild
    slideshare.net/jared_w_smith/aria-gone-wild
    • Using WAI-ARIA Landmarks – 2013
    blog.paciellogroup.com/2013/02/using-wai-aria-landmarks-2013/
    • Using WAI-ARIA in HTML
    w3.org/TR/2013/WD-aria-in-html-20130214/
    • Web Accessibility & WAI-ARIA Primer
    msdn.microsoft.com/en-us/magazine/ff743762.aspx

    View Slide

  56. Going to 11
    • Use what works for you, your projects and your
    clients
    • Stay up-to-date on changes
    • Love your craft
    • Question and be flexible
    • Experiment, test and decide for yourself

    View Slide

  57. Quality is never an accident.
    It is always the result of intelligent effort.
    - John Ruskin


    View Slide

  58. Questions?
    [email protected] @emilylewis
    emilylewisdesign.com/TakeYourMarkupTo11/

    View Slide