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 @font-face.
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 head element, we first define the character set and add the title. Pretty standard, sans the quotation marks. Moving on, we add a conditional comment within which we load a JavaScript file that will help us deal with Internet Explorer (IE) 8 and below.
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.
The reason for including Remy Sharp’s HTML5Shiv script is Internet Explorer’s lack of support for HTML5 elements. The problem with IE is the fact that it doesn’t apply any CSS styling to elements it doesn’t recognize. So, in order to force older versions of IE to render HTML5 elements correctly we have to create the unknown elements using JavaScript. If you are not content by just knowing that this solves the problem and want more details, check out John Resig’s HTML5 Shiv post.
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 id of header.) 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 h1 and 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.
The 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 h1).
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.
Using the 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 nav element.
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 tag.
<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 article element:
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 footer.
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.
The 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 section element is: are you adding the element purely for styling purposes? If you are adding it simply because you need to target that section of the page with JavaScript or because you want to apply a common style to it, you should use a div element instead.
Wrapping the three article elements in our demo page with a section tag would be justified if the section element included a heading like “Recent blog posts”. That would make sense; otherwise the tag within which the article elements are nested is just a styling aid – something to help us target it with JavaScript or CSS.
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.
Last Words
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.
Useful links
Written by: Marko Randjelovic for Onextrapixel - Showcasing Web Treats Without A Hitch | 38 comments Post Topic(s): Development
