10. The Semantic Header and Footer Gone are the days of: view plain copy to clipboard print ? < div id = "header" >
...
</ div >
< div id = "footer" >
...
</ 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 plain copy to clipboard print ? < header >
...
</ header >
< footer >
...
</ footer >
It’s fully appropriate to have multiple header s and footer s 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 .