How do you use the semantic elements like section, article, header and footer in HTML5?

HTML5 introduced a set of semantic elements, which provide a way to give meaning to the structure of your HTML documents. These elements help to create a more meaningful and accessible web. Here is how you can use some of the semantic elements in HTML5:

  • <header>: This element is used to define the header section of a document or a section of a document. It typically contains the site logo, site title, site tagline, and main navigation.

  • <nav>: This element is used to define the navigation section of a document. It typically contains links to other pages on the website.

  • <section>: This element is used to define a section of a document. It can be used to group related content together.

  • <article>: This element is used to define a self-contained piece of content, such as a blog post or a forum post.

  • <aside>: This element is used to define a section of content that is related to the main content of the document, but not essential to it. It's often used for sidebars or pull quotes.

  • <footer>: This element is used to define the footer section of a document or a section of a document. It typically contains copyright information, links to related pages, and other information that is common to the bottom of a document.

By using these semantic elements, your HTML code becomes more meaningful and easier to understand, which can make it easier to maintain and improve the accessibility of your website.