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![](https://ecs-static.teamtreehouse.com/assets/views/marketing/shared/community-banner-white-47072046c51352fe6a69f5e691ff5700b28bb11d45197d7bdf066d9ea3f72d0c.webp)
![Fang Fang Nan](https://secure.gravatar.com/avatar/97b0586c4c8e8dec76f7fe75901d0b3e?s=96&d=https%3A%2F%2Fecs-static.teamtreehouse.com%2Fassets%2Fcontent%2Fdefault_avatar-445fbbabfc8dc9188fb5967fe43322ee0c3e0dd1e10f378bf8343784af5a13eb.webp&r=pg)
Fang Fang Nan
1,034 PointsWhat is the difference between <header> and <h1>?
What is the difference between <header> and <h1>?
3 Answers
![Jennifer Nordell](https://uploads.teamtreehouse.com/production/profile-photos/5432702/micro_jen-square.jpg)
Jennifer Nordell
Treehouse TeacherI know it's confusing. The head element contains meta data about the document. The header element contains any items that should contain introductory information and often includes things like h1 elements, logos, and things about the author or company. Very often, it will also contain a navigation bar. The h1 tag stands for heading and helps to structure your document and tell web browsers/screen readers and others the importance of that element.
![mikes02](https://uploads.teamtreehouse.com/production/profile-photos/1846442/micro_mike-torosian.jpg)
mikes02
Courses Plus Student 16,968 PointsH1 is a typography heading and typically is used for your primary page heading, such as your page title, so in HTML you could use:
<h1>This is my page title</h1>
The header element, however, is used to group content that would serve as the header of the site, for example, or the header of an article. You will often see header used as the masthead, for example:
<header>
<img src="images/logo.png" alt="Logo">
<nav>
<ul>
<li><a href="page-1.html">Page 1</a></li>
<li><a href="page-12html">Page 2</a></li>
<li><a href="page-3.html">Page 3</a></li>
</ul>
</nav>
</header>
HTML5 Doctor also has an excellent write up on the use of header: http://html5doctor.com/the-header-element/
![Fang Fang Nan](https://secure.gravatar.com/avatar/97b0586c4c8e8dec76f7fe75901d0b3e?s=60&d=https%3A%2F%2Fecs-static.teamtreehouse.com%2Fassets%2Fcontent%2Fdefault_avatar-445fbbabfc8dc9188fb5967fe43322ee0c3e0dd1e10f378bf8343784af5a13eb.webp&r=pg)
Fang Fang Nan
1,034 PointsThank you!
![Daniel Gauthier](https://uploads.teamtreehouse.com/production/profile-photos/2147202/micro_Z_Logo__200px_.jpg)
Daniel Gauthier
15,000 PointsHey Fang,
Just a little history. Before HTML5 launched people would usually separate all of the sections of their pages using div elements and assigning them appropriate class names.
Once HTML5 launched, it introduced new 'semantic' elements which would allow us to structure our pages using tags that were created for the purpose of defining the common section types of a web page.
If you're interested, the linked page explains things a little more and provides a visual to give you an idea of how these new elements are meant to used.
Keep in mind a lot of people dislike W3Schools, but the information on the page is sound and relevant here:
Good luck with the course!
![Fang Fang Nan](https://secure.gravatar.com/avatar/97b0586c4c8e8dec76f7fe75901d0b3e?s=60&d=https%3A%2F%2Fecs-static.teamtreehouse.com%2Fassets%2Fcontent%2Fdefault_avatar-445fbbabfc8dc9188fb5967fe43322ee0c3e0dd1e10f378bf8343784af5a13eb.webp&r=pg)
Fang Fang Nan
1,034 PointsThanks!
Fang Fang Nan
1,034 PointsFang Fang Nan
1,034 PointsThank you!