Take Your Markup to 11

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

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: emily@emilylewisdesign.com
   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
    br/>Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/
    xhtml1-strict.dtd">
    
    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
    
    emily@emilylewisdesign.com
    
    
    
    Before
    

    View Slide

38. hCard
    
    Emily Lewis
    
    
    class="url">Emily Lewis Design
    class="locality">Albuquerque
    , NM
    abbr> 87107
    class="email">emily@emilylewisdesign.com
    
    
    
    After
    

    View Slide

39. hCard
    
    Emily Lewis
    
    
    class="url">Emily Lewis Design
    class="locality">Albuquerque
    , NM
    abbr> 87107
    class="email">emily@emilylewisdesign.com
    
    
    
    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?
    emily@emilylewisdesign.com @emilylewis
    emilylewisdesign.com/TakeYourMarkupTo11/
    

    View Slide