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.
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
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.
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.
that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content.
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.
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.
- 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.
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/
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
bradp
tonionagauzzi
kakehashi
aiandrox
east_takumi
mappie_kochi
jacopen
kenichirokimura
lamodatech
alchemy1115
okazuki
brainpadpr
ufried
jakevdp
kneath
bcantrill
lemiorhan
philnash
lara
eileencodes
chriscoyier
palkan
bluesmoon
chrislema
cassininazir
![html5 shim https://code.google.com/p/html5shim/ <!--[if lt IE 9]> <script src="html5shim.js"></script> <![endif]-->](https://files.speakerdeck.com/presentations/8306685014aa0131bdd83e62ddd273a5/slide_7.jpg){kind=link}
