HTML basics for a copywriter, or why a copywriter needs to know the markup language?
By: Alex Koma
Tags: Writing, Copywriting, Blogging, HTML, Writing Tips

HTML basics for a copywriter

During training, I always tell students that a good copywriter must know the HTML markup language. At least at a basic level. After this phrase, at least half of the listeners have an expression of bewilderment on their face: “Why ?! The copywriter writes the texts! ”. And then.

The fact is that, contrary to popular belief, high-level copywriters not only write texts but also solve a lot of other problems:

Launch email campaigns,

Send beautiful commercial offers with performance measurements

Carry out internal search engine optimization so that the written texts are higher in the search

Finally, they start and develop their blog. And many, many other tasks.

By the way, clients pay a lot of money for such tasks. For example, the cost of setting up and launching an email marketing campaign ranges from $ 800–$2000. A good text that stands out in the TOP of search engines costs from $50 to $100. But to solve such problems, you need to know HTML. At least at a basic level.

Actually, that’s why I decided to write this article. In this article, I wish to give you a base on the HTML markup language, as well as accompany it with useful links for a deeper study (if you wish). In an amicable way, HTML at a basic level is mastered in 2–3 days, but in terms of return on time investments, it has no equal. Ready? Then sit back, we’re getting started!

Structural “triad” of texts on the Internet

99% of texts posted on the Internet have three types of structure. Semantic — the structure of information presentation. We are not interested in it today.

Visual is how the reader sees the text. This type includes typeface, image collation, size of subheadings, callouts and quotes, and more. A very important aspect, but even today it is out of our attention.

Finally, the third type of structure is semantic. This is how the browser and search engines (Yandex, Google) see your text. It is about her that we will talk today. Moreover, the visual structure directly depends on the semantic structure on the Internet. But first things first.

The first thing you need to understand: visually the same article (or commercial text), with a different semantic structure, can either be in the TOP of search results and attract a lot of traffic, or be an outsider and just hang on the backyard of the Internet, indulging in oblivion. Although the text, the letters are the same.

HTML and semantic text structure

It is the HTML text markup language that is responsible for the semantic structure (it stands for HyperText Markup Language — the hypertext markup language, or text posted on the Internet). By the way, it is with its help that search engines understand which words and phrases in your publication are especially important, and for which requests readers need to show your material. This is called internal search engine optimization. In addition, HTML, along with style sheets (CSS), tells the browser how to display your text correctly. But we will not consider this point today either, because it is indirectly related to the work of a copywriter. At the end of the article, I will provide links where you can get more information.

Contrary to popular misconception, HTML is not a programming language. By the way, it is precise because of this delusion that many humanitarians are afraid of him like fire. How much in vain.

You might argue, why should a copywriter know HTML at all? Look, there are so many cool visual editors around! The answer is: the same text, correctly typeset in HTML and made in a visual editor, can radically differ inefficiency. The first will have perfect internal optimization, while the second is likely to have a lot of “garbage” in the code, and the emphasis on words will most likely be misplaced. Below I will give you a visual demonstration, be patient a little.

HTML for a copywriter: the basics

Oh yeah, another important point. The fact that you learn HTML does not mean at all that you have to abandon the usual visual editors. Just after studying this article, you will know what to look for when typesetting to make the texts more effective.

For example, you can style text in a visual editor, and then switch to HTML mode and explicitly set the required tags or correct certain attributes. As for me, I am a conservative in this regard, and I always typeset my blog posts myself in HTML. Without the help of any visual tools. This is partly why my articles rank well for any queries.

So, everything seems to be with the prelude. Now let’s move on to the slightly boring, but very important part.

What is a tag and why a copywriter needs it?

The entire HTML markup language is built around one concept — a tag. The tag tells the browser and search engine which elements of your text are particularly important and which are secondary. In other words, with the help of tags, you tell Yahoo and Google: “Look, my article is about the peculiarities of the mating season of Dominican hedgehogs, and if people ask about it, bring them to me because I have a lot of useful information about it”.

For ease of understanding, a tag can be compared to a box in which you put words. For example, in one box you put a heading and signed that this is a heading. In another — a paragraph. In this case, inside one large box, there may be others, smaller ones. For example, in a box “paragraph” you may have a box “text in italics” and “text in bold”. You get the idea.

There are three types of tags: opening, closing, and single. Opening tags are placed at the beginning of a word or structure (paragraph, table, etc.), and closing tags are placed at the end. Single tags exist on their own and do not require closing.

<strong> is the opening tag and </strong> is the closing tag. As you can see, they are almost identical. The only difference is in the oblique line of the end tag. And that’s all. In a visual editor or on a web page in a browser, the above construction will look like this:

This construction will be bold.

As you can see, the principle is very simple. Opening and closing tags are like a box that includes words or sentences and conveys hidden information about them to the browser and search engines that readers cannot see.

By the way, search engines, with proper use of tags, will be very grateful to you. So they quickly understand where and what you have in the text. As a result, the text is ranked better (located higher in the search results). This is especially important when you are blogging for passive earnings or developing text for a customer’s website.

Basic HTML tags

Now, let’s move on to the main tags. In this article, we will only cover those that a copywriter must know. You can find more detailed information on the links at the end of the article.

Heading and subheadings (h1-h6 tags)

The first tag, or rather a set of tags that we will consider with you, are headers. There are only six headings in HTML, and they are hierarchical from H1 to H6.

Please note: there can be only one heading H1 in the text (article title). H2 are the subheadings in the article. There can be any number of them. H3 are subheadings of subsections, etc. In practice, I tend to not use subheadings below H4. Simply because I don’t post materials on the Internet that would justify the use of the entire chain of hierarchy.

Another important point to remember. Each tag can have attributes — additional information that is passed to the browser or search engines.

For example, there is a style attribute. It tells the browser how to correctly display the elements enclosed in the tag.

Subheading in red

Looking ahead, the browser applies all styles either by default or in accordance with special ones, the so-called. cascading style sheets (CSS). In a nutshell, this is a document that spells out how all tags should be visually displayed by default.

For search engines, subheadings are very important. So make sure they contain keywords or synonyms.

2. Paragraph (p tag)

Paragraphs are surrounded by a <p> tag (opening and closing). With this tag and attributes, you can set-top and bottom indents or center text on the page. Plus, paragraphs are important to search engines.

By the way, when you post text in WordPress or another popular content management system, you usually don’t need to manually add the <p> tag. The same WordPress does it for you automatically.

On internal optimization and keywords. In arrays of text enclosed in the <p> tag, keywords should be distributed as evenly as possible. Beware of over-spam, otherwise, the search engines can impose sanctions.

3. Highlighting in bold or italic (strong and em tags)

You saw an example of using this tag just above. Similarly, the text is italicized using the <em> tag. By the way, it is believed that these tags also affect the effectiveness of internal optimization (only without fanaticism — otherwise, you can get the opposite effect).

Personally, I don’t like the look of the bold keywords in the text. It looks clumsy and tasteless. In the early days of blogging, I made my keywords bold to make it easier for people to scan articles, but the experiment failed. Therefore, now, if necessary, I either highlight the keywords (not all, but only a couple of them) with an italic tag, or with the <strong> tag, but with a style adjustment so that there are no visual differences with the main text.

4. Images (img tag)

Pictures play a special role in article layout. They have two hidden attributes that affect SEO. This alt attribute (alternative text that is shown in situations where images are disabled must contain keywords) and title (the title of the image, shown when you hover the mouse cursor over the image, must also contain keywords). The <img> tag is single and has no closing counterpart.

5. Numbered and unnumbered lists (ol, ul)

Two other very important tags that make the text structure clear are list tags. I highly recommend using them when you have a listing of homogeneous elements in your article. The syntax is very simple.

6. Table (tags table, tr, td)

One of my favorite complex tags allows for beautiful placement of content and enhances the structural value of the material for search engines (see table above). Simply put, search engines see that you are confused about the visual presentation of content, and give you a “plus in karma”.

Four tags (table, th, tr, td) are responsible for placing tables, but their mechanics are more complex.

Generally speaking, the use of tables is optional, but if you master it, you will get a huge advantage, not to mention the ability to post complex technical content.

7. Containers (div tag)

If ordinary tags are “boxes” on which it is written how certain elements should be structurally displayed, then the <div> tag is a whole container. For example, I use these containers to make block leaders thin out of the text.

By itself, the div tag doesn’t mean anything. It is used for the area that encloses the text and allows you to change the background, border, width of the text box and padding, and a number of other parameters.

8. The span tag

This tag doesn’t mean anything for SEO. And if you enclose the text in it, nothing will happen. It makes sense to use it to give a piece of text some additional properties.

9. The br tag

The <br /> tag does not have a closing part and is used to move to a new line. Double use of the tag separates paragraphs with an empty line. It is rarely used and only in cases where there is no automatic insertion of the <p> tag. When coding content in WordPress, it is practically not used.

10. The hr tag

I personally love this tag (<hr />). With its help, a dividing horizontal line is set. This is especially useful when you want to sprinkle content with a callout.

11. Links (tag a)

Links are very important for SEO. Especially when you are developing your blog. Competent linking plays into your hands. The <a> tag is responsible for links. The opening tag is placed at the beginning of the link text (anchor), and the closing tag is placed at the end. The opening tag must always contain the href attribute — the address to which the link leads.

Conclusion

In this article, I gave a basic overview of basic tags and explained why a copywriter needs to know HTML. Of course, you can do without this knowledge, especially when an intelligent layout designer works with you in your team. However, if you are starting your own project or planning to master email marketing in the future, this knowledge will play into your hands very much.

Of course, one article won’t be enough. And, yes, you have to look for more information and practice to master HTML. Here, as in any related field: it takes time and patience. On the other hand, it’s fun! Especially considering the fact that now there are many constructors that show you in real-time what you are doing. Plus, mastering HTML doesn’t take much time: from a couple of days to a week (if you take the matter seriously).

In any case, you now know what HTML is and how it can be useful. And I have everything for today, see you in the next articles.

P.S. As promised, here are some helpful resources: