skip to Main Content

from what I have learnt so far, it is ideal for a webpage to have <header>, <main> and <footer> elements as the only children of <body>.

Will my webpage still be conformant to HTML5 standard, structurally and semantically good, ranks good by Search engines and do not affect the function of assistive tools negatively (accessibility) if I place <aside> element as a sibling to <header>, <main> and <footer> elements, i.e., placing <header>, <main>, <aside> and <footer> inside of <body> element?

like this:

<!doctype html>
<html>
  <head>
    <title>simple page</title>
  </head>

  <body>
    <header></header>
    <main></main>
    <aside></aside>
    <footer></footer>
  </body>
</html>

2

Answers


  1. Your website will be standard conformant and you won’t need to worry if you do that 🙂

    <aside> doesn’t like cancel other tags out or something, and the only way you could mess up assistive tools reading your website is like if you have something like the <main> or <footer> element twice or make aria role attributes inaccurate on purpose.

    Login or Signup to reply.
  2. Your structure is perfectly valid in HTML5, and placing the <aside> element as a sibling to <header>, <main>, and <footer> will not negatively impact the semantic integrity of the webpage.
    But it is advised to nest inside the section, especially if it is directly relevant to the main content.

    Like this

    <body>
      <header></header>
      <main>
        <aside></aside>
        <!-- Main content here -->
      </main>
      <footer></footer>
    </body>
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search