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&g开发者_StackOverflow社区t;
<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 unacessary Div.
- Use the Time Tag instead of Div for Time Element.
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>
In addition to @Simon Arnold's fine answer, I might also suggest that the <nav>
usage is incorrect. A single link in a footer can hardly be construed as a "major navigation block". See the first note in green text at http://dev.w3.org/html5/spec/sections.html#the-nav-element
精彩评论