A Brief Introduction to HTML for Marketers

HTML (hypertext markup language) is the standard markup language for web pages, allowing us to format features on a page such as images and text. Understanding HTML can help marketers and content teams to:

understand the content on our websites
identify and fix problems with our content formatting and other code
improve search engine optimisation (SEO)
improve usability, website design and conversion rate optimisation (CRO)

What Does HTML Look Like?

HTML follows a simple structure, but when you have lots of it all one place it can seem quite complicated. The thing to remember is that each element has a beginning and ending tag, and the bits sitting in the middle of these tags will be affected by them.

Take a look at the HTML below:

<html>

<head>

<title>Website Title</title>

</head>

<body>

<h1>Header 1</h1>

<b>Some body content</b>

<p>More body content</p>

</body>

</html>

When the HTML is laid out like this you can clearly see that each tag, such as <b> will also have an end tag, such as </b> to match it. When one of these tags is missing or written incorrectly, that’s when things can begin to break.

If you right-click on this web page – or any web page, for that matter – and click on View Source, you will see all of the HTML that dictates what this page looks like.

Basic HTML Tags

Take a look at some common HTML tags below:

<b>This text will be bold</b>
<strong>This is an alternative bold tag</strong>
<i>This text will be italic</i>
<em>This is an alternative italic tag</em>
<u>This text will be underlined</u>
<p>This text is in a new paragraph</p>
<br>Line break (no end tag necessary)
<head>The head tags appear at the top of the page and will often include page titles, meta descriptions, JavaScript and more</head>
<body>The body tags encompass the main page content your visitors will see</body>
<a href=“https://www.silverdisc.co.uk/contact”>This text will be a link to the SilverDisc contact page</a>
<a href=“https://www.silverdisc.co.uk” target=“_blank”>This link will open in a new window</a>

The <ul> tag means “unordered list”, and it's what you use to make bullet points.

<ul>

<li>The li tag means “list item”, so if you want bullet points, start each line with an li tag.</li>

<li>This would also be a bullet point.</li>

</ul>

For numbered lists, use the ol (“ordered list”) tag:

<ol>

<li>This will be number one.</li>

<li>Number two.</li>

<li>Number three.</li>

</ol>

By knowing some of the above tags, you should be able to figure out what part of this HTML means (and you may be able to guess the rest):

<p>We have lots of hats for you to browse. Take a look at our <a href=“https://www.fakehatwebsite.co.uk/green-hats” target=“_blank”>green hats</a> or <a href="https://www.fakehatwebsite.co.uk/contact">contact us</a>.

<br />

<a name="contact"></a><strong>Contact Us</strong>

How Can HTML Help With SEO?

Certain HTML tags can help with SEO. While your CMS probably allows you to edit them easily (and it definitely does if you’re a SilverDisc client!) it can be useful to know how to find them in the HTML if your page or someone else’s page has these tags.

H1 tags are used for headings. They dictate how the text looks on the website, to ensure it is eye-catching for the user. But they also tell Google that the text within them is important, so this is a place where you should add in the keywords you would like your page to rank for. H1 tags look like this:

<h1> A Brief Introduction to HTML For Marketers</h1>

Title tags are also important for SEO, and these are for the text that appears at the top of the user’s browser:

<title> A Brief Introduction to HTML for Marketers | SilverDisc Limited</title>

Meta descriptions don’t improve your SEO rankings, but they should still contain your keywords so that when a user is looking at the search results page, they see that your listing contains a search term they were looking for:

Finally, image alt tags are used for images and they tell Google what it is an image of. Using these wisely can help you to get your images into Google’s image search results:

What about Schema.org Structured Snippets?

Though not HTML, Schema.org structured snippets are good to get a handle on because these can also help improve your SEO. They help search engines to understand your page content and display it better on SERPs. Whether they have an effect on rankings is debatable, but they may well have an effect on click-through rates.

Structured snippets help Google to figure out what the content on your website is, so that it can show it in a more useful way in SERPs. You can tag up things like your business address, phone number, reviews, product prices and descriptions, book publication dates and much more to make your organic listings richer and more useful.

Here is an example of a structured snippet for a vehicle:

{

"@context":"http://schema.org/",

"@type":"Product",

"color":"Silver", "manufacturer":"Volkswagen", "model":"Touareg", "productionDate":"2005", "name":"Volkswagen Touareg 2005" }

</script>

What is the Difference Between HTML and CSS?

Cascading Style Sheets (CSS) describe how HTML elements should be displayed, so this is a slightly different way of coding formatting onto your website. The style you choose “cascades” down to your web pages from a separate sheet, which is “called” on the web page using a line of code. This saves web developers from doing lots of coding on every webpage when we want formatting styles to be the same throughout the site – we can type it all out once on the style sheet, and then reference it on every page we would like it to apply to.

It’s worth noting that sometimes when you set HTML formatting in your CMS, this may be overwritten by different rules set in the CSS. This is useful to know if you can’t figure out why your HTML formatting isn’t working as you might expect!

You can also use inline CSS (CSS tags on individual lines) or CSS blocks (at the beginning of a page, dictating the style of that whole page) and this will overwrite CSS called from the sheet. If you’re a SilverDisc client, CSS isn’t something you need to worry about – we take care of all of that and more. But as a marketer it can be very useful to know how this all works and have a better understanding of your own website.

In HTML, <span> and <div> tags are used to define a section, though you’ll probably see <span> more often. It does nothing on its own but can be used with CSS or JavaScript, using the word “class” to call style from CSS. For example, here there is a class called “note”, which has its own format – such as font size, colour and so on – dictated in the CSS. So when we “call” this class within our HTML, this heading text has the “note” class formatting:

<h1>My <span class="note">Important</span> Heading</h1>

What is JavaScript?

The <script> tags are used to add JavaScript code in HTML. JavaScript usually appears in the <head> section of your page, though you should double check this if you ever need to add any to your website, as some providers may differ. This is good to know because you may need to add in some of these examples:

Google Ads conversion tracking code
AdSense / ad unit code
Setting other cookies
Formatting or animations such as hyperlinks underlining on mouse hover

Improving Social Media Posts with Open Graph Meta Tags

Open Graph meta tags are used to label site names, content types, URLs, titles, descriptions and images so that when your pages are shared on social media, the page preview displays all of the correct information for that page. It makes those social posts look much better than if you were to simply post a link, or if the page is displayed with an incorrect or irrelevant image. Here is an example:

Twitter uses its own Twitter card tags, but if those aren’t present it will revert to your Open Graph meta tags instead.

How to Spot and Fix Errors in Your HTML

If you have uploaded content onto your website and the formatting doesn’t look quite right – and you can’t seem to fix it through the CMS – switch to HTML view. By looking at the HTML tags present you should be able to find the source of your problem. HTML has to have exactly the correct syntax or it won’t work, so look out for:

Missing beginning or end tags, e.g. a <b> without a </b>
Errors in syntax, e.g. spaces, quotation marks, forward slashes missing or in the wrong place
JavaScript in the body instead of the head section or vice versa
Strange tags appearing in content copied in from Microsoft Word – this can sometimes be a problem if you’ve copied text directly from Word, as it can drag all sorts of formatting tags in that your CMS may not understand and probably doesn’t need. There are free tools available online to help you clean your HTML, though many are only free for limited usage.

Knowing the difference between HTML, CSS, JavaScript, structured snippets and Open Graph – not to mention what they all do, how you can use them and how to find and fix errors within them – can really boost your marketing skills. If you’re a SilverDisc client, you can always ask your account manager any questions if you would like to learn more yourself, or simply let us do the hard work for you – it’s what we’re here for!

If you would like any help with website content or design, get in touch with SilverDisc.