New course! Every coder should learn Generative AI!
Try a free lesson+ 3
why use a <header> tag
so im wondering why use a <header> tag when I can just use the <h1> tag for example <header> test </header> is the same as <h1>test </h1> correct me if im wrong please just wondering
11 Answers
+ 7
Aberrant_otaku lemme give u an example of how we can use <header> to create a navbar
<header>
<h3>Heading</h3>
<div>
<a>Home</a>
<a>Sign in</a>
<a>Sign up</a>
</div>
</header>
look at how i organized the all the stuff inside one parent element "header", we can wrap it around stuff, you can also use div instead of header. Inside there, i used another container element "div", inside which i put 3 link tags.
Now we can give styles to it using css.
+ 9
Martin Taylor You might be thinking of the <head> tag which is outside the <body> tag.
The <header> tag is an HTML5 semantic tag used within the <body> tag. Well... technically, it's been around since before... but what evs. 😉
+ 4
in the beginning, i got confused as well, but look, h1 to h6 are used for a heading that is bold and large, but header is a container element (just like <div> or <section>) They are used to wrap many other elements inside of them, so that you can design the whole block separately.
try <header>heading</header> and <h1>heading</h1> both would give different results, coz both r used for different purposes
+ 4
Dennis Me thinks you think the OP thinks this is about <head> tag.
Try reading the earlier answers before posting... me thinks. 🤷♂️😉
+ 3
Aberrant_otaku , the tags you use to structure your html page make a difference :
🔸For you and for people reading your code, as the name are meaningful, it gives a better understanding as the exemple given by maf .
🔸Also, it have an important role for the browser when it interpret your html.
🔸And none the less importants, as said by David Carroll, it is called semantic, and it play a big role in SEO (at the time the search engine is crawling the web to find relevant content and to reference your page) and Accessibility (meaning for people with sight disabilities using screen reader).
https://www.pluralsight.com/guides/semantic-html
https://webaim.org/blog/web-accessibility-and-seo/#:~:text=Web%20accessibility%20and%20search%20engine,content%20are%20both%20machine%20readable.&text=In%20many%20ways%2C%20search%20engines,and%20have%20limited%20technical%20abilities.
+ 3
Actually it's a semantic tag ......
And it's just used to arrange your code, almost anything can be used as an html tag..even gibberish
+ 3
Kode Krasher You said it yourself but I just want to emphasize that using non-existent tag names should not be encouraged.
You made some valid points about descriptive tags. I think the Web Components spec promotes this style of coding.
https://developer.mozilla.org/en-US/docs/Web/Web_Components
I personally love Web Components because it allows developers to reuse custom components across the site without using a SPA framework like React.
+ 2
Oh thanks
+ 2
Kode Krasher thanks for that infos, good to be aware of.
I heard XML format allow personalized tags, but didn't think that it was possible in HTML...
+ 1
This<header>
Is different from h1
<header>h1<header>
<header> is like a section just like d way u will want to keep a particular section of footer page to
+ 1
The 'Header' tag do have the same purpose of the 'div' tag. If your are coding for a navbar it is better to use the header tag than div tag , because it help you to identify the element easily
Often have questions like this?
Learn more efficiently, for free:
Hot today
Cyber security
1 Votes
Bash
0 Votes
Personal chat
1 Votes
Please help
0 Votes
Links of cmy codes
4 Votes
Why exception is not handled
1 Votes
Link
5 Votes
Ruby
2 Votes