If you can figure out how to do something interesting or unique or noteworthy, people will find you and pay you extra because you're not like everyone else ... you're different. - Seth Godin “ Source: http://youtu.be/JJj_WHCdLtQ?t=3m31s
Markup, One Louder • Semantics for machine readability • Accessible for all users • Development efficiencies • Syndication • SEO and findability • User experience enhancements • Solid foundation for advanced techniques
POSH Benefits • Web standards • Portability for devices • Common standard for teams • Easier troubleshooting & maintenance • More accessible • Leaner markup = lighter-weight pages
POSH Basics • Use - for headings & to define content outline • Use for tabular data, not layout • List elements (, , ) for lists • Drop presentational elements (, , ) in favor of CSS • Semantic class and id naming
• Use the right technology for the job • Pave the cowpaths • Our Best Practices Are Killing Us stubbornella.org/content/2011/04/28/our-best-practices-are-killing-us/ • Understanding HTML5 Validation impressivewebs.com/understanding-html5-validation/ Flexibility vs. Pedantry
POSH Resources • Keep it Clean: Your Blog and Clean HTML webteacher.ws/2012/12/03/keep-it-clean-your-blog-and-clean-html/ • POSH - Plain Old Semantic HTML 456bereastreet.com/archive/200711/posh_plain_old_semantic_html/ • Meaningful Markup: POSH and Beyond msdn.microsoft.com/en-us/magazine/ff770012.aspx • The Beauty of Semantic Markup ablognotlimited.com/articles/tag/Beauty+of+Semantic+Markup+series/ • Our Pointless Pursuit of Semantic Value coding.smashingmagazine.com/2011/11/11/our-pointless-pursuit-of-semantic-value/ comment-page-1/
Flexible Style • All coding styles are valid • Uppercase tag names • Optional quotes for attributes • Optional values for attributes • Optional closed empty elements
HTML5 Tips • Use as much or as little as you want • Be aware of browser limitations • display: block • document.createElement czonline.net/blog/2011/03/22/using-html5-semantic-elements-today/ • HTML5 Enabling Script remysharp.com/2009/01/07/html5-enabling-script/ • Working Draft, “living standard” • Experiment and educate
HTML5 Resources • HTML5 for Web Designers www.abookapart.com/products/html5-for-web-designers • HTML5 Doctor html5doctor.com • The Importance of HTML5 Sectioning Elements coding.smashingmagazine.com/2013/01/18/the-importance-of-sections/ • Further examples on using the main element iandevlin.com/blog/2013/02/html5/further-examples-on-using-the-main-element • The Truth About HTML5 truthabouthtml5.com
Microformats • HTML design patterns for describing common content like: • People, organizations and places • Events • Hyperlinks • Blog posts • Reviews
Microformats Benefits • Semantics for machine readability • More meaningful search results & better findability • User experience enhancements • Encourages consistency and standards • Minimal development effort • No need for software or special technologies • Enables sharing and re-use of your web content elsewhere
Should you use microdata? • Availability and quality of parsers, tools, resources • More complex than microformats • schema.org • Supported by major search engines • Narrow vocabularies
ARIA • Set of guidelines from WAI for accessible, rich internet applications • Includes Landmark Roles to indicate document structure and aid navigation • Attribute Selectors FTW! msdn.microsoft.com/en-us/magazine/gg619394.aspx
ARIA Resources • ARIA Gone Wild slideshare.net/jared_w_smith/aria-gone-wild • Using WAI-ARIA Landmarks – 2013 blog.paciellogroup.com/2013/02/using-wai-aria-landmarks-2013/ • Using WAI-ARIA in HTML w3.org/TR/2013/WD-aria-in-html-20130214/ • Web Accessibility & WAI-ARIA Primer msdn.microsoft.com/en-us/magazine/ff743762.aspx
Going to 11 • Use what works for you, your projects and your clients • Stay up-to-date on changes • Love your craft • Question and be flexible • Experiment, test and decide for yourself
emilylewis
kzykmyzw
nagix
shibuiwilliam
yuya4
takasehideki
lwug
baseballyama
mosa_siru
tsukubachallenge
kojira
joker1007
.jpg){kind=avatar}
oshanqq
davidbonilla
sstephenson
philhawksworth
jasonvnalue
phodgson
notwaldorf
myddelton
jmmastey
colly
erikaheidi
jeffersonlam
caitiem20