Code a Backwards Compatible, One Page Portfolio with HTML5 and CSS3

HTML5 is the future of web development but believe it or not you can start using it today. HTML5 is much more considerate to semantics and accessibility as we don’t have to throw meaningless div’s everywhere. It introduces meaningful tags for common elements such as navigations and footers which makes much more sense and are more natural.

This is a run through of the basics of HTML5 and CSS3 while still paying attention to older browsers. Before we start, make note of the answer to this question. Do websites need to look exactly the same in every browser?

View Demo | Download Files (.zip)

The HTML

<!DOCTYPE html>
<html lang="en">

<!-- This is a demonstration of HTML5 goodness with healthy does of CSS3 mixed in -->
<head>

    <title>One Page Portfolio</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

    <!--[if IE]>
    	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!--[if IE 7]>
    	<link rel="stylesheet" href="ie7.css" type="text/css" media="screen" />
    <![endif]-->

    <link rel="stylesheet" href="style.css" type="text/css" media="screen" />

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js" type="text/javascript"></script>
    <script src="js/jquery.anchor.js" type="text/javascript"></script>
    <script src="js/jquery.fancybox-1.2.6.pack.js" type="text/javascript"></script>

</head>

<body>

    <header> <!-- HTML5 header tag -->

    	<div id="headercontainer">

    		<h1><a class="introlink anchorLink" href="#intro">Web Design Portfolio</a></h1>

    		<nav> <!-- HTML5 navigation tag -->
    			<ul>
    				<li><a class="introlink anchorLink" href="#intro">Intro</a></li>
    				<li><a class="portfoliolink anchorLink" href="#portfolio">Portfolio</a></li>
    				<li><a class="aboutlink anchorLink" href="#about">About</a></li>
    				<li><a class="contactlink anchorLink" href="#contact">Contact</a></li>
    			</ul>
    		</nav>

    	</div>

    </header>

    <section id="contentcontainer"> <!-- HTML5 section tag for the content 'section' -->

    	<section id="intro">

    		<h2 class="intro">Hand-coded <strong>HTML</strong> and <strong>CSS</strong> is what I do. <span class="sub">It's what I'm good at so why not?</span></h2>

    		<a class="featured" href="http://inspectelement.com"><img src="images/featured.gif" alt="Inspect Element large preview" /></a>

    		<p>Featured Project: <a href="#">Inspect Element</a></p>

    	</section>

    	<section id="portfolio"> <!-- HTML5 section tag for the portfolio 'section' -->

    		<h2 class="work">My Portfolio</h2>

    		<ul class="work">
    			<li>
    				<a href="http://inspectelement.com"><img src="images/inspectelementSmall.jpg" alt="Inspect Element preview" /></a>
    			</li>
    			<li>
    				<a href="http://inspectelement.com"><img src="images/inspectelementSmall.jpg" alt="Inspect Element preview" /></a>
    			</li>
    			<li>
    				<a href="http://inspectelement.com"><img src="images/inspectelementSmall.jpg" alt="Inspect Element preview" /></a>
    			</li>
    			<li>
    				<a href="http://inspectelement.com"><img src="images/inspectelementSmall.jpg" alt="Inspect Element preview" /></a>
    			</li>
    			<li>
    				<a href="http://inspectelement.com"><img src="images/inspectelementSmall.jpg" alt="Inspect Element preview" /></a>
    			</li>
    			<li>
    				<a href="http://inspectelement.com"><img src="images/inspectelementSmall.jpg" alt="Inspect Element preview" /></a>
    			</li>
    			<li>
    				<a href="http://inspectelement.com"><img src="images/inspectelementSmall.jpg" alt="Inspect Element preview" /></a>
    			</li>
    			<li>
    				<a href="http://inspectelement.com"><img src="images/inspectelementSmall.jpg" alt="Inspect Element preview" /></a>
    			</li>
    			<li>
    				<a href="http://inspectelement.com"><img src="images/inspectelementSmall.jpg" alt="Inspect Element preview" /></a>
    			</li>
    		</ul>

    	</section>

    	<section id="about"> <!-- HTML5 section tag for the about 'section' -->

    		<h2 class="about">About Me</h2>

    		<p>Now this is a story all about how my life got twisted upside down and I'd like to take a minute just sit right there I'll tell you how I became the prince of a town called Bel-Air. In West Philadelphia born and raised on the playground my momma said most of my days chilling out, maxing and relaxing all cool and all shooting some b-ball outside of school when a couple of guys they were up to no good started making trouble in our neighbourhood I got in one little fight and my mom got scared, she said your moving in with your auntie and uncle in Bel-Air</p>

    	</section>

    	<section id="contact"> <!-- HTML5 section tag for the contact 'section' -->

    		<h2 class="contact">Contact Me</h2>

    		<p>I whistled for a cab and when it came near the license plate said fresh and had dice in the mirror, if anything I could say that this cab was rare but I thought nah, <a href="">forget it</a>, yo home to Bel-Air! I pulled up to the house about seven or eight I yelled to the cabbie yo home, smell you later, looked at my kingdom I was finally there to sit on my throne as the prince of Bel-Air</p>

    		<form id="contactform"> 

    			<p><label for="name">Name</label></p>
    			<input type="text" id=name name=name placeholder="First and last name" required tabindex="1" /> 

    			<p><label for="email">Email</label></p>
    			<input type="text" id=email name=email placeholder="example@domain.com" required tabindex="2" /> 

    			<p><label for="comment">Your Message</label></p>
    			<textarea name="comment" id="comment" tabindex="4"></textarea> 

    			<input name="submit" type="submit" id="submit" tabindex="5" value="Send Message" /> 

    		</form> 

    	</section>

    	<footer> <!-- HTML5 footer tag -->

    		<ul>
    			<li><img src="images/twitter.png" alt="" /><a href="http://twitter.com/tkenny">Follow me on Twitter</a></li>
    			<li><a href="http://inspectelement.com/articles/code-a-backwards-compatible-one-page-portfolio-with-html5-and-css3">Back to the Tutorial on Inspect Element</a></li>
    		</ul>

    	</footer>	

    </section>

</body>

</html>

Download the HTML here (Right-click and save as).

First thing first, let’s make sure the code validates with W3C’s experimental HTML5 validator.

Good news, it does! This is a simple example but good to know we’re on the right lines.

The HTML5 Goodness

As you can see from the code above there are new tags that you may not be familiar with. To make it even simpler here is the code stripped down to only the HTML5 tags.

<header> <!-- HTML5 header tag -->

        <nav> <!-- HTML5 navigation tag -->
	</nav>

</header> 

<section id="contentcontainer"> <!-- HTML5 section tag for the content 'section' -->

	<section id="intro"> <!-- HTML5 section tag for the introduction 'section' -->
	</section>

	<section id="portfolio"> <!-- HTML5 section tag for the portfolio 'section' -->
	</section>

	<section id="about"> <!-- HTML5 section tag for the about 'section' -->
	</section>

	<section id="contact"> <!-- HTML5 section tag for the contact 'section' -->
	</section>

	<footer> <!-- HTML5 footer tag -->
	</footer>	

</section>

Header

The first one you’ll notice is <header> and it does exactly what it implies. You can use this for the header of your page, typically containing the logo and the navigation.

The header element represents a group of introductory or navigational aids.

A header element is intended to usually contain the section’s heading (an h1–h6 element or an hgroup element), but this is not required. The header element can also be used to wrap a section’s table of contents, a search form, or any relevant logos.

The header element as described in the HTML5 specs.

Nav

The <nav> tag now gives us the ability to highlight the navigation of a site through the HTML. Usually contained within the header of a page but can also be applied to left or right sided navigation in sidebars.

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.

Not all groups of links on a page need to be in a nav element — only sections that consist of major navigation blocks are appropriate for the nav element. In particular, it is common for footers to have a short list of links to various pages of a site, such as the terms of service, the home page, and a copyright page. The footer element alone is sufficient for such cases, without a nav element.

User agents (such as screen readers) that are targeted at users who can benefit from navigation information being omitted in the initial rendering, or who can benefit from navigation information being immediately available, can use this element as a way to determine what content on the page to initially skip and/or provide on request.

The nav element as described in the HTML5 specs

Section

In this example the <section> tag is being used to separate the different parts of the page. The introduction, my portfolio, about me and contact me areas are all sections that make up the page, all contained within a section tag.

The section element represents a generic document or application section. A section, in this context, is a thematic grouping of content, typically with a heading.

Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site’s home page could be split into sections for an introduction, news items, contact information.

The section element as described in the HTML5 specs.

Footer

You’ll find the <footer> tag at the end of the contact section of the portfolio example. It’s included there and not at the end of the document in this case because it contains content relevant to the contact section in the form of the Twitter link (ignoring the back to tutorial link). For more information read the following included in the HTML 5 spec overview:

The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.

Contact information for the author or editor of a section belongs in an address element, possibly itself inside a footer.

Footers don’t necessarily have to appear at the end of a section, though they usually do.

When the footer element contains entire sections, they represent appendices, indexes, long colophons, verbose license agreements, and other such content.

The footer element is not sectioning content; it doesn’t introduce a new section.

When the nearest ancestor sectioning content or sectioning root element is the body element, then it applies to the whole page.

The footer element as described in the HTML5 specs.

The Form

While the form itself doesn’t seem to be radically different to previous methods, HTML5 does introduce a nice addition in the placeholder attribute. Basically this fills in a text field with sample text much like we’re used to doing with Javascript now.

<input placeholder="example@domain.com" />

For more on HTML5 in forms make sure you check out Have a Field Day with HTML5 Forms on last year’s 24 ways.

Backwards Compatibility

All of this is great. We’re using the latest and greatest technology in web development but currently only a few browsers support HTML5 in any capacity. We now need to think about all versions of Internet Explorer which don’t include any support for HTML5 whatsoever. Fortunately for us, Remy Sharp has created a Javascript file that reverses IE’s inability to style elements it doesn’t recognise.

Just included the following code:

<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Now that all major browsers will recognise the styling let’s move onto the CSS.

The CSS3 Goodness

Most of the CSS won’t be new to you but there are a few CSS3 properties that we’ll have a look at including gradients, embeddable fonts and text shadow.

View the CSS here

Let’s begin by looking at how this page behaves visually in a browser that supports CSS3. View the demo in the latest versions of Safari, Chrome or Firefox to see the full effect. Or see the screenshots below:

@font-face

While this example uses @font-face on every instance of text, I wouldn’t recommend doing so on large websites. Also, using some fonts as body text may case text to become hard to read. Don’t get carried away. This theme uses Yanone Kaffeesatz at a large enough size to make it very readable and differ enough from the regular web-safe fonts.

@font-face { font-family: Keffeesatz; src: url(YanoneKaffeesatz-Light.otf) format("opentype") }
@font-face { font-family: KeffeesatzBold; src: url(YanoneKaffeesatz-Bold.otf) format("opentype") }

RGBa

With RGBa you can declare a colour and an opacity as a single property. Not only that but it can be applied to anything that uses colour. To demonstrate this, the image link and input borders have RGBa applied. You can see the subtle background texture show through, especially noticeable on the input elements in the form.

input[type="text"] { border: 5px solid rgba(122, 192, 0, 0.15); }

The first three values (122, 192, 0) are the red, green and blue values of the colour with the fourth (0.15) being the alpha value, or opacity.