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.

Grow Your Business With HubSpot's Tools for WordPress Websites

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.

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:email@address.com”>email@address.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.

RGB

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.

HEX

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.

HSL

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).

method Formula Example (RED)
Color name n/a Red
RGB rgb(red, green, blue) rgb(255,0,0)
HEX #rrggbb #ff0000
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 can be implemented with special characters. For a thin space, use &thinsp; or &#8201;. For an en space, use &ensp; or &#8194;. For an em space, use &empsp; or &#8195.

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
  • &thinsp; or &#8201;
  • &ensp; or &#8194;
  • &empsp; or &#8195;

html space code example

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.

html space code example source code

Source

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.

 

2. Bootstrap

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.

With HTML5 Template Generator, you can easily structure your basic HTML code in seconds. The option to embed your site name, meta description, author details, and icons saves you time in the long-run. JavaScript users can also add jQuery and Google Analytics to their website site using this tool.

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.

Codepen

Codepen is one of the most popular code testers in front-end web development. It provides a way for developers using HTML, CSS, and JavaScript to easily test, edit, and showcase their code.

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.

Adobe Dreamweaver

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

JSFiddle is one of the oldest code playgrounds for web designers and developers. Despite its name, JSFiddle isn't limited to JavaScript code editing. It can also be used to test HTML and CSS code (or any combination of the three coding languages).

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!

Use HubSpot tools on your WordPress website and connect the two platforms  without dealing with code. Click here to learn more.

 Use HubSpot tools on your WordPress website and connect the two platforms  without dealing with code. Click here to learn more.

Originally published Feb 18, 2010 2:30:00 PM, updated March 31 2020

Topics:

Website Development