Recap: Take Your Markup to Eleven
February 17, 2011 Zerek Welz
For our February 2 event, Emily Lewis discussed how to take your markup to eleven with advanced HTML techniques. If you were unable to attend or need a refresher, we've got you covered:
Welcome to another fantabulous recap. This month of February we had our own Emily Lewis present on taking your markup to 11. Most blokes just play at 10, but now you too can play at 11! Read on for more HTML awesomeness.
HTML is the foundation for today's web. HTML is often overlooked even though you can make an awesome site using nothing else. HTML should be semantic and when used correctly your site can:
- Be accessible to all users.
- Be SEO friendly.
- Take advantage of user experience enhancements.
POSH (Plan Old Semantic HTML)
POSH is playing at 10. This is what you should already be doing. POSH is:
- Able to pass validation by using web standards.
Markup that has meaning with elements used for their intended purpose, i.e.
- Use list elements
- Don't use
- CSS instead of presentational elements.
- Portable for all devices.
- Easier to troubleshoot and maintain.
HTML5. Take Your Markup One Louder!
That's 11 for you slower folks.
HTML5 is the "future" of the web:
It provides flexible and simplified syntax, including the doctype:
<!DOCTYPE html>yea that's it.
New semantic and rich media elements:
New and interactive
- All coding styles are valid. Uppercase, lowercase, wHaTeVeRcAsE, optional values for attributes and forget about the quotes, if you want to.
- A lot of element tags are now optional too.
- We have a whole slew of new APIs for app development.
There is a lot more then I can cover in a recap so go check it out yourself at the official spec.
Let's get semantic
Turn the lights down low and light some candles these semantic elements will even buy you dinner. But, wait … what are they? Meet
<article>. These elements define the content structure of a page and, more specifically:
- Most generic of the new structural elements; used to group thematically-related content.
- Page or section introductory info and/or navigational aids.
- Supplementary information about a section or a page, such as author information and copyrights.
- For major site navigation or sub-navigation.
- For content related to the main content, but independent of the main content.
- For content that can exist on its own without losing meaning, such as content that could be syndicated.
Use as much or as little of the new stuff as you want. Be aware of browser limitations that might not understand these new elements, such as IE6, which needs
document.createElement, and other browsers which need
The final spec is supposed to come out in 2022 — wait, wut? That doesn't mean you can't start now, all of these new features are ready to use now. Experiment with your own sites and see what cool things you can put together. Educate your clients about why IE6 can't have cool things like
<canvas>. The WHATWG is also working on its own spec as a living standard that is no longer versioned. If you ever need help finding what works in specific browsers head over to caniuse.com.
Microformats are semantic HTML design patterns for describing common content such as people, organizations, places, events and more. Using microformats you can allow the download of electronic business cards or events to calendars and give more meaningful search results. Using microformats is as simple as adding a few classes so development overhead is minimal.
HTML5 also offers machine-readability with microdata, which can be used independently or alongside microformats.
Another semantic alternative is ARIA (Accessible Rich Internet Applications) roles, a set of guidelines from WAI (Web Accessibility Initiative). Include landmark roles to indicate document structure and aid navigation. These roles are established by adding the
role attribute and appropriate values to elements in your document.
So what now?
Use what works for you, your projects and your clients. It is not an all or nothing proposition. Experiment with them all and decide for yourself what works best. Stay up to date with what is being used so when a standard is decided to be the one true way you can benefit from that standard in your projects.
Rate Our Speaker
If you attended the event and have not yet rated our speaker, please head over to SpeakerRate and let Emily Lewis know you what thought.
Your input and feedback are essential for helping Webuquerque provide the best content possible. Be sure to tell us what you thought!
Video of the presentation is available on Vimeo:
The slide deck is available on SlideShare:
Photos are available on Flickr:
Thanks to All Our Volunteers!
Webuquerque just wouldn't be the same without helping hands from our community members:
- Photos: Peter Mezensky
- Live Tweets: Mark Casias
- Equipment Breakdown: Andrew Collins
- Recap: Zerek Welz
Want to help? Let us know if you'd like to lend a hand. Interested in speaking? Let us know that too!
Stay Tuned for Our Next Event!
For our March 2 event, Lisa Arnold will discuss how to translate geographic information onto the web:
- Why geographic location — "where" — matters
- Options available for delivering maps on the web
- Focus on ESRI's ArcGIS mapping software utilizing the ArcGIS API for Flex
Let Us Know What You Think
As always, we want to know what's on your mind so we can do the best to ensure Webuquerque is all you want it to be. Make sure to let us know if you have any suggestions, comments or complaints.