16

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)

1
  • 3
    This is a fine question, but note: W3Schools sucks. Big time.
    – Pekka
    Nov 27, 2011 at 17:28

3 Answers 3

24

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.

1

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.

0

About your last question (why does the text gets smaller when I use a section and article tag?), I think there is a rational reason to that event. Elements such as section, Article, aside, nav are considered as Sectioning Elements. One of the main characteristics of these elements is that in the document’s outline a new indent appears when a browser face to them (to find out more). So according your sample code:

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <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>
    </body>
</html>

Its outline is (you can use this online tools):

  1. H1 tag in nothing

    1. H1 tag in a section tag
    2. H1 tag in an article tag

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.