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 full-size 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 full-size 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 full-size slide

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

    tl;dr

    View full-size 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 full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  9. old style html

    View full-size slide

  10. new style html

    View full-size slide

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

    View full-size slide

  12. overview

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

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

    View full-size 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 full-size slide

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

    View full-size 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 full-size 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 full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

  24. 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 full-size slide

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

    View full-size slide

  26. 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 full-size 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.
    http://net.tutsplus.com/articles/web-roundups/21-
    ridiculously-impressive-html5-canvas-experiments/
    http://www.effectgames.com/
    demos/canvascycle/

    View full-size slide

  28. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  31. 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 full-size slide

  32. javascript
    + =

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  35. localstorage

    View full-size slide

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

    View full-size slide

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

    View full-size slide