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

Web414 - Writing Clean, Clear, & Semantic Markup with HTML5

Brad Parbs
October 10, 2013

Web414 - Writing Clean, Clear, & Semantic Markup with HTML5

HTML5 introduces quite a few new elements that, as Web Developers and Designers, we can take advantage of. The difficulty is knowing what to use, when to use it, and where.

Brad Parbs

October 10, 2013
Tweet

More Decks by Brad Parbs

Other Decks in Technology

Transcript

  1. Writing Clean, Clear, & Semantic Markup with HTML5
    with your friend, Brad Parbs

    View Slide

  2. I’m Brad Parbs.
    WordPress fanatic.
    I build things for clients.
    I build things for myself.
    I write a lot of HTML.
    I do not have a beard.
    I’m Brad Parbs.
    @bradparbs on Twitter
    github.com/bradp
    bradparbs.com
    snowdaygroup.com

    View Slide

  3. intro
    It's not just markup.
    You don’t have to change what you're doing.
    It's pretty easy to start.
    You can use it now.
    It's here to stay.

    View Slide

  4. the doctype
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-­‐strict.dtd">

    tl;dr

    View Slide

  5. semantic markup
    “Semantic HTML is the use of HTML
    markup to reinforce the semantics, or
    meaning, of the information in
    webpages rather than merely to define
    its presentation or look.”
    -Wikipedia

    View Slide

  6. who cares though?
    Screen Readers
    Search Engines (“the Google”)
    More concise HTML == smaller file size
    Easier to understand (for styling or new devs)
    Decouples styling from HTML even more
    It’s human readable

    View Slide

  7. who cares though?
    This is a heading
    This is a heading

    View Slide

  8. html5 shim
    https://code.google.com/p/html5shim/

    View Slide

  9. old style html

    View Slide

  10. new style html

    View Slide

  11. space jam is awesome
    http://www2.warnerbros.com/spacejam/movie/jam.htm

    View Slide

  12. overview

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

    http://stackoverflow.com/questions/4781077/html5-best-
    practices-section-header-aside-article-tags

    View Slide

  13. section
    The element represents a generic section of a document or application.
    A section is a thematic grouping of content:
    - chapter
    - various tabbed pages in a tabbed dialog box
    - numbered sections of a thesis ...
    - A page could be split into sections for an introduction, news items, and
    contact information.
    - A section typically with a heading.

    View Slide

  14. section
    The element represents a generic section of a document or application.

    View Slide

  15. aside
    - pull quotes
    - sidebars
    - advertising
    - groups of nav elements
    The element represents a section of a page that consists of content that is
    tangentially related to the content around the aside element, and which could be
    considered separate from that content.

    View Slide

  16. aside
    The element represents a section of a page that consists of content that is
    tangentially related to the content around the aside element, and which could be
    considered separate from that content.

    View Slide

  17. article
    The element represents an independent item section of content.
    - forum post
    - magazine article
    - newspaper article
    - blog entry
    - user-submitted comment

    View Slide

  18. article
    The element represents an independent item section of content.

    View Slide

  19. header
    The element represents a group of introductory or navigational aids.
    - A header element is intended to usually contain the section's heading (an h1–
    h6 element)
    - The header element can also be used to wrap a section's table of contents, a
    search form, or any relevant logos.

    View Slide

  20. header
    The element represents a group of introductory or navigational aids.

    View Slide

  21. header
    The element represents a group of introductory or navigational aids.

    View Slide

  22. header
    The element represents a group of introductory or navigational aids.

    View Slide

  23. footer
    The element represents a footer for its nearest ancestor sectioning content or
    sectioning root element.
    -A footer typically contains information about its section:
    - author
    - links to related documents
    - copyright data
    - Footers don't necessarily have to appear at the end of a section, though they
    usually do.

    View Slide

  24. footer

    View Slide

  25. nav
    The element represents a section with navigation links.
    - Navigation links:
    - links to other pages
    - links to parts within the page
    - Not all groups of links on a page need to be in a nav element.
    The nav element is appropriate only for sections that consist of major navigation
    blocks. In particular, it is common for footers to have a short list of links to various
    pages of a site, such as the terms of service, the home page, and a copyright page.
    The footer element alone is sufficient for such cases, without a nav element.

    View Slide

  26. nav
    The element represents a section with navigation links.

    View Slide

  27. canvas
    A element provides scripts with a resolution-dependent bitmap canvas,
    which can be used for rendering graphs, game graphics, or other visual images on the
    fly.

    View Slide

  28. canvas
    A element provides scripts with a resolution-dependent bitmap canvas,
    which can be used for rendering graphs, game graphics, or other visual images on the
    fly.
    http://net.tutsplus.com/articles/web-roundups/21-
    ridiculously-impressive-html5-canvas-experiments/
    http://www.effectgames.com/
    demos/canvascycle/

    View Slide

  29. time
    The element represents either a time on a 24 hour clock, or a precise date in
    the calendar, optionally with a time and a time-zone offset.

    View Slide

  30. video
    A element is used for playing videos or movies.

    View Slide

  31. audio
    An element represents a sound or an audio stream.

    View Slide

  32. forms

    View Slide

  33. input types

    View Slide

  34. for search boxes
    for spinboxes
    for sliders
    for color pickers
    for telephone numbers
    for web addresses
    for email addresses
    for calendar date pickers
    for months
    for weeks
    for timestamps
    for precise, absolute date+time stamps
    for local dates and times

    View Slide

  35. placeholder

    View Slide

  36. autofocus

    View Slide

  37. javascript
    + =

    View Slide

  38. modernizr
    Modernizr is a JavaScript library that
    detects HTML5 and CSS3 features in
    the user’s browser.

    View Slide

  39. modernizr
    <br/>if (Modernizr.canvas) {<br/>alert("This browser supports HTML5 canvas!");<br/>}<br/>

    View Slide

  40. geolocation

    View Slide

  41. localstorage

    View Slide

  42. resources
    http://diveintohtml5.info
    http://html5doctor.com/
    http://www.w3.org
    http://html5demos.com/
    http://www.html5rocks.com/en/
    http://caniuse.com/

    View Slide

  43. live demos?

    View Slide

  44. thanks

    View Slide

  45. what we covered
    there’s a lot more to learn!

    View Slide