Logo

dev-resources.site

for different kinds of informations.

How to style footer semantically correct?

Published at
11/17/2017
Categories
semantics
footer
discuss
Author
tyzia
Categories
3 categories in total
semantics
open
footer
open
discuss
open
Author
5 person written this
tyzia
open
How to style footer semantically correct?

I'm concerned how should I style my footer so that it is included into semantic outline of my page.

Let's assume, that my page is like this (don't know how to post html tags, that's why removed '<' & '>'):

body

    header.../header
    main.../main

    footer
        h2 Main footer of the page /h2
        section
          h3 About this site /h3
        /section
        section
          h3 Contact form /h3
        /section
        nav
          h3 Footer navigation /h3
        /nav
    /footer

/body

If I outline this code (here), I see:


1. Header
2. Main content of the page
2.1. Main footer of the page
2.2. About this site
2.3. Contact form
2.4. Footer navigation

This is not what I intended to have. In the above outline, 'footer' is a subsection of 'main' section and footer's subsections are also just subsections of the 'main' section on the same level with 'footer'.

I would like have 'footer' on the same level as 'main' section and footer's subsections as its subsections. To see in the outline something like this:


1. Header
2. Main content of the page
3. Main footer of the page
3.1. About this site
3.2. Contact form
3.3. Footer navigation

Then I read, that " 'header' and 'footer' are not sectioning content like 'section', rather, they exist to semantically mark up parts of a section.". That gave me a hint, that everything inside of my 'footer' tag is not considered a separate section in terms of outlining. So, I wrapped my 'footer' into 'section', which did the trick and my outline improved:

body

    header.../header
    main.../main
    
    section
        footer
            h2 Main footer of the page /h2
            section
              h3 About this site /h3
            /section
            section
              h3 Contact form /h3
            /section
            nav
              h3 Footer navigation /h3
            /nav
          /footer
    /section

/body

Which led to this outline:


1. Header
2. Main content of the page
3. Main footer of the page
3.1. About this site
3.2. Contact form
3.3. Footer navigation

My question is still the same: is this approach correct - to wrap 'footer' into meaningless 'section'? Please share your opinions or experience.

Featured ones: