I’m on a project involving converting HTML code to HTML5, and I’d like some feedback as to whether I’m coding correctly or not.
Here’s my stripped-down code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page Title Goes Here</title>
<!--[if IE 9]>
<script src="/jsp/fileFolderPath/js/html5shiv.js"></script>
<![endif]-->
<link rel="stylesheet" href="/jsp/fileFolderPath/css/global.css">
<!--[if IE 7]> <body class="ie7"> <![endif]-->
<!--[if IE 8]> <body class="ie8"> <![endif]-->
<script src="/jsp/fileFolderPath/js/jquery-1.4.2.min.js"></script>
<script src="/jsp/fileFolderPath/js/jquery.colorbox-min.js"></script>
<script src="/jsp/fileFolderPath/js/tip.js"></script>
<script src="/jsp/fileFolderPath/js/jquery.calendar.js"></script>
<script src="/jsp/fileFolderPath/js/modernizer-2.0.6.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#whatsthis').mouseover(function(){
tooltip.show('Tooltip text goes here');
}).mouseout(function(){
tooltip.hide();
});
$('#printthis').mouseover(function(){
tooltip.show('<strong>Print</strong>');
}).mouseout(function(){
tooltip.hide();
}).click(function(){
printCalendar();
});
});
</script>
</head>
<body>
<!-- container start -->
<div id="container">
<!-- header start -->
<header>
<figure>
<img src="headerImg.png" width="600" height="100" alt="header image">
</figure>
<div class="clear"> </div>
<nav>
<!-- header code goes here - this is actually an include file -->
</nav>
</header>
<!-- header end -->
<nav>
<!-- primary navigation start -->
<div class="clear"> </div>
test
<!-- primary navigation end -->
</nav>
<!-- Application Name start -->
<div id="applicationName">mySchedule <a href="#" id="whatsthis"><img src="images/what-this.png" width="21" height="21" alt=""></a>
<!-- breadcrumbs start -->
<nav>
<div id="breadcrumbs">
<ul>
<li><a href="#MyConnections">Home</a></li>
<li>→</li>
<li><a href="#Exhibitors">mySchedule</a></li>
</ul>
</div>
</nav>
<!-- breadcrumbs end -->
</div>
<!-- Application Name end -->
<!-- Features Toolbar start -->
<div id="features" class="right">
<div class="featuresAddOn"> <a href="#" id="printthis">Print mySchedule</a></div>
</div>
<!-- Features Toolbar end -->
<div class="clear"> </div>
<!-- Left Side Bar start -->
<div class="left">
<nav>
<!-- Application Navigation start -->
<div id="appMenuContainer">
<div class="appMenu">
<h4 class="firstitem"><a href="/jsp/Myclients/Myclients.jsp?action=ClientMyMatchTab">Client Matching</a></h4>
</div>
<div class="appMenu">
<h4 id="MyClient" class="menuitem header"><span><a href="/jsp/Myclients/Myclients.jsp">MyClients</a></span></h4>
</div>
<div class="appMenu">
<h4 id="MySched" class="menuitem header"> <span><a style ="cursor:default">MySchedule</a></span></h4>
</div>
<div class="appMenu">
<h4 id="MyHel" class="menuitem lastitem"> <span><a href="/jsp/Myclients/help.jsp">Help</a></span></h4>
</div>
</div>
<!-- Application Navigation end -->
<nav>
<!-- Alert Box start -->
<aside>
<div id="AlertBox" class="margin-bottom margin-top">
<div class="title">Alert</div>
<div class="contentAlert lastItem"> You have <span class="count New_Time">0</span> New Time Proposed Notifications. </div>
</div>
</aside>
<!-- Alert Box ends -->
</div>
<!-- Left Side Bar end -->
<section>
<!-- Content -->
<div id="calendar"></div>
</section>
<div class="clear"> </div>
</div>
<!-- container end -->
<footer>
© MyCompany, Inc. 2011
</footer>
</body>
</html>
-
Among the requirements of the project
are that the website use HTML5, and
support IE7, IE8, and IE9. This is
why I’m using conditionals for the
stylesheets. With the requirements specified, is this the correct approach?The html is on a jsp page, which
contains a lot of dynamic code. I did
not include that in the example.I have 3 navigational areas – one in
the header, the dashboard (underneath
the top header), and the side
navigation. Do these each need ids?The side navigation is the same as
the breadcrumbs – so should the
breadcrumbs be encased within nav
tags?This is one page of several. The
content on all of the pages appears
within the div id=”calendar” tag.
This is dynamically replaced
depending on the client. This page looks like a calendar/schedule, for which clients can set appointments. Other pages look like either table lists/shopping carts, or forms. Apart from updating
the tags to HTML5, pretty much all
content is built using divs, so I
intend to leave them as such. I think
they all should be encased withing
section tags though. With this description, is it appropriate to use the section tag here?I encased the alert box underneath
the left side navigation in aside
tags. The alert box content is
related to the calendar content – it alerts a client if an appointment has been set on the calendar – but
wouldn’t make sense if it stood on
it’s own. Is this correct?
BTW, I’m a web development contractor brought in on this project. So I’m basically updating existing code.
I’ve gone through other the other posts, other online references and a couple books. I think I’m on the right track. I just would like some confirmation before moving forward.
Thanks.
Stephen
UPDATE: OK. I’ve made updates to my code above based on all of the recommendations, and I ran it through a validator (successfully).
I’m still a little unsure about three things:
-
If I understand correctly HTML5Shiv is a workaround that enables HTML5 elements in older versions of IE. Modernizr does something similar and handles HTML5 elements and CSS3. I’m not sure if this helps with the alternate stylesheets I have for IE7 and IE8. These are there for display/design issues, so I believe I need to continue to refer to them until the code that uses those classes is updated. They have nothing to do with CSS3 specs.
-
Saeed mentioned using the figure tag. Had to look that one up. The first image I’m using is the header logo, which is on all pages. So, that sounds like that tag would work for the header logo. Alternately, I wouldn’t use it for, say, the help link (what-this.png), which is just a question mark icon. Correct?
-
Regarding the header and footer, the reason I put the divs inside the tags was because there are styles attached to them. Since I removed them, I’ll now add the styles to the header and footer tags. Is that the correct way to do this? If not, where do the styles go?
Thanks.
Here is the list of recommendations:
<div id='header' />inside<header>, because it ruins the purpose of being semantic<img>tags inside a<figure>tag.<nav>wherever you have a list of links. It’s the navigation element’s purpose.addEventListenerinstead ofonmouseoutattribute, for example)