How to Change Text, Images and Links in an HTML Template

Introduction

If you strip away everything a template can technically do, what buyers actually change comes down to three things:

Text
Images
Links

Each one lives in a predictable place in the markup, and each one has a failure mode that is easy to avoid once you know what to look for. This guide covers all three, in the order you will usually do them.

1. Changing text

Visible text in a template typically sits in these elements:

<h1> to <h6> - headings
<p> - paragraphs
<span> - small inline text, labels, eyebrows
<a> - link text
<button> - button labels

The rule is simple: replace the visible text, do not change the tag around it. If a heading is an <h2>, keep it an <h2>. The tag carries the size and the styling, and it also tells search engines and screen readers what the text is for. Swapping an <h2> for a <div> because you wanted it smaller will cost you both.

One thing to watch: text is often split across child elements. A button that reads <a class="btn"><span>Buy</span></a> has its label inside the span, not the link. Editing tools that only look at the top element will miss it.

2. Changing images

There are three places an image can come from:

src - the file an <img> loads
alt - the text description of that image
background-image - a CSS background, usually on a section or a card

The important distinction is between an <img> and a CSS background. An <img> is content: it has dimensions in the document flow, it can have alt text, and it affects how the page reflows. A CSS background is decoration: it sits behind the content, has no alt text, and is usually set to cover or contain its container.

Swapping them is a common source of "the image looks wrong now". If the original was a background image that fills a hero area, replacing it with an <img> will not fill the same way, and vice versa.

Both are changed by URL. Nothing is uploaded, so the image has to be hosted somewhere already: your CMS, your shop, a CDN, or wherever the rest of your assets live.

3. Always update alt text where appropriate

Alt text is what a screen reader announces instead of the picture, and what shows if the image fails to load. If you swap a photo of a ceramic bowl for a photo of a mug and leave the old alt text, the page is now describing the wrong object to anyone who cannot see it.

Keep it short and concrete. "Ceramic bowls on a wooden table" is useful. "Image", "photo" or a filename is not. If an image is purely decorative and the template left the alt attribute empty on purpose, leave it empty rather than filling it in.

4. Changing button destinations

A link destination is an href. The value you put there depends on where you are sending people:

Internal URL - /pricing or pricing.html
External URL - https://example.com
Email link - mailto:hello@example.com
Booking link - whatever your scheduling tool gives you

A <button> has no href at all, which is why giving one a destination means adding a click handler. That is a structural change, so it is worth doing with a tool that writes it correctly rather than by hand. The CSS Code Editor handles both an <a> and a <button> from the same row and leaves the existing styling untouched.

5. Opening external links in a new tab

External destinations usually make sense in a new tab, so visitors do not lose your site. Internal navigation normally does not need it, and forcing it there is mildly annoying.

When a link does open in a new tab it should also carry rel="noopener". Modern browsers apply this automatically for target="_blank", but adding it explicitly is still correct and costs nothing.

6. Preview before publishing

Five things to check after any of the three edits:

Broken image - the URL 404s or points at a local path that does not exist on the server
Wrong URL - the button goes to the old destination, or to a draft page
Text overflow - longer replacement text pushes outside its container
Mobile wrapping - the text fits on desktop and wraps badly on a phone
Missing button label - the label was inside a child element and did not get replaced

7. A visual workflow

Doing all of this by reading raw markup means hunting for the right line in a few hundred lines of code. A visual editor removes the hunting: paste the section, click the thing you want, type the new value, copy the result back.

Open the CSS Code Editor

If the snippet you were given is hard to read in the first place, run it through the HTML Cleaner first so you can see its structure before you change anything.

Conclusion

If you only need to replace content, you usually do not need to redesign the component around it. Change the words, swap the image, point the link, then preview at three widths.

Related tools

CSS Code Editor for the three edits, and HTML Cleaner for reading a messy snippet before you start.