HTML and CSS Reference
In-Depth Information
Using <div>
Since knowing what element to wrap your ad content in is really what's focused on here, some HTML5 features—those
that relate to the advertising space—are more important to recognize than others. With the previous versions of the
HTML specification, the structure of the document was typically marked up with
<div>
tags, along with specific
IDs and classes, so publishers could inject ad code within a specific section in their page markup. Using
<div>
tags,
publishers and content developers can section their page out for headers, navigation, ads, and other specific content.
For example, having a
<div>
container called
header
,
footer
, or
ad
can provide a pretty standard structure when
developing web site properties. Take the example in Figure
3-1
, from the publisher Yahoo.
Figure 3-1.
Markup of Yahoo's page using Chrome's inspect element function
Figure
3-1
showcases that Yahoo in fact uses an ad container div with the ID called “ad”. This tells other developers
that this section of the page is designated for an ad (an ad slot). If you were to inspect any page, you'd find that other
div
s in the markup specify other elements like “y-header” and “y-footer”, which are the specific naming conventions
given to Yahoo's markup.
New Ad Container Options: <section> and <aside>
With the new HTML5 markup elements, developers can leverage two new ad container elements:
<section>
and
<aside>
. The section element aids in portioning out the page for specific content. For example, you could section your
page for ad content, blog posts, or even pictures. For a publisher, it can be an especially good idea to have ad content
live inside wrapper divs with specific IDs. This is helpful since there are no other associated semantics with the ad on
the page in conjunction with the rest of the content.