Basic HTML Coding That Every Marketer Should Know

As a marketer, your job is to present your clients with the best marketing materials and presentation available – both online and offline.

However, as a digital marketer, you don’t always have access to a front-end web developer that can spend the time to spruce up all of your ideas or fix every minor bugs you may come across.

And, unfortunately, in spite of all the updates content marketing strategists today have made with Rich Text Module tools, it still doesn’t always compare to editing and adding content using good old-fashioned raw HTML.

Why Basic Coding is Useful for Marketers

Have you ever tried to do something in a Rich Text editor only to find that the process is taking you twice as long because the output isn’t exactly what it’s supposed to be? A couple of examples that come to mind are:

• Too much added spacing at the top or bottom between paragraphs.
• Sometimes, you are in the middle of making a bulleted list of items, but for whatever reason, after pressing the return key a few times, you realize it keeps printing additional empty bulleted items.

Whatever the reason, you go back and delete all the content from the Rich Text Module, retype (or copy and paste) the content and press save again, only to find the results remain the same.

Frustrated, you take the project to your developer and the first thing he/she does is open the raw HTML and says, “The reason this is happening is because...”

After hearing the explanation, you think: “Wow, it was something that simple?” If only you knew basic HTML, it could have saved you 10 to 20 minutes of frustration.

Below is a list of the most popular HTML tags all marketers should know and how to use them. Before we get any further, in order to minimize confusion, there are a few key “developers’ terms” that you should be familiar with.

Basic Developer Terms to Know

Standard Tags

These tags generally rely on content or other elements between the open and closing element. The Paragraph tag <p>insert content</p> and the Anchor/link tag <a>insert link</a> are two examples just to name a few. 

Note: Every end tag includes a backslash (ex: </p>).

Self-closing Tags (or Empty Elements)

Self-closing tags are tags that don’t have any content living in them and therefore don’t require another set of code to close it. The Image tag <img src="" alt="" > and the Break tag <br> are two examples of self-closing tags.

Parent Tags

Without going into too much detail, have you ever heard your developer use the words Parent, Child, and Siblings to describe an HTML code snippet?

Well, in order to fully understand some of the references used in this article, i’ll give you a quick synopsis of what these are.

Parent Tags: Tags that begin and end a coding sequence and wrap around various other tags.

Example: <p>Something<span>goes</span>here</p>

In this case, the <p> tag would be the “parent” of the <span> tag.

Child Tags: Tags that are wrapped inside the parent tag.

Example: <p>Something<span>goes</span>here</p>  

In this case, the <span> tag would be considered the "child" of the <p> tag.

Siblings Tags: Any tag that sit directly beside or on the same level in the HTML DOM.

Example: <p>something goes here</p> <div><p>something goes here</p></div>

Notice that the <p> tag closes and then the <div> tag opens, and both are sitting next to each other. The <p> would be considered sibling of the <div>.

Now that we’ve got that out of the way, it’s time for the fun stuff!

Basic HTML Tags to Know

Paragraph Tag

This is probably the most popular tag among marketers. A <p> tag basically means Paragraph. So, when it comes to writing a single paragraph, the tag you should be looking for should start with <p> and end with </p>.

Note: <p> tags should not contain any elements between the start and end of the tag, such as another <p> tag, table, or a <div></div> tag.

Below are two examples of how to use <p> tag:

<p>Now that we’ve got that out of the way, it’s time for the fun stuff!</p>



<p><strong style="background-color: transparent; font-size: 1rem;">Parent Tags: </strong><span style="background-color: transparent; font-size: 1rem; color: #ff0201;">The tag that wraps the immediate tag you may be looking at. </span></p>

Span Tag

This is a tag that generally has no default styling and simply inherits the style of the Parent tag. However, <span> tags are important as they allow you to add custom styling to a "specific part of a inline content". Below is an example of how to use a span tag:

<h3>The sky is<span style="color: #60b0e2;">blue</span></h3>

By wrapping the word “blue” in a span tag, we’re now able to target the word “blue” and customize its appearance.

With the help of a little inline attribute style="color: #60b0e2;", we can change the color of he word “blue” to blue. Note that the “style” attributed is placed within the opening <span> tag, after <span and before the closing carrot.  

Heading Tag

Who doesn’t like a nice big heading tags? As the name implies, heading tags are usually used for the heading/title of a page or the heading of a section.

Heading tags usually follow a hierarchy, the <h1> tag being the most important (generally the largest) and the <h6> being the least important (generally the smallest).

Some examples of heading tag codings are:

<h1>INBOUND MARKETING. OUTSTANDING RESULTS</h1>



<h2>HTML Tags to Know</h2>

  

<h3><span style="color: #75c485;">Standard Tags</span></h3>

Side Note: Believe it or not, as Google’s algorithm starts to become more and more intelligent in picking out keywords, it sometimes captures pieces of content to use as a “featured snippet” in its search engines.

Featured snippets are Google’s way to try and answer questions within its search query. By properly using meaningful tags within your online content, such as heading tags, <p> tags, etc. your website content has a greater chance of being featured as a part of Google’s search query. This can greatly increase visits and potential leads to your website.

Div Tag

Don’t get this tag confused or misinterpreted with other tags. While the <span> tag is popularly used to hold content, the <div> tag is simply a container or a structured tag that groups or encompasses other page elements.

Unlike the <span> tag, a <div> tag cannot live within a <p> tag as it’s not meant to behave as an inline tag.

Below is an example of a <div> tag:

<div>


<h2>This is a section title of my post.</h2>


<p>This is a paragraph that supports the section title of this post.</p>


</div> 

Anchor Tag

An anchor tag <a> is used to create links between pages or between sections on a page. However, for the <a> link to be effective, it needs to contain an attribute known as the Hypertext Reference (href). This attribute looks like: href="/link-goes-here".

Note: The href=“” attribute must be placed in the opening <a> tag before the end carrot and contain a url link.

Example of how to use an anchor link:

<p>To view more, <a href="https://www.bluleadz.com/blog/youre-using-alt-text-wrong-and-how-to-fix-that">click this link</a>.</p>

The default output of this tag is usually a blue text with an underline signifying that the text is clickable. This also changes the mouse arrow to a finger pointer, signifying that the user is able to click on this item.

How to Use the Anchor tag to Target/Jump to a Section on the Page

An <a> tag not only allows the user to target a link but also a section on a page.

In order to target/jump to a specific section on the page, ensure that section container wrapper tag has an "id” attribute id=”IDHERE”.

Without going too much into details, an “id” attribute is a unique naming value that should only be used once on any given page. This name then becomes an anchor that the href link can target – which then allows the page to jump to that section when the <a> tag is clicked.

Example of how to target a section on a page:

Button you would click:
<a href=”#meet-the-team”>Meet the Team</a>


Section it would jump to:
<section id=”meet-the-team”>Content Here</section>

Image Tag

Adding an image on a page isn’t as difficult as it may seem. It is probably the most exciting of all the other tags since it makes the page seem more creative and alive as opposed to just adding words on a page.

Similar to the <a> tag, the image tag requires two other attributes within the <img> tag:

• a src=”source link for image”
• an alt="alternative text that represents/describe the image”. 

Note: the src="" and alt="" attributes must be placed a space after <img and before the closing carrot >.

Below is an example of how to create an image tag:

<img src=”https://www.bluleadz.com/hs-fs/hubfs/Best%20CRM%20systems%20for%20your%20business.jpeg?width=473&name=Best%20CRM%20systems%20for%20your%20business.jpeg” alt="this is the alternative text used to describe the image”>

This basically means if the “Image” doesn’t load, then the user will see the Alternative text instead. This is also useful for screen readers to help paint a picture of what’s truly going on on the page. For more information on the “alt” attribute, check out this article.

Bulleted List/Numbered List Tags

Unlike other tags, making a bulleted (unordered) or numbered (order) list requires an extra Parent tag.

An unordered/bulleted list starts with <ul> and each item within that list gets wrapped in a <li> tag. Similarly, a numbered list starts with <ol> and each item within gets wrapped in an <li> tag.

Example of how to create a bulleted list and numbered list with HTML:

Bulleted List: 

<ul>         


<li>Item 1</li>


<li>Item 2</li>


</ul>

Numbered List:

<ol>         


<li>Number 1 item</li>


<li>Number 2 item</li>


</ol>

The coding examples above are some of the most popular HTML codes among marketers today.

However, there are so many more useful tags in HTML5 that, if used correctly, will help to you structure the content on your website which will allow Google properly crawl and index it. The <blockquote> and description list <dl>, just to name a few.

As you get more familiar with these tags, you’ll come to realize they are not so difficult to use or to learn. And in time, you’ll come to appreciate them as it will help you solve problems that would have otherwise taken you 10-20 minutes.