HTML5 HRWay lunch

hrw_html5.markdown

nav

header
	nav
		ul
			li
				a
			li.active
				a

hgroup

.heading
	hgroup
		h1
		h2
	a.add

Allows for:

• top-level heading styles
• arrangement of top-level controls
• hgroup is only necessary if there is more than one heading
• .heading is always necessary

header, footer

only used once on page, on top level

form

%form
	%fieldset
		%dl
			%dt
				%label
			%dd
				%input
			%dt class='error'
				%label
					%span error message
			%dd
				%input
			%dt class='required'
				%label
					%span error message
			%dd
				%input
		%dl.checkbox
			%dt
				%label
			%dd
				%ul
					%li
						%label
							%input(type='checkbox')
		%label.checkbox
			%input

section, article

"Authors are encouraged to use the article element instead of the section element when it would make sense to syndicate the contents of the element."

"Particular meanings should not be derived from the value of the id attribute."

aside

Only useful for full-fledged article/blog system; no use case has occurred as of yet

div

"When an element is needed for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead."

"Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable."

address

• used in footer for address of company

figure (and figcaption)

• example case: Mulu
• used when content inside of it is not necessarily to content around it
• figcaption should provide necessary context for figure element

a

"The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links)"

• above includes links, event handlers
• rel=external
  • to signify links going outside the site - usable to add icons to external links via javascript

em, i, strong, b

• em and strong are semantic, i and b are for formatting

small

• not semantic, only for formatting

time

• must be in article
• datetime attribute not necessary, but time is nice and semantic

Fancy input types

- currently use `email`, `password`
- others can be risky due to browser support and browser-specific default styles