Now that we have done all the basic housekeeping with respect to our project, let us look at the actual task of building this site. We will first start with the markup, jump into the stylesheets, and finally add interactivity with scripts.
We have a simple design in mind for our Sun and Sand festival project. The design is shown in the following screenshot:
Looking at how it is organized, the broad structure of the page is explained as follows:
- Header: A banner logo with a set of navigation links
- Main content: The meat of the page with sections that the navigation links will link to
- Left column: This contains the main content
- Right column: This contains the secondary information that would be interesting to the viewers, but not essential
- Footer: Sponsor logos and an audio player with music of artists, who will be participating in the festival
The HTML5 Doctor
has a list of all elements that you can use in a web page at html5doctor.com/element-index/. Comparing this to the list we made earlier, it looks like the header tag would be good to park our logo and navigation links in, while the sponsor logos and audio player can go inside the footer tag. That leaves us with the main content; it seems like the div tag with the role of main would be the best fit for it!
Here is the markup we end up with. The index.html page in Chapter 2, Starting Your Project, contains the following code as well:
<header>
<a href="#main">Skip Navigation</a>
<h1>Sun & Sand Festival 2012</h1>
<h2>Ngor& Terou Bi, Dakar</h2>
<nav class="site-nav">
<a href="#tickets">Tickets</a>
<ahref="#about">About</a>
<a href="#line-up">Line-up</a>
<a href="#contact">Contact</a>
<a href="#gettinghere">Getting Here</a>
</nav>
</header>
<div role="main">
<section id="primary">
<article id="tickets">
</article>
<article id="about">
</article>
<article id="lineup">
</article>
<article id="contact">
</article>
<article id="gettinghere">
</article>
</section>
<aside id="secondary">
<article>
<h2>Get some sun!</h2>
<ul>
<li>Follow us on <a href="http://twitter.com/sunnsand">twitter</a>!</li>
<li>Stalk us on <a href="http://facebook.com">facebook</a>!</li>
<li>Get some sun through <a href="http://flickr.com/photos/sunnsand">flickr</a>!</li>
</ul>
</article>
</aside>
</div>
<footer>
<article class="sponsors">
<a href="#">Boca-Cola</a>
<a href="#">Darbucks</a>
<a href="#">Kugle</a>
<a href="#">Pling</a>
</article>
<audio src="audio.webm" controls></audio>
</footer>Tip
You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the files e-mailed directly to you.
With HTML5, we have a glut of elements to choose from, causing choice paralysis for some of us. If there is anything in the structure of your document that seems to very obviously fit any of the new elements, go ahead and mark them so. If they don't, continue using div or any other element that seems to obviously fit.
In our code, we use the section element when we have primary content that is structurally different and the article element for which we have similar, but repeating sections of content. Your views on these choices may well be different; in which case, I recommend you choose what you are comfortable with.
If you wish to know more about the new HTML5 elements, I recommend you check out the chapter on semantics in HTML5: Up & Running, Mark Pilgrim, O'Reilly, under the Google Press imprint, at diveintohtml5.info/semantics.html.
Writing valid markup ensures your page behaves consistently across all browsers that render it. Valid markup refers to markup that adheres to the Web standards that browsers comply with. This way, you will prevent any unpredictable behavior.
The easiest way to write valid markup is to use tools that validate it instantly as and when you save your file.
In Chapter 2, Starting Your Project, I recommended using Sublime Text and Vim for Web development. Both of these tools have inline validation that you can use to write valid markup. Moreover, these tools also provide autocompletion of tags and elements that make writing valid markup trivial.
In the event of you not having access to these tools, I recommend using validator.w3.org/ to validate your markup.
It is essential to have these tools automated for you to make sure you reduce any issues with your site to the absolute minimum.