Every copywriter should have some web development know-how before taking web writing jobs. Since the modern copywriter often has the responsibility to craft some – if not all – of a brand’s online content, it’s important that they have the ability to make that content really work online.
If you’re a copywriter, it’s no longer enough to know how to write stellar content – you have to know how to make it work in front of your readers’ eyes. And if you’re a brand manager, it’s reasonable to expect that your copywriter knows how to do more than format a great Word document. After all, you hire a copywriter to sell your brand online.
Why Should Copywriters Bother with Web Formatting?
At a minimum, you the copywriter should be familiar with some online formatting basics. If you’re uploading posts to WordPress or sharing content on any web platform, you’re going to need a coding knowledge that’s little more robust than what clicking the “bold” or “italic” buttons at the top of your text editor can provide.
Often, you’ll be the one posting content online or working with a marketing manager to get the work done. And unless one of you knows how to format outside of a GUI (graphical user interface), eventually you’re going to run into trouble when posting content online.
Sure, you could call your web developer to give you a hand. But why waste the time when you could easily make a few tweaks yourself? And if your clients don’t have developers on staff or retainer, you’ll quickly become their hero.
Better yet? Copywriters with web formatting chops can easily charge more for their content because they can both write and implement the content. It’s a win-win, really.
What are You Waiting For? Let’s Learn HTML!
HTML (Hypertext Markup Language) is the standard markup language for webpages – which include the blog pages and products pages that you write for. Often, web developers implement graphical dashboards that allow you to interact with text without getting too technical.
But it’s important to understand the method behind the madness, if you will. A basic knowledge of HTML equips you to handle your webpage edits even when your client’s web developer hasn’t implemented a fancy text editor for you to play with.
Here are some basic HTML tags that you should know:
Text Formatting
If you’ve ever copied and pasted a blog post from Word or Google Docs and dealt with the frustration of your formatting not transferring to your blog platform, you understand the importance of formatting your text behind the scenes.
When you format your text with formatting like bold and italics, underlines or strikethroughs, you help readers to understand what you’re saying by adding a visual element to break up your text wall. Similarly, bulleted and numbered lists break up your text and make it easier to read.
But if you can’t structure your text through HTML, your blog posts will hardly reflect the message that you’re trying to send. However, it’s very simple to use HTML to format your post before you ever copy/paste. Copy down these popular tags and you’ll be good to go:
- Italic:
<em>text</em> - Bold:
<strong>text</strong> - Strikethrough:
<s>text</s> - Sub-script:
<sub>text</sub> - Super-script:
<sup>text</sup> - Bulleted (unordered) list:
<ul>My List<li>Thing One</li><li>Thing Two</li><li>Thing Three</li></ul> - Numeric (ordered) list:
<ol>My List<li>Thing One</li><li>Thing Two</li><li>Thing Three</li></ol>
Heading Structure
Heading structure is another one of those things that translates poorly from your word processor to your blog editor. And if you’re concerned with your blog’s SEO rankings and readability, you’re definitely going to want your heading structure to look great.
Without getting into too much detail about header distinctions and post formatting (we’ll cover that in another post), here are some easy ways to distinguish your headers from your text. Oh, and you’ll also be able to use these to nest headers to make your post shine.
- Header One (Title):
<h1>Title</h1> - Header Two:
<h2>Subtitle</h2> - Header Three:
<h3>Subheading</h3> - Header Four:
<h4>Subheading</h4> - Paragraph:
<p>text</p>
Links and Embedding
Another important element for basic writing is hyperlinking or embedding links in your text. HTML hyperlinking requires two components: the text that you want to link and the address to which you’d like to link.
Here’s how to add a hyperlink: <a href=”websiteaddress”>linked text</a>
Sometimes you’ll want to add other embedded elements, like videos and players. To do this, you can usually copy the text markers from your resource and add them to your post’s code.
Write in Code to Save Time
Once you know some basic HTML, you might want to play around with writing in code to save time when you copy and paste your articles and other text blocks. Of course, it might not feel natural to write with HTML in a Word doc, and you might have a hard time copy editing your work if it’s compressed in a coded structure.
However, there are ways to write in code without actually writing in code. Markup text editors save you time by coding your work as you type it, but without interfering with the aesthetic of formatted text against a blank page.
MarkDown – our favorite markup editor – provides a markup copy of your text alongside your standard text page. When you copy and paste your work, you can simply copy the marked version, rather than your standard text, and paste it into your web editor’s “text” field.
Writing well-structured content will save you time and better optimize your web pages. But what if your website need more than basic HTML to take it to the next level? We can help you (or your client) improve the structure and optimization of their entire site. Your next step is as easy as contacting us.
