Semantics Will Save Us All:
Part II, HTML Markup

Semantics Will Save Us All: Part II, HTML Markup

Despite the complexitiy of your page and site design, chances are likely that you'll rarely ever have to use more than a handful of classes and IDs. With HTML5, there is a plethora of useful elements that will satsify your CSS-Design and HTML-structuring needs. While there are an insane amount of options at our disposal to simplify CSS and HTML markup, let's just focus on some of the most common (and important) elements of change.

Setting Up

First and foremost, in order to have HTML5 elements render properly, you need to set the associated doctype.

HTML5 doctype
  1. <!DOCTYPE html>
Page Spread
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. </head>
  6. <body>
  7.  
  8. </body>
  9. </html>

No More Div Stacking

Personally, the best part about HTML5 is how the W3C has created specific elements for everyday uses. The days of having to use divs for nearly all of your structural mark-up are thankfully gone. HTML5 elements such as the self-explanatory header, footer, nav, and section elements will make your life easier, your code concise, and your website more optimized for search-engine crawling.

HTML5 Elements

Header
  1. <header>
  2. <img src="/images/logo.png" alt="My Logo" title="My Logo"/>
  3. <em>My Website</em>
  4. </header>

The header tag can be used as a section header or the overall page header.

Nav
  1. <nav>
  2. <a href="/home" title="Home">Home</a>
  3. <a href="/about" title="About">About</a>
  4. <a href="/contact" title="Contact">Contact</a>
  5. </nav>

The nav tag is for (what else?) navigation! Stick with ol if you wish, but the nav element provides concise mark-up and acts as a bull's eye for search engines, enabling them to easily crawl your website.

Section
  1. <section>
  2. <h1>This is my new website.</h1>
  3. <img src="/images/snoopy.png" alt="My Dog" title="My Dog"/>
  4. <p>It's coded in HTML5. how cool, right?</p>
  5. </section>

The section tag can be used to group and/or organize content. Remember using div tags to structure areas of content? Well, the section element is the perfect, and appropriate, substitute.

Footer
  1. <footer>
  2. <p>Copyright © My Website. Me, Myself, & I.</p>
  3. </footer>

With the footer tag, you finally have an appropriate element to place your copyright information and shortcut links.

HTML5 Structure

As you can see, with HTML5, you're code is cleansed of unnecessary stacking and your stylesheets free of cluttered classes and IDs. If you structure your webpages with the right amount of semantics, your website will have a much clearer definition.

A simple, yet cleanly coded approach:
  1. <header>
  2. <img src="/images/logo.png" alt="My Logo" title="My Logo"/>
  3. <em>My Website</em>
  4. </header>
  5.  
  6. <nav>
  7. <a href="/home" title="Home">Home</a>
  8. <a href="/about" title="About">About</a>
  9. <a href="/contact" title="Contact">Contact</a>
  10. </nav>
  11.  
  12. <section>
  13. <h1>This is my new website.</h1>
  14. <img src="/images/snoopy.png" alt="My Dog" title="My Dog"/>
  15. <p>It's coded in HTML5. how cool, right?</p>
  16. </section>
  17.  
  18. <footer>
  19. <p>Copyright © My Website. Me, Myself, & I.</p>
  20. </footer>

Tags

Add Comment

Leave a Comment or Reply
Fuel the conversation with your thoughts using the form below. Email is not made public.
× Processing...

Please Wait while your Comment is being Processed.

*
*
*

Comments 0 Total Responses