Coding Basics: A Marketer’s Friendly Guide to HTML
Marketers often overlook code literacy, outsourcing anything code related to website or email developers. But understanding some coding basics, such as HTML, benefits the everyday marketer more than they realize.
By learning the fundamentals of HTML, you can:
- Better communicate your vision to the web developers
- Understand how web pages are designed and where pieces of code need to go
- Create richer, more engaging email and website content
- Improve their search engine rankings
“But I don’t need to know how to code. It’s scary.”
That’s where we come in!
HTML coding basics for marketers
Hypertext markup language, aka HTML, is the code that tells your web browser what it should show when you go to a website. When you go to a webpage, your browser reads through the HTML tags and then presents it visually. This blog page even uses HTML to display its design and content to you in a way that is easy to read and understand.
With even the most basic knowledge of HTML code, you can better break up your page’s content in a way that will better engage your audience.
Code formatting
Each HTML tag you add must have a matching set of open and close tags. Without a close tag, any code you write will cause errors in how the info is displayed.
If we were to use the standard paragraph code, <b>, we would need to add </b> after we’re done.
<b>This tag makes text bold!</b> becomes This tag makes text bold!
HTML page structure
These tags will be utilized on every webpage. While you may not need to write them yourself, they are important to know and understand.
<head>Any additional code for a page will go inside of the tag. This covers everything from general page design, additional styling, or Javascript code. Most tracking codes will go here as well.
<body>This will be the main content for your website page.
<link>If your page needs to link to a Cascading Stylesheet Sheet (CSS), it will do so inside of a tag.
<title>Each page needs a title. What you place in the title tag will appear in search engine results as well as the name of the browser tab.
<div>This is a structural element that goes inside the tag. Web pages and emails can be broken down into a series of nested tables. Div tags act as a single cell inside of this high level structure.
Building richer, more readable content
A main way marketers effectively use HTML is breaking up walls of text into something that is easier for a reader to sift through.
Content is meant to be read — not just for search engines to crawl. The more readable your landing page or email, the better your customers will understand the message you’re trying to convey.
With HTML, you add rich text formatting to make key points stand out or build a list of reasons why your product is awesome.
Here are some important tags to spice up your copy!
| Tag | Write It | Show It |
| <a> | <a href=”(URL”)>Click me!</a> | Click me! |
| <img> | <img src=”(image URL)” /> |  |
| <p> | <p>A separate paragraph</p> | A separate paragraph |
| <ul> | <ul> <li>A bullet point list!</li> <li>No numbers!</li> </ul> |
A bullet point list! No numbers! |
| <ol> | <ol><li>A numbered list!</li> <li>No bullet points</li> </ol> |
A numbered list No bullet points |
| <b> | <b>Bold</b> | Bold |
| <i> | <i>Italicized</i> | Italicized |
| <u> | <u>Underlined</u> | Underlined |
| <h1> | <h1>Fancy Title</h1> | Fancy Title |
| <h2> | <h2>Secondary Title</h2> | Secondary Title |
| <br /> | A line break<br />for readability | A line break for readability |
Coding basics for stronger search engine optimization
SEO is the name of the online content game. Marketers are always on the lookout for ways to improve their search engine rankings. But HTML provides some simple ways to gain a boost – no hard thinking required.
The importance of alt tags
Google can do a lot of things except look at images. So how does it know what photos to show as relevant when I search for something online?
Alt text! Alt tags, also known as alt descriptions or alt text, describe the images you post to the search engine. They also allow customers who require certain accessibility tools to enjoy your more visual content.
And if an image is taking a while to load (or doesn’t load at all), the alt text will display.
To add an alt tag to an image in HTML, you would use the following format:
<img src=”(Image URL)” alt=”A meme with the text Hello… is it alt-tags you’re looking for? over a photo Lionel Richie’s face”>
Use HTML header hierarchies
Search engines like it when pages lay out what is most important. When you utilize H1, H2, etc. tags on your page, you are laying out a table of contents of what content is connected and how important each piece is.
By placing a keyword in an H1 tag, compared to an H4 tag, you tell Google that the keyword in the H1 tag is one of the most important pieces of context about what is on your landing page.
All header tags can be stylized to make the most important ones stand out visually, which assist with readability.
Let’s get meta with meta tags
Meta tags may not directly impact your SEO rankings, but by adding in appropriate meta descriptions, this tells search engines like Google know what to display on their search results page. The more accurate and correct the meta description on the results page, the higher the chance someone will click on your website’s link because your result looks more relevant to the searcher.
If you don’t set a meta description yourself, Google then gets to guess what content to put here based on what exists on your page. Also another reason why header hierarchy is vital.
These type of tags usually fall under the main <head> tag for a page and look like the following:
<head>
<title>Let’s Get Meta</title>
<meta name=”keywords” content=”HTML, Meta Tags, Meta Description, Metadata” />
<meta name =”description” content=”Answering all of your questions about meta tags!” />
</head>Basic coding is not so scary, right?
Simple coding doesn’t have to be scary. Knowing the basics of HTML makes a difference when it comes to having stand out landing pages and email copy. And understanding how code works will help you communicate with your web developers.
If you want to learn more about code that helps marketers, check out Code School for Marketers, a 6-week interactive online course to give you the tools to improve your code literacy!
Original article: Coding Basics: A Marketer’s Friendly Guide to HTML
©2023 The Spot. All Rights Reserved.
The post Coding Basics: A Marketer’s Friendly Guide to HTML appeared first on The Spot.
