Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Fredrik Rönnehag
2,342 Points<Header> or <div class="navbar">
Hello, I have a question about the <header> and <footer> tags. When I did some code on my own before this course, I've both seen the examples with <header> and <footer> but also I've seen everything written inside the <body> as <div> with different classes, example navbar for the navigation bar. This is through bootstrap.
What's the difference and when should you use <header> <footer> compared to just <div>?
3 Answers
furkan
11,733 PointsWhen HTML was first used, developers would often use <div> for each separate content on the webpage, with different classes or even id's, as you have specified. The element <div> just means division, and does not really have an appropriate meaning.
With the development of the new HTML5 specification, developers added the <header> and <footer> elements to better make sense of what is being presented on the webpage: for usability, SEO purposes, thus adding meaning to the content being displayed. You will often hear about how modern websites are built upon the principles of semantic markup. Well... you would not be wrong to guess that the <header> and <footer> elements are actually a form of semantic markup.
So what's with the div thing?
The div, header, and footer all work the same way, but what distinguishes them is the name. Instead of giving div for everything on the page, we now have clear names to separate our contents 'semantically' (meaningfully).
I hope that helps. If you need more help search the mozilla developer network. All the best 😊
Alexander Davison
65,469 Points<header> and <footer> usually refer to the header of the page and the footer of the page, respectively. However <div> can refer to any general section of a page.
Fredrik Rönnehag
2,342 PointsAlright. So header and footer are pretty much optional? You could just make a div class for the header and footer and use that instead?
furkan
11,733 PointsYou are welcome. And yes you shpuld start using header and footer (they're quite easy to pick up and understand). I am glad that has helped.
Fredrik Rönnehag
2,342 PointsFredrik Rönnehag
2,342 PointsI understand, thank you. So <header> <footer> are actually newer things? I thought it was the other way around. Been building some sites with bootstrap and with css bootstrap you don't really use header and footer, maybe I should start implement them though. Better to learn the correct way!