Build a HTML5/CSS3 Website Layout Without Images – Part 1
Ever since all the articles showcasing the new features in HTML5 and CSS3 started appearing around the web, I have had the idea of building a website layout without any images. With all the advancements in HTML5 & CSS3 (compared to previous respectable specs) it wouldn’t be too hard to create a decent-looking website that wouldn’t have to rely on images for the layout elements.
Here is the layout that we will be building:
The Contents of our Demo Folder
In the image above, you can see the contents of the folder containing our finished demo page – as promised: no images. We have an HTML page with our “advanced” markup, a CSS file containing the CSS3-powered styles and a folder containing some fonts that we are going to embed using
As always, I recommend laying down the entire website’s content in the
index.html file before you even think of touching CSS, so let’s jump right into it.
HTML5 – Making Your Coding Faster and Your Code Leaner
In addition to introducing new semantic elements, HTML5 also makes our code much shorter. I touched briefly on this in my previous article for building a jQuery-powered brush stroke navigation.
Doctype Declaration and The Head Tag
Let’s take a look at the
doctype declaration and the
head section of our HTML page:
<!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>Fictive Company Blog | a blog showcasing the übercoolness of HTML5 & CSS3</title> <!--[if lt IE 9]><script src=http://html5shiv.googlecode.com/svn/trunk/html5.js></script><![endif]--> <link href=styles.css rel=stylesheet /> </head>
Obviously, this is much cleaner than what you would have if you were writing HTML4 or XHTML. The
doctype declaration is only four letters.
Here is how it used to be:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
The HTML5 way is much better, isn’t it? Next, we open the
html tag and set the language of the document. (You can find the subtag for your language at the IANA Language Subtag Registry.) Another change to note here is the absence of quote marks surrounding the
en value. You had to include the quote marks in XHTML if you wanted it to validate, but given that this is HTML5, they are no longer necessary.
This might seem like a small issue: how many (kilo)bytes can you save from a few quote marks? But that page won’t be loaded just once; over time, it will pay off. You may actually experience a different problem, you will keep adding the quote marks out of habit. If you use the brilliant Zen Coding plugin for your favorite text editor, it automatically adds the quotes. One solution is to find & replace them all with nothing after you are done working on the file.
Inside of the
A conditional comment is a type of HTML comment that Microsoft uses in IE to, essentially, target specific (or all) versions of its browser.
The comment we use here checks whether the browser opening the page is Internet Explorer with a version number lower than 9. Another comment we could have used is:
< !-- [if lte IE 8] -- >; this would check whether the browser loading the page is IE with the version number lower than or equal to 8. Basically, there is no difference between the two comments; they both target the same range of IE versions so you can go with either one of them.
Moving onto the
body tag, we layout the header section of our page and it’s full of HTML5 elements:
<body> <header> <hgroup> <h1>Fictive Company Blog</h1> <h2>a blog showcasing the übercoolness of HTML5 & CSS3</h2> </hgroup> <nav id=global> <ul> <li><a href=#>Home</a></li> <li><a href=#>About</a></li> <li id=services> <a href=#>Services</a> <ul id=subMenu> <li><a href=#>Whatever</a></li> <li><a href=#>Your Heart</a></li> <li><a href=#>Desires</a></li> </ul> </li> <li><a href=#>Portfolio</a></li> <li><a href=#>Contact</a></li> </ul> </nav> </header>
The Header Element
Immediately after opening the
body tag, we make use of one of the new HTML5 elements – the
header. Here is how the Word Wide Web Consortium (W3C) defines the header:
The header element represents a group of introductory or navigational aids.
Following their recommendation, the
header element will contain our logo, the tagline and the main navigation. With the introduction of the
header element, we have a markup element that can contain all those page elements that we intuitively consider a page header. (Or all those page elements that would be nested within a
div element with the
header element can be used more than once throughout the page and we will be using it again inside of the
article elements which will contain the post entries.
The Hgroup Element
First inside of the header element is another new tag –
hgroup. We will use the
hgroup element to display our site’s logo and tagline within
h2 tags, respectively.
The hgroup element is used to group a set of h1-h6 elements when the heading has multiple levels, such as subheadings, alternative titles, or taglines.
hgroup element might seem like an unnecessary element unless you would normally wrap the headings in a
div element in order for the title and subtitle(s) to have a common background or style. However,
hgroup plays a role in the document outline. The outline algorithm checks your page and presents the heading structure. You can check the outline of your work with the Outliner tool. When the outline algorithm encounters the
hgroup element, it will disregard all but the highest level heading (usually
Now, there is one problem: the outline algorithm isn’t perfect or final. For example, the next element that we will discuss, the
nav element, and the outline marks it as an “Untitled Section”. There have been some requests to the outline developers that the outline algorithm be changed so that it presents the
nav element as “Navigation”. In any case, the
hgroup element provides a way for you to group your headings and thus keep them more organized both structurally and semantically.
The Nav Element
We are moving onto the next HTML5 element – the
nav element. Inside of the
nav element, we will include the site’s main navigation wrapped in an unordered list.
The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.
nav element for your site’s main navigation is kind of a given, but chances are that your site will have more sections containing links; the question is which of these sections should you wrap with the
nav tag. Here are some of the uses that I feel would be appropriate:
- A table of contents (TOC) in a long document;
- Breadcrumb navigation;
- Previous/Next & pagination links and
- Related posts.
According to the spec, these may or may not be proper uses of the
nav element. The spec isn’t very clear and the examples they give aren’t very helpful. So, until the spec is final and more specific, we can only rely on the community for deciding on the correct uses of the
The Article Element
The next element that I want to introduce to you is the
article. The main section of our demo page contains three post excerpts and we will wrap each one in the
<article> <header> <div class=time> <div class=year>2010</div> <div class=date>16<span>apr</span></div> </div> <h1>Sample Post 1</h1> <div class=comments>38</div> </header> <p>Curabitur ut congue hac, diam turpis[…]</p> <footer> <em>Written by:</em> <strong>Author Name</strong> <span class=newLine><em>Tags:</em> <a class=tags href=#>cool</a><a class=tags href=#>modern</a><a class=tags href=#>hype-friendly</a></span> <a class=button href=#>Continue Reading</a> </footer> </article>
Here is W3C’s definition of the
The article element represents a self-contained composition in a document […] that is intended to be independently distributable or reusable, e.g. in syndication.
This time the spec is clearer and a blog post (or its excerpt) is pretty much the best match (note the mention of syndication) for the
article element. We can, of course, have multiple articles on a page.
You have surely noticed that we have nested a
header and a
footer element within the
article. Both the
header and the
footer elements can be used more than once throughout a single HTML page. Since the
header is “a group introductory or navigational aids”, we have included the date, the title and the number of comments within it. Next, we have a paragraph with the post excerpt, followed by the
The Footer Element
Like I’ve said, the
footer can be used more times on a single page if needed and it represents the footer section of a document page or a section of a page.
The footer element represents the footer for the section it applies to. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.
We have four occurrences of the
footer element in our demo page: one for each of the three
article elements and a global footer for the entire page. The footer in the
article element contains the name of the post’s author, the tags and a button linking the full version of the blog post.
Our global footer contains three
section elements and a copyright notice. Both usages of the
footer element are valid and adhere to the W3C recommendation.
The Section Element
The global footer section of our demo page contains three
section elements. Within them, we list the blog’s popular posts, recent comments and a short biography of our fictive company.
The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.
section element is quite tricky because the spec’s definition makes it sound similar to the
div element. I ran into this trap when I started writing the code for the demo page; I had nested the three
article elements inside of a
section element. I soon discovered the error of my ways. One way of deciding whether to use
section is to see if the section you want to wrap in a
section element requires a title (heading). As you can see in the definition, the section element typically has a heading.
Another question useful for determining the validity of using the
div element instead.
Wrapping the three
article elements in our demo page with a
section tag would be justified if the
The Aside Element
The last HTML5 element used for our demo is the
aside; we have used it as a container for our page’s sidebar section.
The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.
As you can see from the spec, one of the perfectly suited uses of the
aside element is the sidebar. In the graphic below, you can see the nested hierarchy of the
aside element on our demo page.
We have nested two
section elements and a
nav element. The first
section element contains our Twitter and RSS feed links and the second features the latest tweet. The second
section element is also one of the rare cases where it doesn’t have a heading. It could have a heading, something like: “The latest tweet”, but I believe it is unnecessary because people are used to seeing blocks like this and the Twitter handle below the quote makes it all the more recognizable. The
nav element in our sidebar is used to display the blogroll and, unlike the main navigation, it has a heading.
So, that’s the first part of the article. I have tried to keep it as short as possible and not spend too much time on the ambiguity of the HTML5 spec as it is not final yet. In the meantime, we will have to rely on the community and the good work of the HTML5 doctors to guide us through the implementation of the new elements into our websites.
Thank you for reading and stay tuned for the second part of the article where we will be discussing the CSS3 properties used for beautifying our layout.
As always, I look forward to any questions and comments. Please feel free to comment and start a discussion on the usage of the new elements as that will be the best way to crystallize their purpose.