Some HTML5 elements aren’t what they first seem. Find out how they should and could be used
The <section> tag provides a semantic way to markup thematically grouped content that should be in the document outline (so it should have a heading). The <section> element would be perfect for marking up chapters in a book for example. We can also make use of it inside flow content, where we enable the clear separation of many sections in a lengthy article – such as a thesis or dissertation.
The <footer> tag is not for website footers but for footer content that relate to the nearest sectioning element (these are the four sectioning elements: section, article, aside and nav). The footer can also be used for content such as that of bylines, related documents and copyright data. It can also contain entire sections and this will then lend itself to things like appendices, indexes and licence agreements.
Like the <footer> tag, the <header> tag isn’t for website headers – as you would be forgiven for thinking. It’s for introductory content relating to the nearest sectioning element. It can be used for larger-scale content such as a table of contents or foreword, but is more commonly used for headings and standfirst paragraphs.
The <address> tag is not just for addresses you can post letters to. It is also contact information for the nearest <article> or even <body> when it’s applicable to the document as a whole. While this may be a postal address sometimes, it’s more likely an email address, phone number or link to the author’s page.
The <nav> tag can be used for primary navigation, but it should also be used to markup any navigation on the page. Secondary navigation, even when internal to the page, should be marked up with <nav> – like jump links. If the nav contents represent a list of items they should be marked up with a list as well.