With larger responsive and adaptive websites starting to become more mainstream website development (Hulu.com recently launched a new adaptive desktop website, for example), I thought it would be interesting to introduce those unfamiliar with some of the new semantic elements in the latest version of HTML, HTML5. HTML5 (combined with CSS3) is the standard used to lay the foundation for responsive and adaptive websites. HTML (short for HyperText Markup Language) builds the structure of the web in a "tree" of HTML elements, such as <div> tags and <p> tags. It was first introduced in 1990 and went through multiple revisions. HTML4.01 was published in December 1999, over a decade ago, and has (largely) been the standard ever since.
Since then, many new web capable devices have come out in all shapes and sizes, including a wide range of smartphones and tablets. These devices are being released, updated and adopted by the masses more quickly than we can possibly tailor our designs and marketing strategy.
Instead of offering up more new and varied versions of HTML to these devices, the idea was to standardize and consolidate the features of HTML and XHTML into a single markup language. This markup is forward thinking and can be applied to most modern devices, including smartphones, tablets, laptops and desktop computers.
The W3C (World Wide Web Consortium) has stated that HTML5 will achieve their recommendation by 2014. These things take time, as they should, because we want this standard to be as universal and well thought out as it can be. New and forward-thinking responsive/adaptive web practices will utilize this specification for years to come, so it isn't something that should be rushed. So, how do some of the new tags in HTML5 affect basic page layout?
Before we could utilize HTML5, we may have coded a simple web page layout like so:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Andy's Ye Olde Webpage</title> </head> <body> <div id="header"> <div id="header-inner"> <!-- Some header stuff in this area, perhaps a logo --> <ul id="main-nav"> <li><a href="#">Menu Option 1</a></li> <li><a href="#">Menu Option 2</a></li> <li><a href="#">Menu Option 3</a></li> </ul> </div> </div> <div id="content-container"> <div id="main-column"> <h1>Main Page Content Goes Here!</h1> <div class="article"> <h2>Article #1</h2> <p>This is the first piece of content</p> </div> <div class="article"> <h2>Article #2</h2> <p>This is the second piece of content</p> </div> </div> <div id="sidebar"> <h3>Recommended Posts</h3> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> </ul> </div> </div> <div id="footer"> <div id="footer-inner"> <!-- Some footer stuff in this area, maybe a picture of my cat --> </div> </div> </body> </html>
A <div> is simply a division of space on a webpage, and can be used to contain all sorts of page content or simply provide structure (building blocks) to the page. They are essential to achieve tableless layouts based on CSS. I can't tell you how many similarly classed and structured divs I have reused over and over for the same basic page layouts. But <div> naming conventions vary from developer to developer (as do code formatting, indentation, and CSS practices), and are just too diverse to rely on.
Additional wrapping and containing divs are often needed in HTML4 to achieve page layout. If we were to rewrite this basic page skeleton in HTML5, it would look more like the following:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Andy's Awesome New HTML5 Webpage</title> </head> <body> <header> <!-- Some header stuff in this area, perhaps a logo --> </header> <nav> <ul> <li><a href="#">Menu Option 1</a></li> <li><a href="#">Menu Option 2</a></li> <li><a href="#">Menu Option 3</a></li> </ul> </nav> <section> <article> <header> <h1>Article #1</h1> </header> <section> This is the first piece of content </section> </article> <article> <header> <h1>Article #2</h1> </header> <section> This is the second piece of content </section> </article> </section> <aside> <section> <h1>Recommended Posts</h1> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> </ul> </section> </aside> <footer> <!-- Some footer stuff in this area, maybe a picture of my cat --> </footer> </body> </html>
HTML5 syntax is cleaner and simpler to understand. You could show the above to a friend who doesn't code and they could probably figure out what each piece means.
We've used a <header> element for the header, and a <nav> element to contain the site's navigation. Content and secondary content have been properly segmented within <section>, <article> and <aside> tags. Content can now be marked up based on what it is, not where it is. These elements are more semantic and can be targeted directly in CSS without needing additional classes and IDs and wrapping divs. That's what semantically rich elements do; they convey their purpose to the browser, developer, and the user without much difficulty. They are both machine readable and human readable. The descriptiveness and structure of the HTML makes it easier to work with and easier for a multitude of devices to understand.
<header>, <nav>, <section>, <aside> and <footer> tags are examples of new structural semantic elements in HTML5. Front-end coders like me requested them because we had been using similar classes and IDs over and over again. But, HTML5 has added many other new elements we can use " 30 in total.
The <canvas> tag allows us to use CSS to draw graphics on the fly. <video> and <audio> tags allow us to embed media on web pages without needing Flash, which has been reduced drastically on the web in the past two years (something Apple predicted would happen as HTML5 and CSS3 technologies gained broader adoption). A <video> tag will still contain a Flash video player <iframe> fallback for older browsers that don't understand <video>, so that everybody can access the content. That's why we're on the website to begin with, right? Other new semantic elements allow for easier internationalization, interactivity, and the addition of microdata, which allows us to mark up pages in similar ways recognized by major search providers. Many antiquated presentational elements, like <center> and <big>, have been removed from the spec because they can and should be accomplished using Cascading Style Sheets (CSS).
Andy Carolla - 2012-09-12