Difference between <header> and <div id="header">

Question

I wanted to start using HTML 5 semantics for a header on my site, however when I looked into some documentation, I wasn't necessary sure that the <header> tag could be used for my site header which would occupy the <nav> property. Is that what header could be used for instead of the classical <div id='header'>?

If you want to use HTML5 semantic tags, then <header> would be where you put a header. Did you try? Did something not work as expected? — David
– David, Commented Feb 8, 2017 at 14:35
As you can see on w3schools.com/tags/tag_header.asp. The <header> element represents a container for introductory content or a set of navigational links. — julianstark999
– julianstark999, Commented Feb 8, 2017 at 14:35
<nav>, <header> and <div> are all different elements. Each has their own set of rules. Read them here: w3schools.com/html/html5_semantic_elements.asp — ntgCleaner
– ntgCleaner, Commented Feb 8, 2017 at 14:36
or go right to the source https://www.w3.org/TR/html5/sections.html#the-header-element instead of w3fools — Nope
– Nope, Commented Feb 8, 2017 at 14:39

Justinas · Accepted Answer · 2017-02-08 14:38:10Z

6

Source

The element represents a container for introductory content or a set of navigational links

So it means that some browsers and search engines may look at your <header> element and interpret it with some meaning.

<div id="header"> - there is block element with no additional meaning.

answered Feb 8, 2017 at 14:38

Justinas

43.9k5 gold badges72 silver badges108 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

UXerUIer Over a year ago

When we say "additional meaning," does that exclusively mean search engine bots scrapping the site? Or accessibility (screen readers)? Or something else?

Justinas Over a year ago

@Majo0od Whatever who supports HTML5 and tries to get as much info about your site structure as possible.

Sagar V · Accepted Answer · 2017-02-08 14:36:29Z

<div id="header">

is nothing but a div with id header; you have to specify it's style in css

<header>

is a HTML5 tag , which already meant to do some flavour.

It is suggested to use <header> in order to get your page fully HTML5 compliant

dokgu · Accepted Answer · 2017-02-08 15:09:17Z

-1

If you use the <header> syntax, the browser knows that it is reading a header. If you want to use the HTML5 syntax I recommend you use the header tag.

edited Feb 8, 2017 at 15:09

dokgu

6,2005 gold badges59 silver badges105 bronze badges

answered Feb 8, 2017 at 15:01

flipps

1641 gold badge3 silver badges12 bronze badges

2 Comments

SuperDJ Over a year ago

I'm not sure if the tags tell the browser anything but if I'm not mistaken it does tell SEO what an element represents.

flipps Over a year ago

you said in other words what I wrote

Collectives™ on Stack Overflow

Difference between <header> and <div id="header">

3 Answers 3

2 Comments

Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

2 Comments

Related