Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML Introduction to HTML and CSS HTML: The Structural Foundation of Web Pages and Applications The Basic Structure of a Web Page

Fredrik Rönnehag
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

When 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 😊

Fredrik Rönnehag
Fredrik Rönnehag
2,342 Points

I 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!

<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
Fredrik Rönnehag
2,342 Points

Alright. So header and footer are pretty much optional? You could just make a div class for the header and footer and use that instead?

You 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.