What is the difference between <header> and <h1>?

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

H1 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/

Hey 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:

HTML5 Semantic Elements

Good luck with the course!