HTML and CSS Reference
In-Depth Information
Looking at how it is organized, the broad structure of the page is explained as fol-
lows:
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 in-
teresting to the viewers, but not essential
Footer : Sponsor logos and an audio player with music of artists, who will
be participating in the festival
Creating the markup
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 &amp; Sand Festival 2012</h1>
<h2>Ngor&amp; 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>
Search WWH ::




Custom Search