HiveBrain v1.2.0
Get Started
← Back to all entries
patternhtmlMinor

Structure of website columns and navigation

Submitted by: @import:stackexchange-codereview··
0
Viewed 0 times
websitecolumnsnavigationstructureand

Problem

I have made this HTML5 structure for a new website I am working on. I'd like to know if there is a more elegant approach to doing it.

  • Is the wrapper for the two column considered bad practice?



  • Should the secondary navigation on the left be an article or a div?




    
        header
    
    
          
        
            
                
                    H1 title
                    Lorem ipsum dolor sit amen lorem ipsum dolor sit amen
                
            

            
                
                    - main navigation
                    - main navigation
                    - main navigation
                
            

            
                button call to action
            

            
                Title h2 secondary menu
                
                    navigation
                    navigation
                    navigation
                
            

            
                Title h2 secondary menu
                
                    navigation
                    navigation
                    navigation
                
            
        

          
        

            
                slideshow widget
               

            
                review widget
               

            
                product grid title
                Text text text lorem ipsum dolor sit amen 
                
                    
                        product 1
                        product 2
                        product 3
                    
                
            
                product grid title
                Text text text lorem ipsum dolor sit amen 
                
                    
                        product 1
                        product 2
                        product 3
                    
                
            
        
    

    /div>

    
    
        footer
    

Solution

-
Don't worry about wrapping your content too much if the style cannot be achieved without it. If it can, the extra wrap may be overkill.

-
Your markup relies a lot on the ` where it may not be necessary. For instance, you put one tag into another, which is odd. You also put and tag into the , which is also odd.

If you want simple containers, I would recommend you stick with
s with semantic class` attributes. They have been around for a while and used for wrapping other tags. They are the tried and true method and their lack of semantic meaning will not confuse the reader or crawler.

Context

StackExchange Code Review Q#21166, answer score: 2

Revisions (0)

No revisions yet.