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

HTML How to Make a Website HTML First Create the Content Containers

Paul Barron
Paul Barron
6,595 Points
Posted by Paul Barron
Paul Barron
6,595 Points

elements

Why make header, section, footer elements? Why not make divs instead? What's the purpose of the former element tags?

6 Answers

Adam East
Adam East
2,424 Points

You can use either one.

However keeping the structure of a website easy to follow is key to building a strong website foundation.

Take this for example.

If you were working on a site with someone else and they said the code in the header needs to be edited to "This example here"

You would then navigate to the header of that page.

If the header was instead named html <div id="my_websites_top_bar_that_looks_like_a_header"> </div>

If would not make much sense right? :P Granted you can just name the id header, but why write extra code when header is faster and more semantic? :P

Emilio Queiroz
Emilio Queiroz
3,710 Points
Emilio Queiroz
Emilio Queiroz
3,710 Points

Many of existing web sites today contains HTML code like this: <div id="nav">, <div class="header">, or <div id="footer">, to indicate navigation links, header, and footer.

HTML5 offers new semantic elements to clearly define different parts of a web page: <header> <nav> <section> <article> <aside> <figure> <figcaption> <footer> <details> <summary> <mark> <time>

see in this page: http://www.w3schools.com/html/html5_semantic_elements.asp

Cena Mayo
Cena Mayo
55,236 Points
Cena Mayo
Cena Mayo
55,236 Points

This StackOverflow article has some good commentary on this. Basically, in HTML5, divs have no semantic meaning, but elements like header, section, etc do. They also help increase accessibility on your site for things like screenreaders for the visually impaired.

Nemanja Veselinovic
Nemanja Veselinovic
1,093 Points
Nemanja Veselinovic
Nemanja Veselinovic
1,093 Points

Hi Paul,

Nice to see you around. I started using Tree House to re-learn HTML/CSS as I knew some of it before. It these tutorials (at very beggining) I guess Nick is using those header, sections and footer elements to simplify the website structure to begginers. Using div's right away will just confuse them more. At this first and start lessions, as yet css is not fully included, its good to start with simplified elements like Nick did.

I haven't looked at the lessions after, but I think thats the trick.

Paul Barron
Paul Barron
6,595 Points
Paul Barron
Paul Barron
6,595 Points

Thanks for your responses. I kind of jumped into web design head first and am grateful for your insights.

Adam East
Adam East
2,424 Points
Adam East
Adam East
2,424 Points

That is the best way to start! If you take it slow you really do not learn as much as just jumping in an learning to swim. Welcome to Web Design.