CODEWITHSUNDEEP
htmlmarkup
aurel
aurel

Reputation: 3132

can html5 footer be used on this way?

I am designing a blog and this is the markup that I am using - showing just the article snippet as I am sure for the rest

<article>
    <header>
        <h2>this is the posts title</h2>
        <footer>
           <p>by aurel kurtula on <time>21:21pm</time></p> <ul><li>tag1</li><li>tag2</li><li>tag3</li></ul>
        <footer>
     <section>Here is the body of the article</section>
</article>

So my question is should I use footer in that way? and I am assuming that the <section> is right to used for the body of the article, or is it?

Thanks

Upvotes: 0

Views: 98

Answers (1)

James Allardice
James Allardice

Reputation: 166041

I would say your structure is fine, as long as you are closing the header tag which you don't appear to be doing in the example code. Since:

A header element is intended to usually contain the section's heading (an h1–h6 element or an hgroup element)

You should close the header after your h2:

<article>
    <header>
        <h2>this is the posts title</h2>
    </header>
    <footer>
       <p>by aurel kurtula on <time>21:21pm</time></p> <ul><li>tag1</li><li>tag2</li><li>tag3</li></ul>
    <footer>
    <section>Here is the body of the article</section>
</article>

It may seem strange to use an element named footer in the middle of the article, but there is nothing wrong with that:

The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.

...

Footers don't necessarily have to appear at the end of a section, though they usually do.

This means the footer in question should apply to the article element, not the section. If for example you were to have multiple section elements per article, and each required a separate footer, those footer elements should probably appear as descendants of their respective section.

Upvotes: 3

Related Questions