If you’re a frequent user of HubSpot CMS, you've probably acquired some HTML (Hypertext Markup Language) skills along the way.
HTML is the standard programming language for displaying documents on the web. Learning the basics of HTML can make your job as a digital marketer easier because you’ll feel empowered to update your company’s website on your own.
As a result, you won’t have to wait to move dependent marketing campaigns forward.
Below, we’ll cover some basic HTML codes that will allow you to properly render information on your website and communicate your messages as intended.
Once you understand the context around why certain HTML codes are input as such, it will be easier to recall and use them.
HTML Text Code
When you publish a webpage, you want the text to retain the same formatting as intended, including bold, italics, and underline.
HTML codes make it possible to style the text on your website the same way you would on your off-site word processor. You just need to know a little bit of the language to customize text to your specifications.
- For bold text, use: <em>text</em>
- For italic text, use: <i>text</i>
- For underlined text, use: <u>text</u>
Most other aspects of text formatting involve the use of CSS.
HTML Link Code
HTML link codes empower you to add hyperlinks to different elements on the page, including text and images. Also known as a hyperlink, the HTML link code allows navigation to a target web page.
To create an HTML link code, use the <a> ("anchor") tag.
An example of this HTML link code in action involves something such as:
<a href=”website.com”>link text</a>
The href property specifies the particular destination where you’ll end up after clicking a link. The text the user sees, as a more user-friendly replacement to listing out the full website address, should be typed in between the first <a> tag and the closing </a> tag (the link text in this example).
Besides defining where a link should take a user, you can also specify whether or not the link should open in the same browser tab or if it should open in a new browser tab. This distinction is important when it comes to recognized best practices for directing traffic to external links — which ideally targets a new browser tab.
The HTML link code, with the defined target of opening the link in a new browser tab, looks something like this:
<a href=”website.com” target=”_blank”>Link text</a>
While we’re on the subject, let’s discuss two prefixes you can add to links to trigger other applications:1) Mailto: Launches the user’s primary email application, opening a new email draft to the specified email address, e.g. <a href=”mailto:firstname.lastname@example.org”>email@example.com</a>
2) Tel: Prompts your device to dial the numbers following this prefix in a link, e.g. <a href=”tel:8884449999”>tel:8884449999</a>
One more related HTML code to know — the code for sourcing (calling forth) images:
<img src=”imageURL.png” alt=”image description” />
Be careful when typing out image or link codes — the links to files you’re referencing are case sensitive.
HTML Color Codes
As part of an HTML element, executed with help from CSS, you can either specify a color using its predefined name (like "red", "orange", "gray") or apply it's RGB, HEX, or HSL.
Here’s a brief explanation of each color system and what makes it tick.
The RGB value defines a color according to it's red, green, and blue parts. The formula used is: rgb(red, green, blue). The parameters represent the intensity of each of the present colors on a scale of 0 to 255.
RGBA is an extension of the RGB value with an alpha channel to specify the opacity. The formula is thus: rgb(red, green, blue, alpha). The alpha value is a number between 0.0 and 1.0. When it's at 0.0, the color is fully transparent; at 1.0, it's fully opaque.
The HEX value (hexadecimal value) is used to specify colors in the form of #rrggbb where red, green, and blue are represented by hexadecimal values ranging between 00 and ff.
The HSL value refers to the hue, saturation, and lightness of the color. The formula used is: hsl(hue, saturation, lightness). Hue is represented by a value between 0 and 360 — red is 0, green is 120, and blue is 240. Both saturation and lightness are percentage values. Zero saturation shows a shade of gray while 100% shows full color. Zero lightness displays black while 100% lightness shows white.
HSLA is an extension of the HSL value and includes an alpha channel to define the opacity (similar to RGBA).
|RGB||rgb(red, green, blue)||rgb(255,0,0)|
|HSL||hsl(hue, saturation, lightness)||hsl(0,100%,50%)|
Most developers pick a specific format or combination of formats and stick with it. You should do the same to avoid confusion and make it easier to distinguish colors when you're coding.
HTML Space Code
HTML space code involves using special characters to create space on a webpage. Without using the proper formatting of these special characters, HTML compresses all space characters such as tabs and spaces to one character. Without an HTML space tag, knowing how to use HTML space codes gives you back control over your spacing.
HTML space code can be implemented with special characters. For a thin space, use   or  . For an en space, use   or  . For an em space, use &empsp; or  .
Without using the proper formatting of these special characters, HTML compresses all space characters such as tabs and spaces to one character. Without an HTML space tag, knowing how to use HTML space codes gives you back control over your HTML spacing.
Whenever you need to add a space within your text, you can use the appropriate special character, CSS, or the <pre> tag in HTML. When describing entities, you can use either the entity name or number.
The non-breaking space character is most commonly used. The space created using this method ensures that the two words on either side remain in the same line, even if the text wraps to a new line.
This example can help you understand how special characters may be used to add HTML space code:
- No space
- &empsp; or
You can also publish preformatted content using the <pre> tag in HTML. This way, the content retains the formatting made on your external word processing tool. This means that the content will be displayed in the browser as you entered it.
Best HTML Code Generators
Rather than start writing all of your HTML codes from scratch, the best HTML code generators can help you code faster and with less effort by providing an essential structure for any code you want.
Learn everything you need to know about HTML with our free guide: The Beginner's Guide to HTML and CSS for Marketers.
Here is a selection of a few of the best HTML code generators available to designers that you also can use to make your coding work easier.
1. HTML5 Boilerplate
HTML5 Boilerplate is a popular choice. It's a simple, sleek template with all the essentials of building a website with HTML and is a great place to start for marketers who are just starting to explore HTML.
Among its stand-out features is an optimized Google Analytics snippet and an index.html file that’s optimized to improve mobile adaptability. Integration with Normalize.css helps deal with any potential browser styling inconsistencies.
This video can help you understand how to use HTML5 Boilerplate.
Bootstrap is another popular HTML code generator. While HTML5 Boilerplate is a front-end template, the latter is a front-end component library. It's interesting that each claims the "world's most popular" title.
Bootstrap offers much more than just a template with features for layout, typography, content, UI components, and tooltips. Not only is it feature-rich — you can limit the files you download to only include the elements that you find useful for your project.
3. HTML5 Template Generator
As the name suggests, HTML5 Template Generator is used by designers to generate HTML5 templates. Developed by French developer Shikiryu, the generator comes with a range of capabilities for various common website elements.
Best HTML Code Testers
An HTML code tester or editor helps with writing the code in various ways such as styling tags, highlighting, and color-coding. When you use an editor, you can expect your typing speed to increase, helping you to be more productive when it comes to web design tasks.
These editors allow you to optimize your web pages without the need for advanced HTML skills.
The What You See Is What You Get (WYSIWYG) feature available in all of them lets you preview your coding results exactly as they will appear when published. Real-time results, as well as drag-and-drop functionality, makes editing your code quick and easy.
Web-based HTML code testers offer the convenience of skipping the installation and setting up of the environment. Here are some of the best code testers/editors.
Besides code editing/testing, Codepen is a learning environment as well as a community. You can use it to improve your basic coding skills by interacting with others on the platform who are both on your level and above it.
As the name suggests, Adobe Dreamweaver is an Adobe product. It's a popular WYSIWYG code editor that can help you design, publish, and manage your website with little technical skill. While its many capabilities can feel overwhelming to a beginner, Adobe makes the onboarding process as pain-free as possible, with in-depth tutorials.
With regular feature and user interface updates, Dreamweaver is a well-established managed software that any serious developer, designer, or marketer with an eye for design should consider.
JSFiddle allows anyone to share their code publicly and many code experts do. But not only can you test your own code — you can also browse working code samples from other programmers on the platform. Just remember to give proper credit to the original author when making use of their code!
There are numerous other tools that can help you test your code. Top alternatives include:
Most of these tools offer a freemium plan.
Should you evaluate options outside this shortlist, make sure that they meet the following basic features of all HTML code testers:
- Autocomplete, which automatically fills in HTML elements and attributes, saving you keystrokes
- Built-in File-Transfer Protocol (FTP) to help transfer the files faster
- A library of HTML entities
- Split-screen for easy viewing of the code
- Search feature to allow you to find any word from any file on the website
- Syntax error highlighting to let you easily spot errors
Basic HTML Knowledge Every Internet Marketer Should Have
If you learn basic HTML skills that allow you to handle website changes on the fly, you can save your company the productivity hits that happen whenever an employee has to work through someone else to get stuff done.
Let HTML be the technical skill you add to your personal marketing stack in 2020. Happy coding!