Save 37% off PRO during our Black Friday Sale! »

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

D529f2403e21f08bfa16365bdf032f81?s=47 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.

D529f2403e21f08bfa16365bdf032f81?s=128

Brad Parbs

October 10, 2013
Tweet

Transcript

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

    friend, Brad Parbs
  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
  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.
  4. the doctype <!DOCTYPE  html  PUBLIC  "-­‐//W3C//DTD  XHTML  1.0  Strict//EN"  

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-­‐strict.dtd"> <!DOCTYPE  html> tl;dr
  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
  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
  7. who cares though? <font size="6"><b>This is a heading</b></font> <h1>This is

    a heading</h1>
  8. html5 shim https://code.google.com/p/html5shim/ <!--[if lt IE 9]> <script src="html5shim.js"></script> <![endif]-->

  9. old style html

  10. new style html

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

  12. overview <body>          <header>...</header>      

       <nav>...</nav>          <article>                    <section>                              ...                    </section>          </article>          <aside>...</aside>          <footer>...</footer> </body> http://stackoverflow.com/questions/4781077/html5-best- practices-section-header-aside-article-tags
  13. section The <section> 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.
  14. section The <section> element represents a generic section of a

    document or application.
  15. aside - pull quotes - sidebars - advertising - groups

    of nav elements The <aside> 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.
  16. aside The <aside> 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.
  17. article The <article> element represents an independent item section of

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

    content.
  19. header The <header> 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.
  20. header The <header> element represents a group of introductory or

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

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

    navigational aids.
  23. footer The <footer> 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.
  24. footer

  25. nav The <nav> 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.
  26. nav The <nav> element represents a section with navigation links.

  27. canvas A <canvas> 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.
  28. canvas A <canvas> 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/
  29. time The <time> 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.
  30. video A <video> element is used for playing videos or

    movies.
  31. audio An <audio> element represents a sound or an audio

    stream.
  32. forms

  33. input types

  34. <input  type="search"> for search boxes <input  type="number"> for spinboxes <input

     type="range"> for sliders <input  type="color"> for color pickers <input  type="tel"> for telephone numbers <input  type="url"> for web addresses <input  type="email"> for email addresses <input  type="date"> for calendar date pickers <input  type="month"> for months <input  type="week"> for weeks <input  type="time"> for timestamps <input  type="datetime"> for precise, absolute date+time stamps <input  type="datetime-­‐local"> for local dates and times
  35. placeholder

  36. autofocus

  37. javascript + =

  38. modernizr Modernizr is a JavaScript library that detects HTML5 and

    CSS3 features in the user’s browser.
  39. modernizr <script> if (Modernizr.canvas) { alert("This browser supports HTML5 canvas!");

    } </script> <html class="js flexbox canvas canvastext webgl no- touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths">
  40. geolocation

  41. localstorage

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

  43. live demos?

  44. thanks

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