Andrei Navumau
Posted on November 17, 2017
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 November 17, 2017
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.