Custom Advertisement above website content. Proper standard semantic format wanted

Question

Until recently, my website was following proper semantic standards with H1 tags before H2 and H3 tags.

Now, on my site I was asked to put an advertisement of a festival for the owner at the top of the page before any page content.

The advertisement itself coding wise contains a DIV tag and in that contains an H3 tag for a title and paragraphs of text and an image, but the advertisement has no relation to the site.

The coding in rough form for the advertisement looks like this:

<div><h3>Advertisement title</h3><p>Advertisement detailed text information</p></div>

And the site coding in rough form excluding the head section of html and body tags looks like this:

<h1>Title of page</h1><h2>Subtitle</h2><p>Main page content</p>

But when I add the advertisement at the top of the page as requested by the owner, the sample code on my page looks something like this:

<div><h3>Advertisement title</h3><p>Advertisement detailed text information</p></div>
<h1>Title of page</h1><h2>Subtitle</h2><p>Main page content</p>

This in turn violates standards as H3 precedes H1 and H2.

How could I best solve this in a standard way while still giving some emphasis to the advertisement? I was thinking replacing the H3 tag with a P tag and styling it but I'm not sure if that is sufficient to meet standards such as google's (or any other search engines) webmaster quality guidelines.

Answer 1

One option is to put the advert at the end of your HTML (probably just before </body>) and position it at the top with CSS.

Something along the lines of

#advertisement {
    position: absolute;
    top: 0;
    height: 120px;
}
body {
    padding-top: 120px;
}

It will probably need more than that but that should give you an idea.

Answer 2

Use CSS, copy the class you're currently applying to H3 and then reproduce it in a custom class and apply it to the advertisement in a

or any other element different than a heading.

Answer 3

My advice is to go for the solution CAI gave you and not to waste heading on that, you can store the ad in every block element that pops up your mind it could be em it could be p it could be anything, and positioning it with CSS makes perfect sence.