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.
I have bookmarked this for reading later!! its definitely something to get to know!!
cant wait to read it thoroughly...will comment again later!
thanks
:)
You are welcome. :) Looking forward to reading your comments after you check out the article.
I really like CSS3 and HTML5, I would love to use it my self.
But when i open the page in my IE browser it looks like crap in comperesant to ff.
I hope we can use this technique in the future tho it's lovely !
I hear you, it truly sucks to see an inferior rendering of your beautiful CSS3-powered website. On the other hand, we shouldn't limit ourselves by looking at IE when choosing which technologies to implement. Also, I am hopeful (not too much, but still) that IE9 will be a turning point for Microsoft and that they will stop being so concerned with backwards compatibility. Fingers crossed, anyway. ;)
Thank you for the kind words, Thomas. :)
AMAZING.. But not all browser supported.. But thanks any way for the file source..
You are welcome and yes, sadly, not all browsers support all of the HTML5 elements featured in the article...
Hi,
This is great dive into HTML5 tutorial thank you very much.
sadly Opera-10 is only the fully loaded browser for HTML5 right now.
I see lot of problems in rounded edge's - loading fonts - field validations in other browsers.
Expecting more..!
Anni
Hi Anni,
Thank you! :)
Yes, when HTML5 forms (web forms 2.0) are concerned, Opera seems to be the only browser having full support. According to http://caniuse.com/, at least.
I might be wrong, but I think that since Google introduced Chrome to the browser market, the browser vendors have never been faster in rolling out versions of their respective browsers with new features and, probably more important: packed with support for new web technologies. The next months should be very exciting: Opera 10.6 will have improved support for HTML5 video, Firefox 3.7 will support CSS animations and, of course, IE9 should come by the end of the year and it should have support for some HTML5 & CSS3 features. (Of course, I haven't listed all of the improvements that these new versions will bring.)
Is there anything that you would like to see covered in a future post on Onextrapixel?
Hi Marco,
Thank you very much.
I am working with HTML5 from past few months it's really amazing the way RIA development with HTML5. Until expected W3C Candidate Recommendation stage during 2012 we don't know what kind of new API's going to embrace.
This stage i am much exited with HTML5 forms.
My expectations in part 2 or part 3 is little focus on
Input types and client side validations - Local Storage and Session Storage specially with Dataset's and Cross-document messaging.
I think Mozilla dumps Firefox 3.7 from schedule may be it's 4.0 by the end of 2010.
Anni
Hi Anni,
Thanks for replying.
I agree with you, the HTML5 forms feature such great functionality and make development much easier. The second part of this article will feature the CSS3 properties used to make the demo page look like it does (it is already written and will be published very soon). The third part (or maybe a separate article) could contain info and best practices on using HTML5 forms and Local & Session storage. We'll take it into consideration. Thank you for your input, I really appreciate it! :)
And thanks for the info on Firefox, that release schedule makes more sense actually.
WOW! This will definitely help us start HTML5.
hahah kind of funny. I actually just did this for my upcoming business site (http://divajn.eu) =D
But decided to go with images for logo/header anyways in the end. Looks better [so far].
looking forward to part 2 =D
Bring it on!...waiting for part two is this tut!
Great tutorial my friend, can't wait to read part two!
Thanks, Nikola! Part two is coming soon, very soon. :)
Awesome tutorial and such an great idea. I love the menu, very fancy!
Thank you very much. :) I hope that you'll enjoy the second part as well.
How did you make the stem of the blockquote balloon? I've been looking at the CSS and can't figure out how you did that.
Also, I notice that Google Chrome is rendering the mozilla-background-gradient correctly. Strange. Is there a regular background-gradient property that can be used that isn't mozilla specific?
Hi Ken,
Well, answering your questions feels a bit like cheating because I explain the CSS3 properties, including the background gradients, in the upcoming second part of the article.
- In addition to styling the
blockquoteelement, I have made use of the:before&:aftergenerated content and styled those. The:before&:after"elements" are basically two blocks stacked on top of each other and if you change the color of the:afterelement, I think that you will see how the effect is achieved. All credits for the technique go to Nicolas Gallagher.- Webkit browsers use the
-webkit-gradientproperty for displaying background gradients and you'll be able to read more about them in the second part of this article. Chrome isn't using the property with the-moz-prefix to style the backgrounds. ;)Hope this clarifies the issues. Let me know if there is anything else I can help with. :)
Great Post, dude!
Great!
Wait the second part!
See You!
Thanks, man! :) I hope that you'll also like the second part. :)
Hi Marko - this is one hell of a good post! Great job man!
Hi Dejan,
Thank you so much. :)
its a god theme, may be i can make versi blogspot...hihihihi
thanks...
Thank you. :) Well, if you can make it work for you on Blogspot... :D
where is support this template, may be on IE s*cks :D
Very nice. I love HTML 5 and CSS 3.
But it's a big shame that we cannot use this, without doing lots of extra work to make it look the same in Internet Explorer. Microsoft makes us stay in the 'stone age' forever.
Thanks. :)
Yeah, Internet Explorer is the bane of each web designer's existence. ;) I am hoping that the release of IE9 will make our lives at least a bit easier.
Nice article on HTML5 and CSS 3. we are ready to jump on html5.. now we need all browser html5 compatible.
Thanks for article looking for part 2.
cheers.
Nice! I found this article through script and style. I have been looking for a complete demo using html 5; I have found a couple but they all seem to be catered towards articles. why?
Hi Rich,
I am not sure I understand your question, could you elaborate, please? Thanks! :)
Hey there, nice article (both of them)!!! Even though it's little bit hard to deal with IE fallback's I think we should implement more and more of those nice HTML5/CSS3 features...
Just one doubt: why didn't you use the "time" tag instead of "div.time" on the article's header? Anything in particular?
Congrats Marko!
Hi Abraão,
Thank you very much. :)
Hehe, I was wondering if someone would mention the
timeelement. Nice catch, man. :) The only reason for not using the thetimeelement was that I wanted to show the CSS rotation and I couldn't nest anydivorspanelements within thetimetags (it doesn't validate). I might talk about thetimeelement in a future article.Thanks for reading.
Excelent article, this is not an article, is a tutorial of html 5, here explain the parts of the file and it's sections.
Great, i will read the part 2 soon, thanks for share your experience and knowing.
ur all gay
thats offensive to my people
Great article, can't wait for part two :-)
Thanks, the second part is already available here.
Great article Marko!
Did you know there's an html5 element called "time" you may want to use as opposed to using a div with class "time"?
Sorry, I didn't read the comments. Use of the time element was already requested and answered.
No worries, glad you liked the article. :)
BTW, thanks for the Twitter follow. :D
Fantastic article: clean, concise, and straight analysis of the integral updates of HTML5 and CSS3 and how to implement them regularly. Much love to your part of the world from the USA.
Some real fantastic work here. It is intresting seeing the website with different browsers and really seeing how far behind IE8 and 7 are behind the rest. It does look real good in the latest version of firefox as expected.
Once all the browsers catch-up this will really be the way that websites will be getting built in the future.
great work marco!
Great post
very good practice of HTML5
Why you dont use time and datetime (html5 tag) ?
Thank
I agree there is a little ambiguity on the nav element presently but the document clearly states:
"only sections that consist of major navigation blocks are appropriate for the nav element." - http://dev.w3.org/html5/spec/Overview.html#the-nav-element
I think it comes down to asking oneself whether the links are navigational in structure or just links to other parts of the site. I would put forward the argument that if the links are in the context of the hierarchy of the site (as breadcrumbs and pagination are) then semantically they are navigation rather than in site hyperlinks. This is only my opinion on the intention of the W3C spec.
just amazing bro !
thanks :)