Learning how to code can make you a better SEO or marketer. As digital marketing becomes increasingly essential to businesses, having a basic understanding of HTML and CSS is almost an industry expectation today.
They are some of the most popular languages used by developers, digital marketers, and designers. And while they may sound technical and seem like they require extensive training, there are many ways to use basic HTML and CSS in everyday marketing.
In fact, you may have already used HTML without even knowing when you edited a page of your website or a blog post, or when you updated a page header or formatted a link.
You might be wondering…
As a digital marketer, is learning HTML and CSS a must-have skill?
The short answer: yes!
Today’s digital marketers need to be able to make quick fixes to their websites, landing pages, and blogs.
And guess what?
It’s not as hard as you might think.
And you really don’t need to know much code or to become a full-stack developer.
Why do you need to learn HTML and CSS?
Having a working knowledge of HTML and CSS does much more than add a few catchy buzzwords to your resume.
Understanding the basics of HTML and CSS equips you with the tools to understand how websites, landing pages, and blogs are built, how they work, and how to manipulate the code behind them.
Besides, you’ll be a billion times better at your job by understanding how search engines like Google interpret each of these coding languages.
And, of course, the more you know, the better you’ll be. You’ll be able to understand what you’re looking at and knowing the most important concepts and tags will help you to talk to a developer without sounding like a joke.
If you’re a web manager, for example, knowing basic codes is just as important as knowing basic mechanics for someone who owns a car. No car owner wants to be running to a mechanic when they can do a quick fix on their car when it breaks down.
What’s more, you’ll feel empowered to update your company’s website on your own and make on-page SEO optimizations.
Still not convinced you need to learn HTML and CSS as a marketer? Here are three more reasons:
In this introductory guide, I’ll explain what HTML and CSS are, explain how to get started if you’re brand new to coding, and show you the most important HTML codes that are relevant to you as a marketer.
And, oh! I have a reward that will make your learning HTML and CSS a lot easier.
Everything starts with codes
Codes are actually everywhere on a website. Every display of words or graphics is an act of coding.
It’s also important to know that every website has two main types of codes: front-end codes and back-end codes.
Front-end codes generate all the features of the website that can be seen by visitors. These include text, pictures, buttons, etc.
Back-end codes, on the other hand, are responsible for more structural operations like logging in and security.
Let’s start off with the basics:
HTML and CSS are the building blocks of a website. They are the main technologies for building websites.
As a newbie to HTML and CSS, you must understand that these technologies complement each other in the structure and design of websites.
Think of HTML as the blocks and foundation of a house and CSS as the finishing (painting, tiling, roofing).
What is HTML?
HTML, or HyperText Markup Language, is a computer language used to create web pages and web applications. HTML uses tags to alter the structure, or how text or objects appear on a web page.
These tags help you to organize content, make a page easier to read, or tell search engines what the most important keywords are, using header tags.
Think of HTML as the skeleton of a website. It’s the code that contains the content and meta information that search engines use to understand what a website is about.
Here’s an example of an HTML code:
In the example above, the bracket, <, opens the code, and a close bracket </a> closes the code. Without a closing bracket, the code won’t work properly.
WordPress and other content management systems (CMSs) have two ways you can edit HTML content: the WYSIWYG and HTML editors. The WYSIWYG (What You See Is What You Get) editor allows you to edit things like font size, style, and color by selecting from a drop-down menu.
The alternative is the HTML editor which you can use to edit the HTML code directly.
Websites build solely with HTML won’t look great though they might be lightning fast. To make it pretty, you’ll want to learn CSS.
What is CSS?
CSS, or Cascading Style Sheets, tells the software how the HTML elements on a page should look, from its layout and color to scheme and formatting. CSS basically controls all visual aspects of your website and it can be implemented using either an internal or an external style sheet.
You can use an internal style sheet within HTML code to tell the software which fonts to use, what the background color of a page should be, and other design elements.
External style sheets exist in a separate file with their own design codes linked to the main HTML document.
Here’s an example of an internal CSS style applied to some text on a page:
In this example, p (stands for paragraph) selects where to apply the style: paragraph. So, the color “Tomato” will be applied to the selected paragraph.
Without CSS, your website will look dumb and unattractive. When working with CSS, it’s best to store all shared CSS codes and rules in one sheet. When you need to style unique items like an about page or a blog post, you should use individual style sheets for each page.
Why, you ask?
It increases your page load speed by not forcing search engines to crawl tons of unnecessary lines of styling code for every page on your site.
Remember. Fast page load improves your search engine rankings.
Let’s recap.
HTML is the technical backbone of a webpage. It provides the basic structure for the page.
CSS, on the other hand, is the style. It shows the end-user the design, colors, fonts, and branding that make your website appealing and easy to navigate.
HTML without CSS works just fine. However, it’s not aesthetically pleasing to the user.
The first picture above is an example of a blog post in HTML without CSS. The second image shows the same blog post with a CSS stylesheet applied to it. Looks much better. Doesn’t it?
Common HTML codes every marketer should know
HTML uses tags. Tags are what you see enclosed in angles on an HTML document. They are used to markup (select) HTML elements on a page. An example of a tag is <h1> for open tag and </h1> for closed tag.
Every HTML tag begins with open brackets like <html> and ends with closed brackets </html>.
In the sample above, the first tag tells the browser this is an HTML document and it should treat it as such. The <body> tag indicates body copy, <h1> is Header 1, the main headline of the page, and <p> means paragraph copy.
Let’s go through some of the most important HTML tags you should master.
HTML tag: <html> Your webpage here </html>
This tag specifies that the page is an HTML page. It starts at the very beginning of the document and is closed at the end.
Header tag: <h1> Your header here </h1>
<h2> Your subheadline here </h2>
Header tags are important for blog posts. They structure your posts and help to draw the reader’s eye to the different sections. They are also helpful for on-page SEO purposes, as search engine algorithms give more weight to keywords that are in your headers.
Headers can be formatted using CSS to indicate the style (font, font size, bold/italics, spacing on the page) for each header tag (h1, h2, h3, h4, h5, and h6).
Hyperlink tag: <a href=”url”>Link text</a>
Hyperlinks are common in emails, blog posts, and other HTML files.
List tag: Lists help to break up and organize content on a page. There are two main types of lists in HTML:
Bulleted list
<ul>
<li> first list item</li>
<li> second list item</li>
<li> third list item</li>
</ul>
Numbered list
<ol>
<ol> first list item</ol>
<ol> second list item</ol>
<ol> third list item</ol>
</ol>
You can always use CSS to change the types of bullets, numbers, or alignment within the list.
Paragraph tag: <p> paragraph here </p>
This tag separates a group of text into paragraph format.
Image tag: <img src=”image file link” width=”300” height=”200” alt=”keyword description”>
This tag adds an image to your document from an image file and allows you to change the size and add alt text, which helps with SEO. You can add different padding or other attributes using CSS later. Note that this tag doesn’t need the traditional </> brackets as it is self-closing.
Text formatting tags:
Bold <strong> text here </strong>
Underline <u> text here </u>
Italicize <em> text here </em>
To format font size, font family, font-weight, line height, or other text styling, you’ll use CSS style tags, or the style for your entire document will be applied to the text.
Social sharing tags:
LinkedIn: http://www.linkedin.com/shareArticle?mini=true&url=URL
By adding your desired URL to the section of this code that says “URL,” those who click the link will automatically go to LinkedIn and see a pre-populated post with the link provided. This saves your site visitors the trouble of copying the link to a new post themselves. This helps to encourage social sharing and gets you more page visitors.
Title tag: <title> your title here </title>
This tag sets the title for the page that appears at the top of your web browser.
Body tag: <body> your webpage here </body>
This tag is the container for the contents like lists, paragraphs, hyperlinks, and images on your webpage.
Line break tag: </br>
This is a really helpful code for formatting. It adds a break in the text and can be used within headers, paragraphs, or anywhere on the page to move the copy after the break to the next line.
Span tag: <span> item </span>
This tag helps to preserve the formatting of the page. By placing an object in a span tag, you’ll avoid messing up any of the formatting surrounding that image or icon.
To test out HTML codes and practice, you can always use W3Schools “playground” and click “Run” to test out your code.
How to update your CSS
To update CSS, it’s best to use an external style sheet for your website. This way, it’s easy for you as a marketer to update a single style and have it applied to your entire website.
Not clear?
You can include CSS that says all h1 tags on your site should be bold, have a font size of 40, be in sans serif, and have the color red.
When writing your HTML, you can simply link this style sheet to the HTML document, then use an h1 tag within your code and those CSS styles will be automatically applied.
Another way to update your CSS is o use inline styling. With this method, you have to set individual styles to individual elements within your HTML document.
This approach is, however, more time-consuming and leaves room for errors and inconsistencies across your website. For best practices, only use inline styling when you want to style very unique pages or elements. As much as you can, you should use this method sparingly.
Pro Tip: Inline styling overwrites any styles specified on your master stylesheet.
Now that you have all this knowledge, where do you go from here?
How to learn HTML and CSS the easy way
Read more about HTML and CSS
Most of the knowledge you would get about anything is in the books. If you want to be fully abreast with HTML and CSS, you should be ready to read about the subject as much as you can.
You can either pick up a course or subscribe to some email lists that will gradually expand your knowledge on the subject.
Practice often
You want to do it over and over until you get it. Despite the fact that you’re only beginning your journey in understanding HTML, CSS, coding, and everything in between, it is imperative that you know that consistent efforts will make you realize quick progress.
In no time, you could become a pro; it all depends on how much you’re ready to gulp in.
Don’t be afraid to do it wrong
When coding for the first time, mistakes are indispensable. The good news is, when it comes to coding, unlike other ventures, you don’t waste any resources from going wrong.
So, you’ve lost your way in a segment of code and cannot find your way back or move forward? You could as well delete it all and start over again.
Be patient with yourself
Don’t be discouraged. If everything seems challenging, take your time. What matters is that you learn at the end of the day. So, whatever pace you’re taking, ensure you’re making steady progress.
Practice the skills you have acquired
You may be a website manager or marketing agent for a company in your neighborhood, or a sole proprietor running your own business website. Whatever the case, make sure you’re putting your skills to use.
What Next?
Try your hand at updating an HTML email, adding social sharing links to your next blog post, optimizing your blog library for SEO using keyword-rich header tags, updating alt text on images, and using top-notch on-page SEO.
These days, learning to code is as easy as having the Internet and a computer. From Codecademy and W3Schools to freeCodeCamp and Udemy, you have everything you need at your fingertips.
Now that you know the basics of HTML and CSS, you may be interested in learning more. It’s not as scary as you may have thought, right?
If you’re completely new to HTML, CSS, coding, and everything in between, here’s the gift I promised you.
It will serve as your guide as you learn HTML and CSS, how to use it as a marketer, and features high-end courses, lessons, tutorials, and communities that help you learn how to code.
Get your FREE copy of Beginner’s Guide to HTML and CSS for Marketers from HubSpot below:
