Why some use header instead of h1?

1

Tell us what’s happening:
Why do some people use header instead of h1?

Is it because we can modify the title the way we want it?

is it because we can have multiple headers with similar properties? But we can use h2 for that. right?

thanks

Challenge: Build a Technical Documentation Page

Link to the challenge:

2

Hello there,

I realise you potentially thought of this question when seeing the user-stories of the project, but the question is not related to the Certification Projects. So, I have moved this to a more suitable subforum.

To answer your question. It mostly has to do with Accessibility. The header and h1 tags are not to be used interchangeably.

W3Schools explains the use of the header tag well: https://www.w3schools.com/tags/tag_header.asp

Hope this helps

3

hi

ummm as you said that the header and h1 should not be used interchangeably.

then why in the challenge the tester does not accept h1-h6 be used in the <header>? But instead it wants a text in the header.

i know the tag header is like a container. Thats what confuses me, can we use header instead of h1-h6.

4

Before HTML5 sections of a page were usually divided with div elements that had appropriate class names. HTML5 has semantic elements that let you set up common sections.
Read more about semantic elements.
You can also Google something like your question and find answers.

5

usually i google then ask here when i cant find the answer

6

Example:

User Story #3: The first element within each .main-section should be a header element which contains text that describes the topic of that section.

I undertand header is like a container to a section or a semantic element.

normally you add h1 within the header to write a title. But i remember when i was doing the project challenge the tester did not accept h1 but instead it wanted text only with no tags.

<header> 
This is a title text with no h1 tag
</header>

This is the confusion here. So i asked why do some use header to insert the text of a title instead of inserting the tag h1 or only using h1.

7

The header element is a semantic element that accepts text content just like heading elements (h1–h6 element) do. It is not just a container element for other elements.

The header element usually has a heading element inside it, as the header element does not “introduce a new section in the outline”. But it is not required.

Usage notes

The <header> element is not sectioning content and therefore does not introduce a new section in the outline. That said, a <header> element is intended to usually contain the surrounding section’s heading (an h1–h6 element), but this is not required.

Specs
https://www.w3.org/TR/html52/sections.html#the-header-element
https://html.spec.whatwg.org/multipage/sections.html#the-header-element

It would have been possible for the project requirement to ask for a heading element inside the header element, but there is nothing wrong with not having it. Each header element inside a section element will belong to that section. So it seems fairly reasonable to just have the header element without also requiring a heading element.

I can’t really answer why the project requirement was chosen to be done this way, only that it seems reasonable enough.

1 Like