Semantic way of adding an advertisement inside the <main> element?
I am planning to insert an advertisement in the middle of the page content while not breaking accessibility and semantics. My page has its contents inside a
<main> element, but I am confused if I should use an
<div role="complementary"> to nest the advertisement.
What confuses me more is that W3C's documentation says:
complementary: Any section of the document that supports the main content, yet is separate and meaningful on its own.
and in Example 1 below the page, it shows:
<div id="rightsideadvert" role="complementary">....an advertisement here...</div>
My understanding is that not all advertisements (like Google Ads) would support or relate to the main content. What is the appropriate markup to use?
<!doctype html> <html lang='en'> <head> <meta charset='utf-8' /> <title>Test page</title> <meta name='viewport' content='width=device-width, initial-scale=1.0' /> </head> <body> <main> <!-- main content --> <aside> <!-- advertisement --> </aside> <!-- main content continues --> </main> </body> </html>