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
Ian Mackenzie
11,062 PointsConfused with this lesson about the deletion of the header to ad a fixed navbar.
Why was it necessary to delete the header before adding the fixed navbar? This was not explained.
Also, isn't it important for semantics for a header to be included in a web page?
4 Answers
Kevin Murphy
24,380 PointsHi Ian,
Where I believe you are confused is the function of the hard-coded html "header", versus the functionality/styling provided via Bootstrap. The header section is a "placeholder" in the document. This whole section is no longer needed once the functionality/styling for the navbar are enabled by adding the bootstrap navbar classes.
Also to touch on your second question - generally the jumbotron component, combined with the navbar, serve the same function as the "header" element would if you were not working with Bootstrap. That's how I understand it anyway :)
SERGIO RODRIGUEZ
17,532 PointsHi Ian!
I have a similar question regarding the negative effects that removing the "header" and "nav" tags may have on your SEO. I really don't feel that confortable not including those types of elements in my markup.
In my opinion, the fact that headers display the same as divs by default (i.e as blocks) doesn't mean that they are actually equivalent from a semantic/SEO standpoint.
Fortunately I experimented a little with bootstrap and apparently you may replace the first div element (the one that has the navbar navbar-inverse and navbar-fixed-top classes) with a header element and there will be no change in the styling of the page.
You may also include the nav element wrapping the ul of your navigation and no change will occur on styling.
This will give you the best of both worlds, semantic meaning and styling.
Hope this is still useful.
Sergio
Ian Mackenzie
11,062 PointsHi Kevin and thanks for the reply.
Ok, so when you add the navbar component there is no need for the header. Still it doesn't not seem to make sense in HTML 5 semantics as the header and nav elements are quite separate from each other.
Can you nest a navbar component in a header component in Bootstrap, or is this not done?
Kevin Murphy
24,380 PointsIan, my understanding is that the header and nav elements are simply divs with clarified semantic meaning. You can just as readily call everything div and assign those divs semantic classes - best practices and default styling may vary but structurally it's the same.
So to answer your question - it seems to me you would just be wrapping/nesting the navbar with a div you are asking to assume the semantic meaning of "header". If I'm understanding your question right, the answer is yes.
Ian Mackenzie
11,062 PointsOk, I understand, thanks for your explanation and solution.