Is the HTML5 code correct?

I'm on a project involving converting HTML code to HTML5, and I'd like some feedback as to whether my code is correct or not.

Here's my stripped-down code:

Page Title Goes Here

  
  

$(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();
    });
});

     
    

         
        
            
                
            
             
            
                
            
               
        

        
            
             
            test
            
        

        
        mySchedule 
             
            
                
                    
                        Home
                        →
                        mySchedule
                    
                
            
             
        
        

        
        
             Print mySchedule
        
        

          

        
        
            
                
                
                    
                        Client Matching
                    
                    
                        MyClients
                    
                    
                         MySchedule
                    
                    
                         Help
                    
                
                
            

            
            
                
                    Alert
                     You have 0 New Time Proposed Notifications. 
                
            
            
        
        

        
            
            
        

         

    
     

    
        © MyCompany, Inc. 2011
    

• Among the requirements of the project are that the website use HTML5, and support IE7, IE8, and IE9.

• I

• give the site heading in a h1 (probably in header); if the "headerImg.png" is your site name/logo, enclose it in h1 instead (and give the site name in alt)

• if your "headerImg.png" is a typical site header image, you shouldn't use figure

•   is no good style. You can probably use CSS instead.

• it's not clear to me why you have one nav inside of header and one after. Is the one in header not for major navigation of the site? Then you shouldn't use nav for it

• →: don't add this on its own li (better use CSS for it)

• Alert: use a heading instead (you can use h1 here)

• you could enclose "© MyCompany, Inc. 2011" in a small element (inside of footer)

Is "applicationName" some kind of (main) content on the page? In this case you should give a heading here and/or enclose it in a sectioning element (section resp. article). Otherwise the Left Side Bar nav would be in the scope of the whole page.

Because your aside is related to the main content in section, the aside should be inside of that section. At the moment it is related to the whole page.


I have more than one nav. Do each of these require an id?

You don't have to use an id for nav. Only use it if you need/want page anchors (so users can jump to a certain place).


Regarding the header and footer, previously I had divs that had 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?

Yes, you can (and probably should) style the elements directly. Only use div for styling if you need to group several elements.

StackExchange Code Review Q#3384, answer score: 2