I'm just starting a new app. Below is a basic mockup of what I am tasked to do. I'm new to using HTML5 for my semantic markup so I'd like some feedback/help.
I'd like to understand how/where to use things like <nav>
and <section>
<div id="container">
<header>
<div id="appInformation">
<a href="#" alt="Home">
<img src="">
</a>
<span>Selected AppName</span>
</div>
<div>
<span id="time">TIME GOES HERE</span>
</div>
<div>
<a href="#" alt="Additional Information">
<img src=""><!-- This is will be the location of the the 'i'-->
</a>
</div>
<div class="">
<label>UserName</label>
</div>
</header>
<div id="main">
<!-- main content for the selected app here -->
</div>
<footer>
<div id="appVersion">
VERSION # HERE
</div>
<nav>
<ul>
<li>
<a href="#">FAQ</a>
</li>
</ul>
</nav>
<div id="">
<!-- Team logo here-->
</div>
</footer>
Avoid Label if you don't have anything to refer too, like an input.
Selected AppName <time datetime="YYYY-MM-DD">TIME GOES HERE</time><!-- Don't need an id Time since you can target the Time tag -->
<a href="#" alt="Additional Information">
<img src=""><!-- This is will be the location of the the 'i'-->
</a>
<em>UserName</em> <!-- Don't use a label if you got nothing to refer too, like an input for example. -->
</header>
<div id="main">
<!-- main content for the selected app here -->
</div>
<footer>
<div id="appVersion">
VERSION # HERE
</div>
<nav>
<ul>
<li>
<a href="#">FAQ</a>
</li>
</ul>
</nav>
<a href="yourTeamUrl" id="">
<!-- Team logo here-->
</a>
</footer>