HTML5 Features - The Semantic Header and Footer

10. The Semantic Header and Footer

Gone are the days of:

view plaincopy to clipboardprint?

1. <div id="header">  
2.     ...  
3. </div>  
4.   
5. <div id="footer">  
6.     ...  
7. </div>  

Divs, by nature, have no semantic structure — even after an id is applied. Now, with HTML5, we have access to the <header> and <footer> elements. The mark-up above can now be replaced with:

view plaincopy to clipboardprint?

1. <header>  
2.     ...  
3. </header>  
4.   
5. <footer>  
6.     ...  
7. </footer>  

It’s fully appropriate to have multiple headers and footers in your projects.

Try not to confuse these elements with the “header” and “footer” of your website. They simply refer to their container. As such, it makes sense to place, for example, meta information at the bottom of a blog post within the footer element. The same holds true for the header.