Create a basic HTML5 page with the new layout tags

How to build a simple and semantic one-page template with HTML5

Create a basic HTML5 page with the new layout tags

How to build a simple and semantic one-page template with HTML5

This article originally appeared in Web Designer issue 181, you can download the cover CD tutorial files by clicking here.

In this tutorial, we’re going to build a one-page template using some of the next-generation techniques from HTML5. Everyone’s talking about HTML5, it’s perhaps the most-hyped technology since people started putting rounded corners on everything. Apparently though, HTML5 won’t be completely supported until 2022, but this is a misconception based on the projected date that HTML5 will reach the stage in the W3C process known as Candidate Recommendation (REC).All this means is that the spec won’t be completely finished until you can use all of it, and in at least two browsers. But don’t let that stop you from using the new tags now – after all, this industry moves so damn fast that it’s nice to be able to stay ahead for once!

HTML5 introduces a bunch of new elements that will make our pages more semantic, cleaner and faster. It also includes fancy APIs for drawing graphics on screen, storing data offline, playing video and a lot more. The web industry is buzzing right now with the introduction of both HTML5 and CSS3, and if you couple that with jQuery (or any other JavaScript library), then you have some very powerful, sought-after skills all ready to take the industry by the scruff of the neck! So open up the supplied PSD design (on the CD) and let’s get cracking…

01 Set things up

Before we jump into Photoshop, it’s always a good idea to create the basic markup first. Open up a new file in Dreamweaver (or your chosen editor), and name it ‘index.html’ and add the new and very simple doctype and head section. It isn’t even necessary for HTML5, but it’s used for current and older browsers that require a specified doctype. Browsers that do not understand this doctype will render the markup in Standards mode.

001 <!DOCTYPE html>
 002 <html>
 003 <head>
 004 <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8”>
 005 <!--[if lt IE 9]>
 006 <script src=””></script>
 007 <![endif]-->
 008 <link rel=”stylesheet” href=”styles.css”>
 009 <title>Web designer</title>
 010 </head>

02 Inside the head

As you can see, the new doctype is much cleaner than what you would have if you were writing HTML4 or XHTML. You will also notice the link to the style sheet is missing its type attribute. This is no longer necessary, as it’s implied that this link refers to style sheets. This is also true for any links to scripts that you may use.

001 <link rel=”stylesheet” href=”styles.css”>
 002 <script src=”js/scripts.js”></script>

03 HTML5 shiv

In IE, excluding the newest version (IE9), you cannot apply styles to elements that the browser does not recognise and our new HTML5 elements, in all their glory, are not recognised to CSS rules. This is where Remy Sharp’s html5shiv comes to the rescue.
Simply include the link in your page’s <head> section and you will be able to style the new HTML5 elements without fear.

001 <!--[if lt IE 9]> 
 002 <script src=””></script>
 003 <![endif]-->

04 Header tag

The days of using Divs and IDs are now numbered and Divs, by nature, have no semantic structure. So instead of using <div id=”header”>, we can just drop in the HTML5 header tags inside our wrapper div. Please note that the header tags are not necessarily used to section the ‘top’ of our page and can be used on other parts of the document. However, it just makes sense to place them here.

001  <div id=”wrapper”>
 002     <header>
 003     </header>
 004   </div><!-- END wrapper -->

05 Add the navigation

Looking at our design, we are going to need a horizontal navigation along the top-right, and naturally the best place for this would be inside the header tag. Again this is simplified by HTML5, as we can just add the new nav tags. Inside those we can add our unordered list with our page links, just as we would normally.

001 <div id=”wrapper”>
 002 <header>
 003   <nav>
 004 <ul>
 005  <li><a href=”#”>home</a></li>
 006  <li><a href=”#”>about</a></li>
 007  <li><a href=”#”>portfolio</a></li>
 008  <li><a href=”#”>blog</a></li>
 009  <li><a href=”#”>contact</a></li>
 010 </ul>
 011   </nav>
 012 </header>
 013 </div><!-- END wrapper -->

06 The Section tag

Probably one of the most confusing things to figure out when creating an HTML5 layout is whether or not to use <article> or <section>. There is a subtle difference and you will see people placing <article> inside <section> and <article> will contain content such as blog posts or links ect. So here, <section> sounds more semantic and we will place a <blockquote> tag for our testimonials inside that.

001 <section>
 002     <blockquote>
 003         <h1>Couldn’t be happier, the service was great!</h1>
 004          <p class=”client”>joe bloggs</p>
 005 </blockquote>
 006     </section>

07 Finish the markup

Let’s finish things off by adding the sidebar and footer tags. Again, instead of writing <div id=”sidebar”> and <div id=”footer”>, we can use the <aside> and <footer> tags. Even though we won’t be using scripts here, if you do use them it’s good practice to place them inside the footer and link your jQuery to Google’s Content Delivery Network (CDN). See the cover disc for this step’s full code.

001         <aside>
 002         </aside>
 003         <footer>
 004         </footer>
 005 </div><!-- END wrapper -->
 006  <!-- Scripts -->
 007  <script  src=””></script>

08 Slice the design

If you haven’t already done so, open up the supplied PSD file. First of all we will need a slice of the inner (wrapper) background. So, hide all layers apart from the inner bg layer and select the rectangle Marquee tool. Drag from the top down to the bottom about 20px wide. Choose Copy Merged>New File> Paste and Save for web and devices as a transparent PNG, called ‘bg.png’ in a folder named ‘images’.

09 Slice the logo

Now with the Selection tool still selected, drag out a selection around the logo making sure you give it enough room for the drop shadow that’s applied to it. Then hide the background layer (giving it a transparent background), and follow the same steps as before, finishing by saving it in your images folder as ‘logo.png’.

10 Navigation bar

Now let’s grab our navigation bar. Again with the Selection Marquee tool, drag out around the navigation bar remembering to include the drop shadow, hide the text buttons and background and then Copy merged> New file>Save for web and devices as a transparent PNG.

11 The latest design line

To complete our header section, we need to make another selection around the ‘latest design’ line and save that as a transparent PNG file in our images folder. Saving all these as transparent PNGs will give you the option to change the background colour if you ever wanted later on.

12 The tag line

Let’s make a selection around the tag line and save that as a transparent PNG to our images folder. The font used here is Century Gothic and is used as a good straight-to-the-point mission statement that highlights the words ‘build’ and ‘business’. This will go nicely inside our <section> tag.

13 Latest design

Now for our latest design image. Again let’s make a selection around the image, making sure we include the reflection. This will become our sidebar and slot nicely inside our new shiny HTML5 <aside> tag.

14 Blockquote

As you will see by the final mockup, we need to include an image of a quotation mark inside our semantic blockquote section. Make a selection around the quote image, hide the background layers and save that as a transparent PNG. There is nothing else we need to do here, as we will add a little CSS3 to give this its final effect.

15 The footer

Now we can take a small section of the footer and using CSS, we can repeat it horizontally inside our new HTML5 <footer> tag. Again using the Rectangle Marquee tool, make a selection of one spike, go to Copy Merged>New file>Paste (Ctrl+V) and save as ‘footer.png’. The last thing we need to do in Photoshop is make a selection around the footer logo.

16 The styles

We’re now all ready to start building our page by piecing it altogether using good old CSS. Create a new file and call it ‘styles.css’ and open it up in Dreamweaver. Then at the very top we can add our reset, which will make sure we are working on a level playing field.

001 /* CSS reset - best to start from scratch */
 002 html, body, div, span, applet, object,
 iframe,h1, h2, h3, h4, h5, h6, p,
 blockquote, pre,a, abbr, acronym, address,
 big, cite, code,del, dfn, em, font, img,
 ins, kbd, q, s, samp,small, strike, strong,
 sub, sup, tt, var,b, u, i, center,dl, dt,
 dd, ol, ul, li, fieldset, form, label,
 legend, table, caption, tbody, tfoot, 
 thead, tr, th, td {
 003     margin: 0;
 004     padding: 0;
 005     border: 0;
 006     outline: 0;
 007 }
 008 ol, ul, li{
 009     list-style: none;
 010 }

17 Display block

Unfortunately, good old Internet Explorer requires a bit of a talking to in order to understand the new HTML5 elements. By default these are displayed as inline elements, so in order to ensure that they render correctly as block level elements, it’s necessary at this time to style them as such.

001 header, nav, footer, section {
 002     display: block;
 003 }

18 Background and header

Now let’s set the font size and font family and set the background colour to #babaa9. We want our page to sit inside a 1,024 x 768 resolution, and setting the wrapper to 960px will accomplish this. Then include the wrapper’s background and using our new header selector we can set the header’s width to 900px.

001 body {
 002     background-color: #babaa9;
 003     font-family: Verdana, Geneva, sans-serif;
 004     font-size: 12px;
 005 }
 006 #wrapper {
 007     width: 960px;
 008     height: 1000px;
 009     margin: 0 auto;
 010     background: url(‘images/bg.png’)repeat-x;
 011 }
 012 header {
 013     width: 900px;  
 014 } 

19 Finish the header

Now jump back into our index.html file and just underneath the opening <header> tag, we can add the link to our logo and link it back to itself. All you should need is 15px left margin to the logo for it to sit nicely. Before we close out our header section, just underneath the closing </nav> tag, let’s add the link to our latest design line image.

001  <a href=”index.html”><img src=”images/logo.png” height=”112” width=”298” id=”logo” /></a>
 002 <img src=”images/latest_line.png” height=”24” width=”900” id=”latest_line” />

20 Navigation

Go back into the styles.css file and add the CSS to our navigation. Then to finish off our header section, we can add a rule to style our latest design line, positioning it nicely by giving it a top and left margin.

001 nav {
 002     float: right;
 003     width: 550px;
 004     height: 45px;
 005     margin: 40px -120px 0 0;
 006     background: url(‘images/navbar.png’)no-repeat;
 007 }
 008 nav li {
 009     display: block;
 010     float: left;
 011     margin-top: -5px;
 012     font-size: 14px;
 013    text-transform: capitalize;
 014 }
 015 nav li a {
 016     text-decoration: none;
 017     margin-left: 23px;
 018     padding-right: 23px;
 019     color: #b4b492;
 020     font-weight: bold;
 021 }
 022 nav li a:hover { color: #635c49; font-weight: bold;}
 023 .current {
 024     color: #635c49; 
 025 }
 026 #latest_line {
 027     margin: 25px 0 0 25px;
 028 }

21 Section area

Using the new section selector we can float it left. Inside that we have our tag line, floated left with a bit of margin to position it. Then, we have used a bit of CSS3 to style our testimonial blockquote area that only targets webkit browsers (safari, Chrome) and firefox.

001  section {
 002     float: left;
 003     width: 500px;
 004 }
 005 #tag_line {
 006     float: left;
 007     margin: 60px 0 0 20px;
 008 }
 009 blockquote {
 010     float: left;
 011     margin: 15px 0 0 25px;
 012     width: 375px;
 013     padding: 45px 45px 35px 90px;
 014     background:url(‘images/quotes.png’) no-repeat 20px 20px rgba(178,178,169,0.2);
  015     min-height:90px;
 016     -moz-border-radius:12px;
 017     -webkit-border-radius:12px;
 018     border-radius:12px;
 019 }
 020 blockquote, h1 {
 021     font-family: Century Gothic, “Courier New”,
 022 Courier, monospace;
 023     font-size: 18px;
 024     font-weight: none;
 025     color: #999;    
 026 }
 027 .client { 
 028     font-size: 13px;
 029     float: right;
 030     margin-top: 50px;
 031     color: #693;
 032 }

22 Final styles

Now we can style our <aside> tag (the sidebar) and position that over to the right and create the path to our latest design image. Then we include our footer background and repeat that horizontally. And to finish things up, as we are using HTML5, let’s add the logo which you can download from here and we have used the size 64px.

001 aside {
 002     background: url(‘images/sidebar_design.png’) no-repeat;
 003     float: right;
 004    height: 495px;
 005    width: 353px;
 006     margin: 30px 30px 120px 0;
 007 }
 008 footer {
 009     background: url(‘images/footer_bg.png’)repeat-x;
 010     width: 960px;
 011     height: 229px;
 012     clear: both;
 013 }
 014 #footer_logo {
 015     float: right;
 016     margin: 100px 50px;
 017    font-size: 9px;
 018 }
 019 #HTML5_Logo {
 020     background: url(‘images/HTML5_Logo.png’)no-repeat;
 021     height: 64px;
 022     width: 64px;
 023    float: left;
 024     margin: 100px 50px;