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’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
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
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.
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
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.
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.
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.
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/
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
bradp
yusuke
nagix
nori_shinoda
mochico
herumi
mhidaka
minorun365
tomuro
yellowshippo
yuhattor
ikezoemakoto
shotatsuge
chrisshort
3n
notwaldorf
akosma
jensimmons
bkeepers
chrislema
cassininazir
nonsquared
holman
jponch
paulrobertlloyd