Footer sections

Can I put a <section> element in a <footer> ?

The <section> element appeared in HTML5 and divides the content into parts or sections. Hence the name.

How to understand that this is the general <section> ? It is even more important than whether to invest it anywhere. <section> is one part of the content, which means it does not make sense alone. This is like a list of one paragraph, which is rather a paragraph.

 <main> <section> <h2>?</h2> </section> </main> 

If the content is divided into several logical parts, then each can be wrapped in a separate <section> . Such a section should be given a title to make it clearer what is contained there. The specification even insists on it.

 <h1></h1> <section> <h2></h2> </section> <section> <h2></h2> </section> 

Many people think that the <section> is such a fashionable <div> and is very mistaken. See, I'm using HTML5! Not. This element has a certain meaning, and if you do not understand it, it is better not to touch it at all.

The most striking example of using <section> directly from a specification is a tabbed block. You have a group of tabs and clicking on each header shows its contents. This tab is the real <section> .

Or a typical one-page landing: all the contents of the site on one page, but in some parts with the height of the window. Description of the company, the benefits, the address with the card - well, that's all. Each such block is a <section> .

Okay, you got the sections sorted out, but what is <footer> ? In short, this is such a reference block with the date of publication, author, footnotes. And he may not be alone on the page! About him we somehow talk separately.

So, <footer> reference, <section> divides into parts. That is: if there are any structural parts in the certificate, then why not? It happens that in the basement of the site they put a lot of information that helps to navigate: contacts, site map, search. Good, so fat <footer> .

 <footer> <section> <h2></h2> </section> <section> <h2></h2> </section> </footer> 

Give each section a suitable title and divide <footer> into parts.

You can read about the semantics of <section> and other elements on the HTML5 Doctor website . Some articles have been written by HTML specification authors to help developers. They also translated a lot , so all the links are in the description of the video.

Moral: Use new structural HTML elements only if you understand how they work. And do not forget to insert headings for sections. And if they are not on the layouts, hide them.

Video version

Questions can be asked here .