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:

Recap

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:

POSH (Plan Old Semantic HTML)

POSH is playing at 10. This is what you should already be doing. POSH is:

HTML5. Take Your Markup One Louder!

That's 11 for you slower folks.

HTML5 is the "future" of the web:

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 <section>, <header>, <footer>, <nav>, <aside>, and <article>. These elements define the content structure of a page and, more specifically:

<section>
Most generic of the new structural elements; used to group thematically-related content.
<header>
Page or section introductory info and/or navigational aids.
<footer>
Supplementary information about a section or a page, such as author information and copyrights.
<nav>
For major site navigation or sub-navigation.
<aside>
For content related to the main content, but independent of the main content.
<article>
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 display: block.

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

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.

ARIA Roles

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

Video of the presentation is available on Vimeo:

Slide Deck

The slide deck is available on SlideShare:

Photos

Photos are available on Flickr:

Thanks to All Our Volunteers!

Webuquerque just wouldn't be the same without helping hands from our community members:

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:

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.