Search code examples
htmlnaming-conventionsadssemantic-markup

HTML element for ad?

Is there any authoritative information on the web concerning which HTML element to chose for an advertisement banner?

I considered <article> or <aside>, but I think more appropriate is simply: <div class="ad">

Solution

  • In most cases I'd use the aside element:

    The element can be used for […] for advertising, […] and for other content that is considered separate from the main content of the page.

    As the aside element is a sectioning element, it creates an entry in the document outline, even if you don't use a heading explicitly. In most cases this would be what you want.

    If you don't host the ad yourself, you might want to include it in iframe:

    Here is an example of a page using an iframe to include advertising from an advertising broker:

    <iframe src="http://ads.example.com/?customerid=923513721&amp;format=banner"
    width="468" height="60"></iframe>

    (Where appropriate use the sandbox attribute for security.)

    So, a simple blog post page could be structured like:

    <body>

  <h1>My blog</h1>

  <article>
    <h1>My blog post</h1>
    <p>…</p>
  </article>

  <nav>
    <h1>Navigation</h1>
    <!-- site-wide navigation -->
  </nav>

  <aside>
    <h1>Advertisement</h1> <!-- or omit the heading altogether, it doesn't change the outline -->
    <iframe></iframe>
    <footer><small>Advertisement by ACME Inc.</small> <!-- or whatever --> </footer>
  </aside>

</body>

    The page has the following outline:

    1. My blog
      1. My blog post
      2. Navigation
      3. Advertisement