Creating semantic markup
Semantic markup is important for several reasons, including search engine optimization, creating maintainable architectures, making code easily understandable, and meeting accessibility requirements. However, you should be familiar with structuring your page with markup that is related to your content. There are new elements within the HTML5 specification that help to ease this process, including the <header>, <nav>, <footer>, <section>, <article>, and <aside> elements. Each one of these elements helps describe the aspects of a page and easily identifies components of your application. In this section, let's structure our applications, beginning with our Video application.
Creating the header
First, let's start by giving our main index page a title and a header that describes the page we are on. Let's open the main index.html file in our application at /index.html.
Find the <title> tag and enter it in iPhone Web Application Development - Home. Note that we use a hyphen here. This is important since it makes it easier for users to scan the content of the page and helps with the ranking for specific keywords.
You should now have the following <title> in the <head> tag of your document:
<title>iPhone Web Application Development - Home</title>
Now we want the content of the page to reflect the title as well and alert the user of their progress on our site. What we want to do is create a header that describes the section they are on. In order to achieve this, let's place the following code before the navigation we created previously. Your code should then look like this:
<hgroup>
<h1>iPhone Web Application Development</h1>
<h2>Home</h2>
</hgroup>
<nav>...</nav>
The <hgroup> element is used to group multiple headers for a section. The rank of the headers is based on <h1> to <h6>, with <h1> being the highest rank and <h6> the lowest. Therefore, the highlighted text places our <h1> content higher than our <h2>.
Also note that we are not using the <section> element yet. However, this page does validate using the W3C Markup Validation Service (http://validator.w3.org/). We can further describe the page by wrapping our <hgroup> and <nav> elements within a <header> element to give the page an introductory aid. Once you do this, you should have the following code:
<header>
<hgroup>... </hgroup>
<nav>... </nav>
</header>
With the previous code, we have finally given our page some structure. We are describing our page with a main header for the site and a sub header for the page. We have also given the page a navigation menu, allowing the user to navigate across applications.
Creating the footer
Now let's add a <footer> that contains the name of copyright date:
<footer>
iPhone Web Application Development © 2013
</footer>
The previous code will basically relate to the nearest sectioning ancestor. Thus the footer will relate to the content before it, which we will fill in a bit later. At this point, your content should look like this:
<div class="site-wrapper">
<header>
<hgroup>...</hgroup>
<nav>...</nav>
</header>
<footer>...</footer>
</div>
Clearing up section
You may be wondering why we are not using the <section> element right away for the <div> element that contains both the <header> and <footer> element. In this case, it's not necessarily useful since we are not creating a page where the element's contents would be listed in an outline. This is the suggestion by the W3C and is something every developer should be aware of when deciding which element to use, <div> or <section>. In the end, it comes down to the content itself and the outline the team wishes to create.
Now that we have a basic structure for our pages, we can go ahead and do the same for the rest of our applications.
With this in mind, we will move forward with our application development, making sure that we use semantic code when and where it makes sense.