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

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 <!DOCTYPE html PUBLIC "-‐//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-‐strict.dtd"> <!DOCTYPE html> 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 deﬁne its presentation or look.” -Wikipedia

who cares though? Screen Readers Search Engines (“the Google”) More
concise HTML == smaller ﬁle size Easier to understand (for styling or new devs) Decouples styling from HTML even more It’s human readable

who cares though? <font size="6"><b>This is a heading</b></font> <h1>This is
a heading</h1>

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 <body> <header>...</header>
<nav>...</nav> <article> <section> ... </section> </article> <aside>...</aside> <footer>...</footer> </body> http://stackoverﬂow.com/questions/4781077/html5-best- practices-section-header-aside-article-tags

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.

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

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.

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.

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

article The <article> element represents an independent item section of
content.

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.

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

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.

footer

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 sufﬁcient for such cases, without a nav element.

nav The <nav> element represents a section with navigation links.

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 ﬂy.

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

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.

video A <video> element is used for playing videos or
movies.

audio An <audio> element represents a sound or an audio
stream.

input types

<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

placeholder

autofocus

javascript + =

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

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">

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!

Web414 - Writing Clean, Clear, & Semantic Marku...

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

More Decks by Brad Parbs

Other Decks in Technology

Featured

Transcript