Section, Article, or Div? and Smaller text in a section and article tag?

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.

Answer 2

This is pre-defined in browsers. When I inspect one of the small h1 tags in Chrome, I get the following style sheet that is hard-coded into the browser ("User agent style sheet"):

:-webkit-any(article,aside,nav,section) h1 {
font-size: 1.5em;
-webkit-margin-before: 0.83em;
-webkit-margin-after: 0.83em;
}

Whereas the normal predefined style sheet for h1 looks like this:

h1 {
display: block;
font-size: 2em;
-webkit-margin-before: 0.67em;
-webkit-margin-after: 0.67em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
font-weight: bold;
}

This means that browsers have their own presets regarding what h1 elements (and probably the other h elements as well) should look like inside one of article, aside, etc.

You can prevent this from happening by defining your own sizes for these cases.