When I was a little copywriter, I drafted web copy in Word. I saved the documents in a special folder and my boss would go and review them.
Then I would painstakingly code it up with basic HTML tags in our website Content Management System (CMS).
These days, I just don’t have time for that. Do not. Have time. Or a boss, for that matter.
So, I write my web copy straight into the CMS in code. The benefits are three-fold: I save time, I think about content hierarchy as I’m drafting, and I don’t have to latterly shoe-horn words into a set format.
Why you need to know your HTML tags as a writer
‘Tags’ are bits of code that tell a browser how to display stuff on a page. Usually, you open with a <tag> like this and close with a </tag> like this. Whatever you’re styling goes in between the opening and closing tags.
For anyone writing a web page, knowing these tags gives you control over how your content is going to look. That means you end up with a page that gets your intended meaning across exactly as you wanted.
Tags are also important for telling search engines that your page is nicely laid out and easy to use – and that means it affects how your page ranks.
Five HTML tags you need to know as a copywriter
1. The heading tag
H = heading. The headings descend from the main page heading (H1), downwards in size to show importance. If you had a main section that began with an H1 and had two equally important sub-sections, the order would be H1 > H2 > H2.
I’d say these are the most important HTML tags of the lot. They split up your copy into manageable chunks and signpost to the reader what they can expect from the page.
<h1>This is my main heading</h1>
<h2>This is my subheading</h2>
<h2>This is another subheading of equal importance</h2>
Even if I’m labelling up copy for a developer in Word, these heading tags are the thing I use most to show how copy should be structured when they build my page, email, whatever.
H1: This is my main heading, Ms. Designer
H2: This is my subheading
Seeing content hierarchy at a glance is great for any designer or developer reading it, and also helps you, your client and your audience understand how different sections relate to each other. This one simple note can prevent a whole world of misplaced content mixups.
2. The paragraph tag
P = paragraph. Your copy goes in the middle of an opening and a closing <p>. Being able to code up your paragraphs and instantly see if they work in situ helps develop your sense of how long is too long.
<p>This is a paragraph of text. It shouldn’t be too long – what looks OK in Word can look like an essay online.</p>
<p>Keep the copy nice and broken up. It’ll scan better.</p>
3. Styling tags
Sometimes, you need to emphasise text to make it read the way you want, usually with bold or italics. These are the <strong> and <em> tags.
I want this to be <strong>bold</strong>.
I want this to be <em>italic</em>.
4. The list tag
Lists in HTML come in two kinds: the ordered list (<ol)> with numbers and the unordered list (<ul>) with bullet points. Each type of list has list items (<li>) within it.
<ol>
- <li>This is an ordered list</li>
- <li>This is an ordered list</li>
</ol>
<ul>
- <li>This is an unordered list</li>
- <li>This is an unordered list</li>
</ul>
5. The link tag
A = link. Which is annoying. The link tag is different from the previous HTML tags because it contains another element: href. The href is the URL you want your reader to go to.
<a href=”yourlinkhere.com”>Your link text here</a>
So the <a> still has an opening and a closing tag – it just also has to contain the link you want your reader to go to in the href. The text you want to appear on the page sits inside the <a> tags.
How those HTML tags work together
<h1>This is my main title</h1>
<p>This is a little paragraph of intro copy.</p>
<h2>This is a second-level subheading</h2>
<p>This is a paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sollicitudin enim non nunc interdum pellentesque. Donec non diam nibh. </p>
<p>This is a paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sollicitudin enim non nunc interdum pellentesque. </p>
<h3>This is a third-level subheading</h3>
<p>This is a paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sollicitudin enim non nunc interdum pellentesque. Donec non diam nibh. .</p>
<ul>
- <li>This is an unordered list</li>
- <li>This is a unordered list</li>
- <li>This is a unordered list</li>
</ul>
<h2>This is a second-level subheading</h2>
<p>This is a paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sollicitudin enim non nunc interdum pellentesque. Donec non diam nibh. </p>
<a href=”yell.com”>This is a link</a>
