loading...

How to style footer semantically correct?

tyzia profile image Andrei Navumau ・2 min read

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.

Posted on Dec 7 '17 by:

tyzia profile

Andrei Navumau

@tyzia

I am a Web Developer

Discussion

markdown guide