London PR Consultancy. The website is built using the Joomla! CMS.

An inspirationally clean blog design. Delicious Days has great recipes and fantastic use of images.

The online portfolio and internet hub for Felicia Day’s online presence.

Recently HTML5 has become very popular, and is continuing to rise in popularity. There have already been books about it even though HTML5 is not yet completed or supported 100%. The design blogosphere has been populated with tutorials about HTML5, reasons to love HTML5, how HTML5 can clean your house for you, and many other things that seem unreal. While somethings seem to good to be true, canvas feature I’m looking at you, there is no reason to shy away from using HTML5, quite the opposite, it should be embraced by all. With the rise of designers HTML5 is aimed at making things easier and more design-centric than previous versions.

In order to offer a better comparison or illustration of the change, I will first show a layout of a website in XHTML 1.1, and then demonstrate how HTML5 is doing away with the old ways of div classes and IDs.

Generic XHTML Layout

<div id="wrapper">
  <div id="header">
    <!-- Header content -->
  </div>

  <div id="menu">
    <ul>
      <li>List item</li>
      <li>List item</li>
    </ul>
  </div>

  <div id="container">
    <div id="content">
      <h1>Content here!</h1>
      <p>Here is my content</p>
    </div>
  </div>

  <div id="sidebar">
    <ul>
      <li>List item</li>
      <li>List item</li>
    </ul>
  </div>

  <div id="footer">
    <p>Copyright info</p>
  </div>
</div>

Section Tag

Most of the new HTML5 tags are easily understand as a result of their names, however, the <section> and <article> tags break that rule. While it seems clear that the <article> tag must go inside the <section> tag, it is possible to have a <section> within an <article> tag. Now this is all a bit confusing, so for simplicities sake I will show how a <section> tag can be used as a wrapper or container, and avoid getting into the confusing hierarchy of its other uses. For now at least.

Often a wrapper or container is created in order to hold the entire website together and to allow it to be positioned without having to move multiple single elements. With the introduction of HTML5 it is now possible to use a <section> tag to contain everything in order to rid oneself of yet another ID or class.

In the XHTML example at the start of this article, the first thing used is a wrapper tag. It starts off as:

<div id=”wrapper”>
  <!-- Content inside the wrapper -->
</div>

While this hold the entire website together, it can be replaced with a section tag instead, resulting in it looking as so:

<section>
  <!-- Content inside the wrapper -->
</section>

With the ability to use <section> tags within <article> tags it’s now possible for a <section> tag to be a containing element for the entire site, and to also use it as a containing element for other parts, or sections, of the site.

Header Tag

Beginning at the top of a web page, the header ID, or #header, or another name along those lines serving the same purpose, now has its very own HTML5 tag. Instead of creating an ID or class to represent it a designer can now simply insert <header> . Not only does this remove excess text from the web site, it makes the source code easier to navigate. However, there is more than one use for the tag. It can also be placed at the beginning of a <section> tag or at the beginning of an <article> tag, thus giving it great flexibility.

In the XHTML layout at the start of the page the header is displayed as:

<div id="header">
  <!-- Header content -->
</div>

In HTML5 the header ID is done away with, and instead replaced with:

<header>
  <!-- Header content -->
</header>

Nav Tag

Depending on how one creates a website the menu could come later on, but for the sake of the article it will go here. Instead of a menu ID or class, a <nav> tag is now used instead. As discernible from the name, the tag is meant to be used for navigation items. This tag many not be as versatile as the previous <header> tag, but its purpose is clearly defined.

While the article tag can do away with an a few extra lines of code, the <nav> tag does not do the same. In XHTML a menu is often displayed as a menu ID like so:

<div id="menu">
  <ul>
    <li>List item</li>
    <li>List item</li>
  </ul>
</div>

In HTML5 format the ID is done away with and replaced with the <nav> tag, this makes the code easier to navigate and understand, and also cleaner.

<nav>
  <ul>
    <li>List item</li>
    <li>List item</li>
  </ul>
</nav>

Article Tag

I have recently began a foray into coding WordPress themes, and when I style the entries I’ll often use a class called entry. The new <article> tag changes this though and, once again, eliminates another div. While w3school defines an article as a container for external content, I see it most often used for the same use as its title, articles.

Towards the middle of the layout the first container ID is used to hold the content.

<div id="container">
  <div id="content">
    <h1>Content here!</h1>
    <p>Here is my content</p>
  </div>
</div>

There are different ways to go about applying HTML5 elements to that part of the layout. One is to do away with the container ID completely, resulting in the layout looking like so:

<article>
  <h1>Content here!</h1>
  <p>Here is my content</p>
</article>

Another way to attack the layout is to replace the container with a section tag, but instead of a simple tag, a class is added to the section tag.

<section class="container">
  <article>
    <h1>Content here!</h1>
    <p>Here is my content</p>
  </article>
</section>

The second method is far less desirable than the first though because it uses a class, which is no different than simply using a container ID. The first method is even better than normal though since it gets rid of not only a class, but also a few lines of code. If there are multiple articles then classes may be necessary, but for a simple layout, the first method should suffice.

Aside Tag

The <aside> tag, like the header tag can be used in a multitude of places for the same thing. It is used to define information that is separate from the main text or the article. I often use the tag instead of a sidebar class or ID, and have seen many others do the same.

In XHTML a sidebar is generally written as:

<div id="sidebar">
  <ul>
    <li>List item</li>
    <li>List item</li>
  </ul>
</div>

HTML5 doesn’t shorten the code any, as an aside is represented the same as all the previous elements, by its name.

<aside>
  <ul>
    <li>List item</li>
    <li>List item</li>
  </ul>
</aside>

Footer Tag

Generally last in a website is the footer class or ID. It is now its own tag, and like the <header> tag can be used in a multitude of places. It can be placed at the very end of an entire website or placed at the bottom of a post or article.

It is most often represented like so in XHTML:

<div id="footer">
  <p>Copyright info</p>
</div>

In HTML5 it is now changed to a simple tag with the same name as the often used ID or class.

<footer>
  <p>Copyright info</p>
</footer>

HTML5 Layout

When putting it together it somewhat resembles the XHTML layout, but is easier to understand and is a bit cleaner. It also helps prevent you from losing the endings to div tags and having too many or too few.

<section>
  <header>
    <!-- Header content -->
  </header>

  <nav>
    <ul>
      <li>List item</li>
      <li>List item</li>
    </ul>
  </nav>

  <article>
    <h1>Content here!</h1>
    <p>Here is my content</p>
  </article>

  <aside>
    <ul>
      <li>List item</li>
      <li>List item</li>
    </ul>
  </aside>

  <footer>
    <p>Copyright info</p>
  </footer>
</section>

IE

The red-headed step-child of Internet browsers does not currently support HTML5 at all. Shocker. There is a way to make HTML5 work in Internet Explorer with a JavaScript work around, which is good because everyone loves HTML5 and wants to use it. Again, shocker. I use a few short lines of code and a few conditional statements to make HTML5 work in IE.

<!--/*Google Chrome Frame*/-->

<!--[if IE]>
  <meta http-equiv="X-UA-Compatible" content="chrome=1">
  <script src="http://s12.in/cfinstall.js"></script>
<![endif]-->

<!--/*GCF Fallback*/-->

<!--[if lt IE 9]><script src="http://s12.in/html5/shiv.js"></script><![endif]-->

<!--[if lt IE 8]><script src="http://s12.in/ie.js"></script><![endif]-->

Conclusion

While Internet Explorer doesn’t support HTML5 without a work-around, that’s no reason to not use it. It is cleaner, less confusing, and takes up less space than the current way of doing things. It’s simply better. Therefore use it. Not only that, but everyone else in the web design world is salivating over it so it must be the greatest thing ever. In all seriousness though, it is a definite upgrade from the old way of doing things and will become the way that all websites are done soon, so learn it now!

Keurig brews the perfect cup of coffee, tea, and hot cocoa. Their eCommerce site holds a lot of information in a clean and organized way.

“Selling coffee as a means to create good” Pura Vida sells organic and fair trade coffee.

The online portfolio of Surrey based web designer Katy Hockham.

Lakeshore Branding is a digital agency based in the River North neighborhood of Chicago. We work with clients and brands on digital initiatives that include strategy, design, user experience and development. We influence communication and commerce.

Web design company based in Leeds, UK. We specialize in Joomla development.

Static Positioning

Definition

To start with the basics of CSS, let’s talk about static positioning. Everything set to this property conforms to the natural page order. Think of statically positioned elements as a cement wall, it cannot be removed completely, nor can it be moved at all. Everything you write in CSS defaults to this positioning.

Diagram

Snippet

p { display: static }

Example

Here is an example of Amazon.com without any CSS. By default all elements are displaying with a position of static. Although, if IE 6 somehow managed to violate this principal, I wouldn’t be surprised.

Practical Application

Everything you create by default will assume its position like an orderly flock of lemmings. The reason why I use this analogy is sometimes you might get an element that will inherit something other than static positioning and start flying across the page. For example, in a few instances I’ve had header items inherit non-static positioning. Just use the position: static property to fix it.

Relative Positioning

Definition

If static positioning is a cement wall, then that would make relative positioning more like a brick. A brick is still used in a house and has placement, but it can be moved around relatively easily (unlike our solid wall). Relative positioning accepts positive and negative values for top, right, bottom, and left properties. Think of using these properties as a way of “nudging” elements from their original position. The browser will read relatively positioned elements as if they are static, but also allows you to move them.

So, if we move an element. The browser will nudge it as indicated, but at the same time it won’t fly out of the flow of items either (see diagram below).

Diagram

Code Snippet

p { position: relative; top: 15px; left: 20px }

Example

The following logo has a gradient with a png on the background. Because the logo doesn’t quite fit inside the container for the rest of the site, we can nudge it to the left with relative positioning.

Practical Application

To be honest, I rarely use relatively positioned elements in my project. The only time I really use them is to tweak images and containers a couple pixels. What they’re really meant for is containing absolutely positioned elements from flying off the screen (more to follow on that next).

Absolute Positioning

Definition

This property makes page elements fly out of their container until they shoot off screen or hit the <html> block. The only super power in the world that may contain them is position: relative. This property is your only hope, as it will keep the absolutely positioned elements inside of it. You’ll need this in your arsenal for creating heavily graphic based designs.

Diagram

Code Snippet

div { position: relative }
img { position: absolute; top: 50px; right: 0; }

Example

CSS Formula’s social media box has a Twitter, Facebook, and RSS icon above positioned via absolute positioning. Instead of individually positioning all of the icons, we are moving the container (a div) all the way to the right.

Practical Application

If there is one thing you learn about absolute positioning it should be Fahrner Image Replacement. This technique replaces text with an image in a user friendly way. I could go into more detail on this, but this technique is quite complex for an introduction to the CSS position property. If you are interested in more information check out the Wikipedia page.

Fixed Positioning

When using fixed positioning your targeted html element will align itself according to the browser’s window. This means no matter how much somebody scroll’s on a website, the element will be in the exact same place. Think of it as “pinning” an element to the browser’s window and removing it from the flow of everything else in the website.

Diagram

Snippet

img { position: fixed; top: 0; left: 150px }

Example

The popular Twitter hybrid known as TweetMeme sports fixed positioning for their Feedback and Help buttons. When scrolling on their site the buttons stay fixed to the left of the browser’s window and don’t move at all.

Practical Application

Rarely will you use fixed position with anything on a website unless you are an evil marketing guru bent on shoveling as much advertising as possible on top of innocent people (not a good practice). Most of the time you see it being used to position sidebars and put icons on the side of your screen. Nothing too fancy, but it’s good to be aware of fixed positioning.

The portfolio of web designer Will Barron.