5

I read a lot of information on w3schools. It defines <section> as:

The <section> element defines a section in a document. [...] A home page could normally be split into sections for introduction, content, and contact information.

So, basically, a <section> can be a <header> (introduction) and <footer> (contact information)?

The <header> element specifies a header for a document or section.

So I could put a <header> inside a <section>? But a <section> can be used "for introduction", so it basically is a header? Same story with the <footer> element.

Questions

How am I actually supposed to use the elements?

  • Should I use <header> for the title of an <article> or for the part of my website containing the logo and navigation?

  • Should I use <footer> for the data of an <article> or for the part of my website containing the copyright and footer navigation?

  • Should I put a <section> tag around my <article> tags?

Let's say I have a simple website, containing a logo, navigation, several articles and some footer text. What would be the best way to do the markup?

<!DOCTYPE html>
<html>

<head>
    <title>My site</title>
</head>

<body>
    <header>
        <img src="logo.png" alt="My logo!">
        <nav>
            <ul>
                <li><a href="#">Item 1</a></li>
                <li><a href="#">Item 2</a></li>
                <li><a href="#">Item 3</a></li>
            </ul>
        </nav>
    </header>

    <section>
        <article>
            <header><h2>Article 1 title</h2></header>
            <footer>Posted on Foo.Bar.2017</footer>
        </article>

        <article>
            <header><h2>Article 2 title</h2></header>
            <footer>Posted on Foo.Bar.2017</footer>
        </article>

        <article>
            <header><h2>Article 3 title</h2></header>
            <footer>Posted on Foo.Bar.2017</footer>
        </article>
    </section>

    <footer>
        <p>Copyright</p>
    </footer>
</body>

</html>

If I do that, the Nu HTML Checker says:

Warning: Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections.

I don't want an <h1> stating the <section> contains <article> tags. Should I just remove the <section>? It appears to be a flexible tag, yet I can't find a valid place to put it.

What would be the correct markup?

dodov
  • 5,206
  • 3
  • 34
  • 65
  • 2
    "I read a lot of information on w3schools." That's your first mistake. It's in no way affiliated with the w3c and has lots of inaccurate information. If you want to know which HTML elements to use, read [the actual spec](https://www.w3.org/TR/html51/single-page.html#semantics). – zzzzBov Jul 09 '17 at 17:13

2 Answers2

5

header / footer

There are sectioning content and sectioning root elements. header/footer elements always "belong" to one of these sectioning (content/root) elements.

<body>

  <header>belongs to the 'body'</header>

  <article>
    <header>belongs to the 'article'</header>
    <footer>belongs to the 'article'</footer>
  </article>

  <div>
    <header>belongs to the 'body'</header>
    <footer>belongs to the 'body'</footer>
  </div>

  <footer>belongs to the 'body'</footer>

</body>

Note that the div element is not a sectioning element, which is why its header/footer children belong to the body (which is a sectioning root element), not to the div.

So you can use header/footer elements for site-wide content by placing them so that their nearest sectioning parent element is the body element.

section

A header/footer could consist of one or multiple section elements, but this typically only makes sense if the header/footer is (unusually) complex.

In general, when does it make sense to use section? If you have an implicit section, or if you need an entry in the document outline. Please see my related answers:

Note that the validator reports a warning, not an error, when a sectioning content element doesn’t have a heading element. They are not required to have headings, but it can be sign that the sectioning content elements gets misused: it typically only makes sense to use one if it could have a heading, even if you don’t actually provide one.

unor
  • 92,415
  • 26
  • 211
  • 360
0

A header is not the same as heading. You use the <header> tag for your header (page head) and <h1> to <h6> for you heading (titles, subtitles, etc.). Thats the difference between header and headings. Other than that your markup seems logical enough, except for the header-heading issue and I wouldn't go using <footer> - the tag for page footers to display some data like dates or authors.

HTML5 semantics is very logical - <header>,<nav>,<main> content, content of main content, <aside> content etc...

But an <article> can be part of a <section>. And a section can also be part of an article. So my opinion is that if you follow the logic of HTML tags you don't have to worry about semantics much.

Oh, and to answer your question. I would do it like this:

<section>
    <article>
        <h2>Article 1 title</h2>
        <p>Posted on Foo.Bar.2017</p>
    </article>

    <article>
        <h2>Article 2 title</h2>
        <p>Posted on Foo.Bar.2017</p>
    </article>
</section>

If needed you could use the <time> tag with the <p> tag, but I would not (because of compatibility)

albert
  • 8,112
  • 3
  • 47
  • 63
kopz
  • 738
  • 11
  • 20