Meaningful HTML5: Structural elements

When you're building a website or a web application, it's important to make sure that you use HTML elements in a way that makes sense and that everybody can use. HTML5 has some new elements that make it easier to organize and understand web pages, especially for people who have disabilities, but also for different kind of technologies that can be instructed on what to expect their content is.

Semantic Meaning of HTML5 Elements

HTML5 introduces several new semantic elements that help define the structure and meaning of a web page:

• <header> - This element represents the introductory content of a page or section/article (this is an important detail! Headers are not only for pages!), typically containing a logo, navigation menu, and/or search bar. The <header> element is important for organizing the layout of a page and making it clear to users what the main purpose of the page is. Remember to use descriptive text for the logo and navigation links so that screen reader users can understand the purpose of each element.

• <nav> - A section of navigation links that allow the user to navigate through the website or a part of it: this means that not only the main navigation, but also grouped links should be wrapped in <nav>. The <nav> element is important for organizing the navigation of a website or application and making it clear to users where they can go to access different parts of the content. Every link must have descriptive text, visible or invisible (with visually-hidden or in form of aria-label). Additionally, using a consistent navigation structure across the site can help users with cognitive disabilities to understand and navigate the site more easily.

• <main> - This element represents the main content of the web page, excluding any header, footer, or sidebars. The <main> wraps the content of a page. Its content should be organized with appropriate use of headings and sub-headings, but also sections and articles, so that users (not only those using screen readers) and automatic tools can understand the structure of the content. Don't forget to provide skip links that allow keyboard users to bypass navigation menus and jump straight to the main content of the page. This is particularly useful for users who use a keyboard or have difficulty using a mouse or trackpad.

• <article> - A self-contained, complete, standalone piece of content that can be distributed and reused independently, such as blog posts or news articles. It can contain any type of content, such as text, images, videos, and other media. An <article> can be a blog post, news article, or any other standalone content that can be shared or aggregated. The <article> should identify a complete, standalone piece of content. If you're in doubt if using <article> or <section>, if the content would still make sense if taken out of its current page you're dealing with an <article>.

• <section> - This element defines a section or grouping of content with a related theme or purpose. A section can contain any type of content, but it does not necessarily stand alone as an independent piece of content. The <section> tag is more general than <article> and, instead, it contributes to the overall content structure of the page.

• <aside> - A section of content that is not directly related to the main content, but does not necessarily have to use this tag only for sidebars!. The <aside> element provides additional information or context that is related to the main content but not essential to understanding it.

• <footer> - This element represents the closing content of a page, typically containing copyright information, contact details, and/or links to related pages when it's applied to a page element, closing considerations and final words when applied to a section/article. The <footer> element is important for providing additional information or context about the content of the page.