How to Add a Banner Ad to Any Website with Plain HTML

To add a banner ad to any website, wrap the ad image in a link: an <a> tag pointing to the advertiser's page, with an <img> inside it that has a width, a height, and alt text. Paste that snippet wherever the ad should appear, whether that's a WordPress Custom HTML block, a Ghost HTML card, a Webflow Code Embed, a Wix Embed HTML element, or a template file. You don't need JavaScript, an ad network, or a plugin.

Key takeaways

• A banner ad is a linked image: an <img> with width, height, and alt, wrapped in an <a> that points to the advertiser.
• Always set width and height on the image so the browser reserves space and the page doesn't jump when the ad loads.
• Mark the link rel="sponsored" so search engines know it's a paid placement.
• A few lines of CSS let the banner scale down on phones without distortion.
• A script-free embed adds one image request and nothing else, which keeps pages fast and keeps third-party code off your site.

The basic banner ad snippet

Here's a complete, copy-paste banner for a 300×250 slot. The URLs and the advertiser are placeholders.

<a href="https://advertiser.example.com/?utm_source=yoursite&utm_medium=banner"
   target="_blank" rel="sponsored noopener">
  <img src="https://yoursite.example.com/ads/acme-300x250.webp"
       width="300" height="250"
       alt="Acme Analytics: see every campaign in one dashboard">
</a>

That's the whole ad. The browser shows the image at 300×250 pixels, and a click opens the advertiser's page in a new tab.

Why each attribute matters

Width and height prevent layout shift

When an image has no dimensions, the browser doesn't know how much room to leave for it, so the text below the ad jumps down when the file arrives. MDN's image element reference explains that including width and height lets the browser calculate the aspect ratio before the image loads and reserve the space. Use the slot's real pixel size, for example width="728" height="90" for a leaderboard.

rel="sponsored" tells search engines it's an ad

Google asks site owners to mark links that are advertisements or paid placements with rel="sponsored". The older rel="nofollow" is still acceptable, but sponsored is preferred. Buying or selling links for ranking purposes falls under Google's link spam policies, so keep the attribute even if an advertiser asks for a "dofollow" link.

noopener stops the new tab from reaching back into your page through window.opener. Modern browsers already do this for target="_blank" links, so it's a free safety net for older ones.

Alt text is part of the ad

Alt text is read aloud by screen readers and displayed when the image can't load. Write it like a short text ad: the advertiser's name plus the core message, such as "Acme Analytics: see every campaign in one dashboard." Skip filler like "banner" or "ad image," which tells the reader nothing.

Make the banner responsive with CSS

A 300-pixel-wide banner fits most phones, but wider units such as a 728×90 leaderboard overflow small screens. Wrap the ad in a container and let the image scale down:

<div class="ad-slot">
  <span class="ad-label">Advertisement</span>
  <a href="https://advertiser.example.com/" target="_blank" rel="sponsored noopener">
    <img src="https://yoursite.example.com/ads/acme-728x90.webp"
         width="728" height="90"
         alt="Acme Analytics: see every campaign in one dashboard">
  </a>
</div>

.ad-slot {
  max-width: 728px;
  margin: 24px auto;
}
.ad-label {
  display: block;
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 4px;
}
.ad-slot img {
  display: block;
  width: 100%;
  height: auto;
}

Because the width and height attributes are still there, the browser keeps the aspect ratio while scaling and reserves space before the image arrives, and height: auto stops the image from stretching.

One caveat: a leaderboard shrunk to phone width has text too small to read, so many publishers sell a separate mobile slot. Our banner ad sizes guide covers which sizes pair well.

Where to paste the code on popular platforms

WordPress

In the block editor, add a Custom HTML block (type /html on a new line) and paste the snippet. For a sidebar or footer ad, the location depends on your theme:

• Classic themes: go to Appearance → Widgets and add a Custom HTML block to the widget area.
• Block themes: open Appearance → Editor, edit the template or template part where the ad belongs, and add a Custom HTML block there.

WordPress sanitizes the HTML of users who lack the unfiltered_html capability, such as Contributors, and strips tags like <script> and <iframe>. A plain link-and-image snippet doesn't rely on either.

Ghost

Inside a post, add an HTML card (click the + button or type / on an empty line) and paste the snippet. Ghost's Code injection settings insert code into the site's <head> or just before the closing </body> tag, so they suit the CSS above rather than the banner itself. For a banner on every page, such as one below the header, add the snippet to your theme's template files.

Webflow

Add a Code Embed element from the Add panel, paste the snippet, then save and close. Code Embed availability depends on your Webflow plan. Put the CSS in the same embed inside a <style> tag, or in your site's custom code settings.

Wix

In the Wix Editor, click Add Elements, then Embed Code, then Embed HTML (under Popular Embeds). Click the new element, choose Enter Code, paste the snippet, and click Apply. Wix displays HTML embeds inside an iframe, so resize the element to match the banner. Wix also only displays code that uses HTTPS URLs. Keep target="_blank" on the link so a click opens the advertiser's page in a new tab instead of inside the small frame.

Static sites and site generators

Paste the snippet into the layout or partial template that renders the ad's location, such as a sidebar include, so one edit updates every page. Avoid pasting raw HTML into Markdown content files, because some Markdown renderers strip it by default.

Why no-JavaScript embeds are fast and private

Most ad networks hand you a script tag that downloads more code, runs on your page, and can set cookies. A linked image skips all of that:

• Speed: the browser makes one image request. There's no script to parse or execute, so nothing competes with your own code for the main thread.
• Stability: with width and height set, the ad never shifts your content.
• Privacy: the snippet sets no cookies and runs no code that can read the page. The image server still receives standard request data, such as the visitor's IP address, as with any image loaded from another server.
• Security: there's no third-party code on your page that could be compromised or quietly changed later.

The trade-off is flexibility. A static snippet doesn't rotate creatives, stop on an end date, or count clicks on its own. The usual fix is a hosted embed, where the snippet never changes and the server decides which image to return. For more on performance, see our guide to running ads without hurting Core Web Vitals.

Common mistakes to avoid

• Hotlinking the advertiser's image. If the file lives on their server, they can change it after you've approved it. Host it yourself or through your ad server.
• Oversized files. Export compressed WebP or optimized JPEG or PNG. For crisp results on high-density screens, export at twice the slot size but keep width and height at the slot size.
• Lazy-loading the top banner. loading="lazy" helps for ads further down the page, but web.dev advises against lazy-loading images that are visible when the page first loads.
• HTTP image URLs. Browsers block or upgrade insecure images on HTTPS pages, so always use https://.
• No label. Add a small "Advertisement" or "Sponsored" label so readers can tell the ad apart from your content.

When hand-coding stops scaling

Hand-coding works for a single sponsor. Once you sell a slot to a series of advertisers, the manual work adds up: swapping creatives on start dates, removing them on end dates, counting clicks, and filling the slot when it's empty.

A hosted embed handles that for you. With Spreadiom, you create a slot with a size and a daily price, then paste a one-line <a><img></a> embed that uses no JavaScript and no cookies. Advertisers book and pay on the slot's booking page, the ad is served from a CDN starting on its start date, and impressions, clicks, and CTR are tracked per slot. When no campaign is running, the slot shows an "Advertise here" banner that links to the booking page, so empty inventory still does some work.

FAQ

Do banner ads on my site need rel="sponsored"?

Yes, if the advertiser paid for the placement. Google asks site owners to mark ads and paid links with rel="sponsored" and still accepts rel="nofollow". Paid links that pass ranking credit fall under Google's link spam policies, which can hurt your site in search. Keep the attribute on every paid banner, even if an advertiser asks for a "dofollow" link, and explain that it protects both of you.

Can I add a banner ad without JavaScript?

Yes. A banner ad can be a plain link wrapped around an image, with no script at all. The browser loads the image like any other picture, and a click opens the advertiser's site. A static snippet won't rotate ads or count clicks by itself, but a hosted embed can do both without a script, so your page stays fast and free of third-party code.

How do I make a banner ad responsive?

Keep the width and height attributes on the image, then add CSS that sets it to width: 100% and height: auto inside a container whose max-width equals the banner's width. The banner shrinks on narrow screens without distortion, and the browser still reserves the right amount of space. For wide formats like a 728×90 leaderboard, consider a separate mobile-sized slot, because scaled-down text quickly becomes hard to read.

Why does my banner look blurry on phones?

Phones and many laptops have high-density screens that use several physical pixels for each CSS pixel, so a 300×250 image gets stretched and looks soft. Export the creative at twice the slot size, for example 600×500 pixels, while keeping width="300" and height="250" in the HTML. Then compress the larger file, ideally as WebP, so the sharper image doesn't add much weight to the page.