CODEWITHSUNDEEP
html
Mirich
Mirich

Reputation: 351

Confusion with semantic HTML

I am new to HTML and wanted to ask you guys about the difference between 

<header>
<div id="showcase"></div>
</header>

AND

<div id="showcase">
<header>
</header>
</div>

Are both the same?

Upvotes: 0

Views: 76

Answers (2)

Alex
Alex

Reputation: 179

HTML5 elements like <header>, <nav>, and <section> are usually used to define high-level, broad markup areas, often with more generic HTML used inside them – so your first example makes more semantic sense to me.

But that's making one big assumption: That your site has a <header> area and inside that header you're placing a 'showcase' componemt of some sort. Your example 1 fits that structure

BUT: Technically you could have a component on your page called a 'showcase', and THAT showcase could have its own <header>. Lots of pages/apps have a single <header>, but there's nothing stopping you from have multiple headers on a single page/app. That's your second example.

So either could be semantically correct depending on the structure of your site.

PS: I'm assuming your <header></header> snippet would contain other HTML in the real world?

Of course, you could just add the ID to the header.

<header id="showcase">
<div>... </div>
</header>

Upvotes: 1

Domino
Domino

Reputation: 6768

A div is an arbitrary division of content. It doesn't really have a semantic meaning, only that what is inside a div is something separated from what's outside the div. It's the default element people use to make a block to which a class can be applied when there isn't a semantically proper element to use.

div were pretty much everywhere at a time when the HTML language wasn't really being developed with as much of a focus on semantics and separation of concerns, and there were no header, footer, section or nav elements.

The answer to your question really depends on the context, but I'd say putting a div inside a header means that whatever is inside the div is something that is separated in some way from the rest of the header. Meanwhile putting a header inside a div means that what's inside the div including the header is part of something that is separated from what surrounds them.

...but long story short, unless a CSS hack relies on it, you should just drop the div if you've got nothing else than a header. The header tag was made to replace div with something more meaningful.

Upvotes: 5

Related Questions