Under the hood, are HTML5 tags (article, section, aside, header, footer) implemented just like div?

Question

I understand all these tags have different semantic meanings, like article is for a story that stand apart; section is for self-contained part of the page...

They are good and useful tags, in many ways. But, are they just syntax sugar? Because I didn't see any style differences among them. When not applied by any CSS rules, they are just like div s.

Hope some webkit/gecko experts can clarify it on the code level.

Answer 1

Mostly yes. They're not actually divs, but block level elements (subtle but different).

http://diveintohtml5.info/semantics.html#new-elements

There are several new elements defined in HTML5 which are block-level elements. That is, they can contain other block-level elements, and HTML5-compliant browsers will style them as display:block by default.

So yes, for now they are just there for shortening your code length and creating cleaner markup, but that's what block level elements do. If you remove the default styling from a <p> tag isn't it just like a <div> ?

Answer 2

I didn't see any style differences among them. When not applied by any CSS rules, they are just like divs.

Each browser has it's own native stylesheet that is applied to the page content. This is why we commonly use CSS reset stylesheets - to normalize everything between different browser stylesheets. Style and content are two completely separate things, what something looks like has no bearing on what it is , therefore you should not be marking up your page based on how you want it to appear.

Some day, it may be common for browsers to add default style to certain HTML5 elements, like some padding on <section> s, but it doesn't matter (and is actually unlikely).

Are they just syntax sugar?

Not at all. While there may not seem to be much of a difference, it allows your content to be understood by, for example, screen readers or search engines, in a more meaningful way.

As Grillz's answer mentions, the elements in question are all block level elements, so in that respect - they are basically rendered like div s, but have semantic value and aren't meant to be used as generic container elements.