These are the main elements considered in this section…
- The <article> element specifies independent, self-contained content.
An article makes sense on its own and it should be possible to distribute it independently from the rest of the web site.
- An <aside> is like a sidebar and contains content related, but not essential, to the main page content.
- The <details> element contains additional information that the website visitor can show or hide by clicking a turn arrow.
- The <summary> is the heading for the details element.
- A <figure> denotes an image or other illustration. The image should have an alt attribute with descriptive, alternative text and a caption...
- The <figcaption> allows the addition of text - which is viewable to humans - to describe an image's content. Unlike a caption added in a text box, the search engine spiders "see"this as being related to the image.
- The <header> and <footer> are familiar names but, in the context of HTML5, they denote the introductory and closing content of the whole page document or a section.
This means that there can be more than one header/footer, h1 heading etc per page which, when used correctly, provide a lot more semantic meaning to the contents.
- The <nav> element defines a list of links and, obviously, there be can several on a page.
- The <section> element is just what it says. It defines a section of a document containing related content. A section can have a header, h1, h2, h3 headings, text content, figure with figcaption and a footer if required.
- The <fieldset> tag draws a box around related elements and the <legend> provides a caption or heading for the content.