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

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 

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. 

the doctype tl;dr 

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 

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 

who cares though? This is a heading

This is a heading



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

old style html 

new style html 

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

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

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. 

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

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. 

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. 

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

article The element represents an independent item section of content. 

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. 

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

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

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

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. 

footer 

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. 

nav The element represents a section with navigation links. 

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. 

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/ 

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. 

video A element is used for playing videos or movies. 

audio An element represents a sound or an audio stream. 

forms 

input types 

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 

placeholder 

autofocus 

javascript + = 

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

modernizr if (Modernizr.canvas) { alert("This browser supports HTML5 canvas!"); } 

geolocation 

localstorage 

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

live demos? 

thanks 

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