Question

Recently I went to w3schools New HTML5 Elements and discovered the “section” and “article” tag. My question is when should you use a section, article or div tag and why does the text gets smaller when I use a section and article tag? Like so:

<section><h1>H1 tag in a section tag</h1></section>
<article><h1>H1 tag in an article tag</h1></article>
<h1>H1 tag in nothing</h1>

Copy and paste in to here. (Just putting it there for convenience)

Answer 1

When to use section:

The section element represents a generic document or application
section…The section element is not a generic container element. When
an element is needed for styling purposes or as a convenience for
scripting, authors are encouraged to use the div element instead.

Helpful rules of thumb from Html5doctor:

• Don’t use it just as hook for styling or scripting; that’s a div
• Don’t use it if article, aside or nav is more appropriate
• Don’t use it unless there is naturally a heading at the start of the section
• Use article instead for syndicated content

When to use article:

The article element represents a component of a page that consists of
a self-contained composition in a document, page, application, or site
and that is intended to be independently distributable or reusable,
e.g. in syndication. This could be a forum post, a magazine or
newspaper article, a blog entry, a user-submitted comment, an
interactive widget or gadget, or any other independent item of content

Use div when no other element can semantically describe it better, or you need a semantically meaningless hook for styling.

The reason the h1s look different is because individual browsers render them differently. You can normalize things across browsers, and deal with default browser style sheets with a css reset.