As digital marketers we are taught, quite rightly, to leave code to those who’ve studied it – or risk the wrath of your development team. This is a clear and respected boundary; if you don’t rewrite our copy, we won’t touch your coding.
That’s the case at most agencies, who are lucky enough to possess both a marketing and development department.
Thing is, this can’t be said for our ‘in-house’ or ‘client side’ brothers and sisters, who often won’t have development support on hand. If something isn’t working quite right on the company website, they may attempt to troubleshoot the errors themselves.
What is HTML?
HTML stands for Hyper Text Markup Language and it is the standard markup language for Web pages. Think of HTML elements as the building blocks of Web pages, each element adds something different to the structure of the page.
HTML elements are found within <> tags. They have a start tag, such as <p> for paragraph, and a close tag, which in that case would be </p>.
Why do digital marketers need to know HTML?
It’s not that you need to know HTML, really, definitely not to the levels of building a website and becoming an encyclopedia of elements.
99% of the time you’re working on a pre-built website with a CMS, allowing you to add or update content. The CMS does the work for you.
However you can’t always rely on that system to do what you want it to, so it’s handy to have an idea of what might be going wrong technically. In terms of SEO, this can really heighten your understanding of content optimisation and technical SEO, two of the four pillars of the practice.
Through our technical SEO work over the years we have picked up some really helpful HTML knowledge, all of which is applicable using the most popular CMS options out there – we typically use WordPress, FYI.
I’m not saying we can create a website from scratch, far from it, but it does mean we don’t have to bug our developers for help all of the time.
So, we’ve broken down some of our commonly used HTML into handy sections for you to hopefully learn a thing or two from.
HTML for Content
Most content management systems allow for very easy formatting at the click of a button, in a similar way to your standard word processing applications. However, this isn’t always the case; even a CMS as simple as WordPress often has blocks/fields that don’t offer this functionality, so if you want to properly format your content, you’re going to need some basic knowledge of HTML tags.
For most formatting tags, the use of HTML is quite simple. At the start of the piece of content you want the formatting to apply to, you’ll insert something that looks like <x>, with the ‘x’ replaced by the relevant code (for example, this would be a B for bold text). At the end of the content you’re formatting, you’ll put the same tag once again, but this time with a slash before the code to signify the end of the formatted section: </x>.
There are many different things that can be inserted in place of the ‘x’ – some just a letter, some a longer piece of code. They all have different functions and provide useful methods of formatting your content where the usual buttons aren’t available. We’ve detailed some of the most useful content HTML tags below, with information on how and when to use them.
Bold, or Strong
<b>, or <strong>
Let’s start off simple.
Bold and strong tags let you highlight important words or sections of text. As you’d expect given their names.
While the <b> element was originally intended to display text in bold, newer versions of HTML have changed its meaning.
The <strong> element is for content that is of greater importance, while the <b> element is used to draw attention to text without indicating that it’s more important. Bold text can mean two different things, so there are two different tags. A little confusing, if in doubt we just go with <b> in content.
Italics
<i>, or <em>
The HTML <i> element is used to define parts of text that represent an alternate voice, just like how you read alternate in your head just then. The content inside <i> is typically displayed in italic.
The HTML <em> element is used to define emphasized text, with the content inside this tag also being displayed in italic.
Hyperlinks
<a>
Being able to add hyperlinks to a piece of content is one of the most important tools in a Digital Marketer’s HTML arsenal. When anchored properly having multiple links coming to and from each webpage will prove massively beneficial to an SEO campaign, and as such most content management systems make adding links very simple.
There are however a number of circumstances where even in huge platforms like WooCommerce, the content fields are limited to shortcode only. In these situations it’s important that you know how to add links the old fashioned way.
The first segment of the hyperlink tag is <a href=. This short piece of code defines that you are beginning a hyperlink (<a), and that you are linking to a URL (href=). For a list of other <a> tag attributes, click here.
Next we will add the target URL and close the initial <a> tag. <a href=”https://www.pixelkicks.co.uk”>. This has now given the hyperlink a destination, and all that is left is to give it an anchor.
Anchor text is the visible text on the page that when clicked, will take the user to the target URL. In shortcode, it is added after closing the initial <a> tag, and before the final </a> to complete the hyperlink. This is an example of a completed hyperlink in shortcode:
<a href=”https://www.pixelkicks.co.uk”>Welcome to Pixel Kicks!</a>
This completed example will now display as Welcome to Pixel Kicks! on the front end of your site.
Images
<img>
Another staple part of any online content is images. Almost every page has them, and as with hyperlinks, most CMSs make it very easy for you to upload them. But how do you upload an image to a page or post where there isn’t an “add image” button?
We start with the <img tag, which defines the following line as an image. Next we must tell the page where to find the chosen image. What needs to be typed here will depend on the CMS being used, but for the most part it will be a URL to the item in the media library. In any case you must use the prefix <img src=< followed by the URL or file name.
With the source defined you must now provide alternative text for the image, to be displayed if the image cannot. For Digital Marketers this is an important step, as an alt tag can be a good opportunity to include keywords for better SEO. To add the alt text you must write the following: <img src=”www.example.com” alt=”Example keyword”
The final key step to adding an image is to set the size. When you add an image to a page or post, you aren’t actually putting the image on the page, but instead are creating a space for it to be linked to and displayed in. For this reason we need to make sure that the page leaves enough room for the image. By checking the dimensions in pixels of the image beforehand, you can now designate a space of that size to be reserved. <img src=”www.example.com” alt=”Example keyword” width=”100” height=”100”>.
There are many stylistic attributes that you can give to an image, which are defined by adding style= after the dimensions, but as there are so many variations we won’t go into depth in this article. If you would like to view the full list of available attributes, click here.
Video
<video>
It’s no secret that video is a valuable part of any content marketing strategy. More and more businesses are utilising video to reach out to their target audience in a way that makes content easy to digest, and ultimately increases engagement.
Not only is video great for reaching out to customers and building your brand’s online profile, but it’s incredibly beneficial for boosting your SEO efforts. Adding videos to your on-site content can increase click-through rates, reduce bounce rates and raise your chances of getting high-quality backlinks.
So, as a digital marketer, you’ll want to know how you can go about embedding video content into your blog posts or pages.
The key here is to make sure that you’re adding videos in a way that allows playback within the page to keep the user on your website. The HTML video element <video> does exactly that.
We start with the <video tag, which defines the following line as a video. Then, we open this with the correct pixel size that we want to video to display in, so: <video width=”320″ height=”240″ controls>
Similar to the img tag above, we’ll be defining the source of the video on the next line of code, i.e.: <source src=”/uploads/media/video.mp4″ type=”video/mp4″> before closing with the </video> tag.
In full, the code will look like this:
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
</video>
This is video at its simplest form, and there are many different attributes that can be added to your videos, which you can view here.
Paragraph
<p>
By far the simplest, and arguably most important HTML tag, <p> defines a piece of text as paragraph or body text. The vast majority of standard, plain, run of the mill text will be bracketed by <p> and </p> on any given page or post.
For Digital Marketers it is important that you understand what this tag means, as paragraph text is the bottom rung of the SEO ladder, and is the last type of text that search engine crawlers will notice. For this reason make sure that when adding content there are sufficient keywords in your heading tags, and that they have been used to efficiently break down the masses of paragraph text into relevant sections.
Embed
<embed>
If you want to create rich, engaging and visually appealing content, then knowing how to embed social media posts in your blog posts is a game changer. Embedding is essentially a way of inserting an external piece of content into your blog.
In digital marketing, it’s important to ensure that your cross-platform strategies all work together in tandem. This means that if you’ve created social content that’s relevant to your latest blog, embedding that into the post itself can not only enrich your written content, but boost your social profiles too. Alternatively, the feature can be used to embed content from an external source that your users may find useful.
The HTML embed tag follows the same principles as the ones we’ve spoken about previously, opening with <embed> and </embed> to close. However, it’s unlikely that you’ll need to code the source yourself, as social media websites will generate it for you. Tip: when looking to embed an image or video, it’s better to use the <img> or <video> tags above.
Facebook, Twitter, Instagram and YouTube all provide a feature that supplies an embed code for an individual post. Simply copy and paste this code into your blog and the post will appear.
See below how to generate an embed code from each social platform:
YouTube
Blockquote
<blockquote>
The use of the block quotation element can help to distinguish a quote from the main body content. It can be used for inserting a review or a quote from an external source, and is usually designed to look visually different via indentation, possibly with a different text format or a background to make it stand out.
We start a block quotation with the opening <blockquote> tag. This is preceded by the paragraph <p> tag before inserting the quote and closing with </p></blockquote>.
Here’s an example:
<blockquote>
<p>”Insert quote here”</p>
</blockquote> Should you wish to link the quote to an external source, you can cite the link before the quote itself, by changing the opening to <blockquote cite=”source.com”>. You can view more blockquote attributes here.
Content Structure
Properly structuring your content is crucial for both usability and SEO purposes. By adding headings, line breaks and breaking down your content into lists not only improves the readability of information, but is a high value ranking factor in the eyes of Google.
Below are some of the most common HTML tags that can help to organise and structure your content.
H1-H6 Headings
<h>
HTML headings are used to structure your content into sections, and range from H1-H6. They’re useful for optimising your page for key search terms and highlighting important keywords or questions that then lead on to answer the users query.
H1 is the most important heading, and is the one that should be at the very top of the page to highlight the main heading. There should only be one H1 heading on any page, and this should be followed by H2, H3 headings and so on, depending on the hierarchy of your content and the importance of each heading.
HTML headings are easily defined by an opening <h> and closing </h> tag. For example:
<h2> This is Heading 2 </h2> <h4> This is Heading 4 </h4>
Line breaks
<br>
The line break HTML tag is used to insert a single line break in between the main body of text.
This shouldn’t be used to separate paragraphs in order to style text, but instead should be reserved for occasions where each line of the same container of text needs to be on a new line i.e. when formatting an address, or a poem. Formatting a line break is simple:
Here’s the first line of text.<br>This second line of text will appear on the line below.<br>This will be the third line of text, appearing below the second.
There’s no need to close a line break tag as we do with other HTML codes.
Lists
There are two different ways to add lists to your content via HTML:
- <ol> This specifies an ordered list, where the list items will be displayed as numbers
- <ul> This specifies an unordered list, where the list items will be displayed as bullet points.
Within both of these list types, each item of the list will be defined as a list item <li>. Both the list items and list types must include opening and closing tags.
>Here’s what your list HTML should look like:
Ordered list
<ol> <li>Content</li> <li>Images</li> <li>Video</li> </ol>
Unordered list
<ul> <li>Content</li> <li>Images</li> <li>Video</li> </ul>
Tables
Tables allow you to organise data into rows and columns. The <table> tag defines an HTML table, and then you create your table a row at a time.
- Each table row is defined with a <tr> tag.
- Each table header is defined with a <th> tag.
- Each table data/cell is defined with a <td> tag.
Here’s an example of a really basic table for name and age information:
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
</tr>
<tr>
<td>Jason</td>
<td>Smith</td>
<td>26</td>
</tr>
<tr>
<td>Carla</td>
<td>Jackson</td>
<td>32</td>
</tr>
</table> And it produces a table that looks like this:
| First Name | Last Name | Age |
| Jason | Smith | 26 |
| Carla | Jackson | 32 |
Forms
The vast majority of websites a digital marketer will work on feature contact forms as one of the primary methods of receiving enquiries from site visitors. Forms can be created in different ways, sometimes being coded into a page by a developer, and other times being built in a visual page building app such as Elementor.
However, when working on a WordPress website, forms are most commonly created using the site plugin Contact Form 7. The plugin is easy enough to use for those who don’t have the best technical ability, with buttons allowing you to select the relevant fields and settings, automatically generating the required HTML tags to build your form.
Despite this, the edit view of the form isn’t as user-friendly as the same view of a post or page, with you requiring some HTML knowledge to understand what is what. It’s not just editing your form that requires a bit of HTML know-how… adding it to the relevant page involves HTML too. Specifically, each form you create on CF7 has its own shortcode – simply copy this and paste it into the HTML editing window of the post or page you want it to appear.
Head
The <head> tag is used at the top of any given page, and contains all the metadata (data about data) given to web browsers. There are a whole cacophony of developer tools that can be included in the <head> like <style>, <base>, <script> and <noscript>, but for SEO there are two main areas to be concerned with.
Title
<head> <title>15 HTML Tags Digital Marketers Need To Know</title> </head>
The title for a page is the metadata given to the browser to display in search results, on browser tabs, in bookmarks or any other place where the page title is displayed. The meta title is important for Digital Marketers as it is a key area for letting the search engines know what your page is about, so get those priority keywords in there!
Description
<head> <title>15 HTML Tags Digital Marketers Need To Know</title> <meta name=”description” content=”Learn about all the HTML tags Digital Marketers should know with Pixel Kicks”> </head>
Like the title, a meta description is used to tell search engines about your page, and helps them to decide if it is relevant to the search term. For this reason it is really important for your SEO that your meta description contains your desired keywords.
You can’t just type in a string of gibberish however, as while the meta description isn’t displayed on the page itself, it is displayed on some links to the page. The most common of these is when a page is shared to social media sites like Facebook, where the link description will show both your meta title and description, so don’t think nobody is going to read it! Make sure your keywords are included, and that the description makes sense.
Google Analytics Integration
Depending on your site, you may also need to upload a Google Analytics tracking code to the <head> section of a given page, in order to properly keep track of traffic to and from your site. Take a moment to watch this helpful video on how to add the code to your pages.
Bonus
Two tools that we couldn’t work without.
Chrome DevTools
Google is really helpful, and they set up Chrome DevTools in 2008 to help developers take a look at the nuts and bolts of websites.
If you press F12 (Windows) when browsing Google Chrome you’ll open up the code of the page you’re on. DevTools lets you make edits to that code and shows you how things would look if you did so. It helps you to diagnose problems quickly, which ultimately helps you get to the roots of problems, faster.
For marketers like us, we can use DevTools to inspect certain elements on a website. It can be particularly handy to check that images are displaying their alt tag, for example.
It helps us to troubleshoot problems that can then be sent to a developer for fixes.
Google Tag Assistant
Want to ensure a tag you’ve installed on a site or specific page is actually working and active? Google Tag Assistant is a free browser plugin that can list any installed tags and their status on a site. Once installed, you simply go to the page you want to inspect, enable the plugin, and refresh the page. Once done, you’ll get a list of things including installed Google Tag Manager containers and Google Analytics properties for the site.
The Tag Assistant plugin is being phased out though, and replaced with an on-site debugger, which combines the functions of the current assistant with Google Tag Manager’s preview mode.
Instead of activating a plugin, you paste a site’s URL into the debugger. The site will open in a fresh tab, allowing you to have a test session. If you’re simply checking analytics is installed, you’d just load up a page before going back to the results. But if you’re testing something out, such as form submission conversion tracking, you could fill out a test form during the session, before going back to the debugger’s results to check your conversion action triggered correctly.
Sometimes even the best of us get stuck, and you may find yourself faced with an HTML tag that you don’t understand. Luckily help is out there, and if you didn’t find the answer in this article, why not take a look at the full glossary of HTML terms at w3schools.com/tags/.
This extensive list should have the tag you’re looking for, and be able to give you some understanding of what it does and how to use it!
MORE LIKE THIS
VIEW ALL
